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

Question

I have a component using the Rich Text Edit widget (xtype="richtext") in my project that's used across the entire site as the default text component.

The users would like to be able to insert phone links using the tel URI scheme into the text entered using this component.

The dialog allows them to do so but when the contents of the Rich Text Edit are rendered in Sightly/HTL later on, the html context is used:

{$text @ context='html'}

Once this is done, the value of my attribute is ignored.

The HTML stored in the repository is:

 <a href="tel:[phone]">Call us!</a>

And what's actually rendered on the page on the author instance is:

 <a>Call us!</a>

on the publish instance, the tag gets removed altogether because of the link checker.

Changing the context to unsafe causes the href to render but it's not a solution I'm willing to accept. The component is used in a lot of places and I want to be sure the XSS protection is sufficient.

Is there a way I can affect the way the html context in HTL treats telephone links?

I tried adding an extra regular expression to the overlay of apps/cq/xssprotection/config.xml:

<regexp name="onsiteURL" value="([\p{L}\p{N}\\\.\#@\$%\+&amp;;\-_~,\?=/!]+|\#(\w)+)"/>
<regexp name="offsiteURL" value="(\s)*((ht|f)tp(s?)://|mailto:)[\p{L}\p{N}]+[\p{L}\p{N}\p{Zs}\.\#@\$%\+&amp;;:\-_~,\?=/!]*(\s)*"/>
<regexp name="telephoneLink" value="tel:\+?[0-9]+"/>

and further on:

<attribute name="href">
    <regexp-list>
        <regexp name="onsiteURL"/>
        <regexp name="offsiteURL"/>
        <regexp name="telephoneLink"/>
    </regexp-list>
    <!-- Skipped for brevity -->
</attribute>

but that doesn't seem to affect the way the Sightly/HTL escapes strings in the html context.

I've also tried overlaying the Sling xss rules located in /libs/sling/xss/config.xml but had no luck either.

How can it be done?

Argos

Answer 1

There are two xss protection config files:

1. /libs/cq/xssprotection/config.xml
2. /libs/sling/xss/config.xml

Sightly is using the second one, which means that you need to overlay it at path /apps/sling/xss/config.xml

What is worth mentioning is that new configuration seems to be applied only after restart of your aem instance.

Bort

Tried overlaying the one in /libs/sling/xss as well but it doesn't seem to work. There may be something else I'm missing though. I'll try the restart. – Argos

Yup, that started working when I restarted the instance. Cheers :) – Argos

@Argos This answer is not wrong. It is one way of enabling the tel: links. But my recommendation would be to look at the LinkChecker configuration. The href in your phone links is probably removed by the link checker. You can configure a list of appropriate Special Link Prefixes like tel: etc. and then the Link Checker will not remove links with those prefixes anymore. With this you won't have to use an overlay. – Pupa

@Pupa LinkChecker is the first thing we have checked and is the first step you need to do - without updated LinkChecker configuration link wouldn't work even in unsafe sightly / HTL context – Bort

@Pupa yup, the way I understand it both steps are required. – Argos

I'd say you only need to change the LinkChecker configuration. No need to overlay xssprotection. – Pupa

I tried overlaying the first one as per a aem forum thread, that also works. Not clear about the role of both. – Lancelot

@Pupa Your suggestion is correct. My same issue was resolved by Link Checker – Wether