Search code examples
xssaemsightlyhtl

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

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>
Solution

  • 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