'tel' attribute not working in href of anchor tag in rich text editor in classic UI in AEM 6.1

Question

I am using AEM 6.1 SP2 , I am trying to enable 'tel' attribute in the href of anchor tag to make the click to call functionality work. I have already added 'htmlRules' node and links node under htmlRules node with 'protocols' property as [http://, https://, ftp://, tel:, mailto:, file://]

as specified in the link - http://labs.6dglobal.com/blog/2013-01-11/configuring-telephone-tags-within-rich-text-components-and-link-checker/

The 'validateHref' function in rte.js does read the 'protocols' property and validates the 'tel ' attribute as valid, but not sure why the 'tel' attribute does not persist in the markup when 'ok' is clicked in the author dialog.

this is the anchor tag -

<a style="color: #6c6c6c; text-decoration: underline;" class="tel" href="tel:1234 567 891">1234 567 89</a>

and this is how it renders as markup on page -

<a style="color: rgb(108,108,108);text-decoration: underline;" class="tel">1234 567 89</a>

This is the 'htmlRules' node xml -

<htmlRules jcr:primaryType="nt:unstructured">
   <serializer jcr:primaryType="nt:unstructured">
      <cleanup jcr:primaryType="nt:unstructured">
         <pre
            jcr:primaryType="nt:unstructured"
            tagsToRemove="[\0]"/>
         <post
            jcr:primaryType="nt:unstructured"
            tagsToRemove="[\0]"/>
         <paste
            jcr:primaryType="nt:unstructured"
            tagsToRemove="[\0]"/>
      </cleanup>
   </serializer>
   <links
      jcr:primaryType="nt:unstructured"
      protocols="[http://,https://,ftp://,tel:,mailto:,file://]"/>
</htmlRules>

Answer 1

This was fixed overlaying the xssprotection config file at -

/libs/cq/xssprotection/config.xml

to

/apps/cq/xssprotection/config.xml

and adding the 'tel' attribute in the regexp list

<regexp name="telURL" value="tel:[0-9]+"/>

<attribute name="href">
 <regexp-list>
  <regexp name="onsiteURL"/>
  <regexp name="offsiteURL"/>
  <regexp name="telURL"/>
 </regexp-list>
</attribute>

This has been described in the blog at

https://experience-aem.blogspot.com.au/2015/05/aem-6-sp2-handling-custom-protocol-in-link-href-in-rte.html

Although it has been mentioned in that blog and in other places

Rendering telephone links in HTL based on input from a Rich Text widget

https://forums.adobe.com/thread/2329552

that for sightly the config file is present at -

/libs/sling/xss/config.xml

and not at

/libs/cq/xssprotection/config.xml

and even when I am using a sightly component ,

/libs/wcm/foundation/components/text/text.html

even then, overlaying the config file at /libs/sling/xss/config.xml did not have any effect, I had to overlay the file at /libs/cq/xssprotection/config.xml. I am using aem 6.1 SP2. Mysterious ways of AEM

Answer 2

It seems that the solution you linked in the question is not applicable for the latest versions of AEM.

The mechanism that is now responsible for removing href starting with tel is HTL XSS protection that scans properties before being written. The simplest way to avoid that is disabling it in your Rich Text component: ${properties.text @ context='unsafe'}. That is not the safest solution though and instead it is better to extend XSS protection configuration with these steps:

1. Overlay XSS configuration files by copying it from libs to apps:

/libs/cq/xssprotection/config.xml -> /apps/cq/xssprotection/config.xml /libs/sling/xss/config.xml -> /apps/sling/xss/config.xml

2. Add protocol with new regexp for tel:

<regexp name="telURL" value="tel:[0-9]+"/>

3. Add telURL to regexp-list of anchor href attribute:

<regexp name="telURL"/>

4. It might be also required to restart AEM instance after doing these changes.

In the case of issues, you can read more about it on this blog page and this Stackoverflow post.

Additionally, Link Checker mechanism may still mark your link as invalid on edit mode, and on publish it can be removed.

Depending if you need it to make it work to one or all specific anchors or all anchors in your app, you can either:

• add x-cq-linkchecker="skip" attribute to your anchor, as i.net suggested in the comment under your post
• or if you would like to allow adding tel to any possible anchor on the page, add exception tel: Special Link Prefixes in Day CQ Link Checker Service OSGI service. Please note that then the service configuration needs to be applied on all author and publish instances.

Answer 3

We have done the same as per the reference link you have shared but we are passing the "href" value from the dialog. ex href="tel: ${properties.propertyname}". or you can try like href="${properties.propertyname}" and pass the value from dialog "tel:123456789". Not sure if this will help you. Thanks.