AEM Rich Text Editor rendering aria-labels

You have written some custom JavaScript for the AEM Core Text Component, core/wcm/components/text/v2/text, which allows content producers to configure the HTML attribute “aria-label” to anchor “a” tags. When the page is being rendered on the page, the “aria-label” for the links, “a” tags, are not visible. You as a developer check crx/de and you do actually see the configured text component contains “aria-label” in each of every link.

Why is the aria-label for the AEM Core Text Component not rendering as expected?
For rendering links that contain the “aria-label” attribute, AEM refers to AEM’s XSS (Cross-Site Scripting) protection. This protection mechanism, exclusive to AEM, effectively prevents attackers from injecting malicious code into web pages that are viewed by other users. AEM’s XSS protection is built upon the trusted AntiSamy Java library, which is provided by OWASP (Open Web Application Security Project).

During the rendering process in AEM, if certain tags are not included in the whitelist, they will be stripped off. This means that any tags not explicitly permitted by the XSS protection configuration will be removed when the web pages are rendered. By enforcing this restriction, AEM ensures that only authorized and safe tags are displayed, significantly reducing the potential risk of XSS vulnerabilities.

In this article, we will configure AEM to allow the “aria-label” HTML attribute, so your text component’s links are rendering as expected. This article does not provide the JavaScript solution for how to add capabilities to the AEM Core Text Component for the “aria-label” HTML attribute.

Developer steps to enable and allow the AEM Core Text Component to render “aria-label” on the page.

1. Login to AEM
2. Visit http://localhost:4502/crx/de/index.jsp#/libs/cq/xssprotection/config.xml
3. Overlay the XSS protection configuration by copying /libs/cq/xssprotection into /apps/cq/xssprotection (and all it’s children)
4. Delete the /apps/cq/xssprotection/rep:policy
5. From crx/DE you can edit the file /apps/cq/xssprotection/config.xml
6. On your keyboard, hit “ctrl + f” to find <tag name=”a” action=”validate”>
7. This is an XML file, so find the end of the closing tag </tag>
8. Insert this line of code:

   1 2 3 4 5

   <attribute name="aria-label">     <regexp-list>         <regexp name="anything"/>     </regexp-list>  </attribute>

   

9. Done
10. Now test out the Text Component, and expect the aria-labels to render as expected!
11. Next, you would want to copy the /apps/cq/xssprotection into your code base, so you can deploy the xss configuration into difference environments of AEM automatically.