Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

AEM 6.4.5 RTE hyperlink

Avatar

Level 4

shikhasoni1_0-1652257628435.png

In the RTE, I want to add aria-label="1234" inside anchor tag for that i need to add one more field in hyperlink dropdown. How can i achieve that?

Thanks in advance!

1 Accepted Solution

Avatar

Correct answer by
Level 2

 

Hi @shikhasoni1 ,

 

To achieve the above scenario you have to follow 3 steps.

 

step1-using this it will add aria-label in anchor tag in crx/de but you will not be able to retrieve it in dialog 

 

  1. Copy /libs/cq/xssprotection/config.xml to /apps/cq/xssprotection/config.xml.
  2. Open /apps/cq/xssprotection/config.xml. In the common-attributes section, add the following target attribute declaration.
    <attribute name="aria-label>
    <regexp-list> <regexp value="[a-zA-Z0-9-_\$]+" />
    </regexp-list>
    </attribute>
  3. Find the tag declaration by searching the term <tag name="a"    >
  4. Add the line below in the list of attributes:        <attribute name="aria-label" />
  5. use below link to add the js 
    http://experience-aem.blogspot.com/2017/09/aem-63-touch-ui-extend-rich-text-link-dialog-add-rel-sele...

 

After doing the above steps you will get the below error in error.log
org.apache.sling.xss.impl.HtmlToHtmlContentContext AntiSamy warning: The a tag contained an attribute that we could not process. Thearia&#45;label  attribute had a value of "bookmark"

 

 

 

step2- To avoid RTE editor to strip them, I have disabled xss filtering for dialog by adding the property to the text node usinng disableXSSFilteringproperty {Boolean}true

 

step3-To avoid DOM to strip aria-label, content="unsafe" You should  add in your html code

 

View solution in original post

7 Replies

Avatar

Community Advisor

Hi @shikhasoni1 ,

 

First, check whether the aria-label attribute is enabled or not in XssProtection. You can refer to the below blog of that.

https://medium.com/@mayursatav/enable-html-tags-attributes-in-rte-555dd60d62ee

 

If it is enabled then go for the further customization the way it is mentioned in the below blog for the attribute plugin

https://www.bounteous.com/insights/2022/01/06/custom-rich-text-editor-plugins-adobe-experience-manag...

 

 

 

Avatar

Level 4

Hi Mayur,

Not able to achieve the requirement, after saving and reopening the dialog again the value is showing as undefined.

Avatar

Level 4

Hi Arun, I followed everything but after saving and reopening the dialog again the value is showing as undefined.

 

 below is the error in error.log

 

17.05.2022 21:05:34.012 *INFO* [0:0:0:0:0:0:0:1 [1652801733843] GET /content/hyundai/com/us/en/jcr:content/footerResponsiveGrid/footer.html HTTP/1.1] org.apache.sling.xss.impl.HtmlToHtmlContentContext AntiSamy warning: The a tag contained an attribute that we could not process. The aria&#45;label attribute has been filtered out, but the tag is still in place. The value of the attribute was "4653".

 

Could you please help on this.

Avatar

Correct answer by
Level 2

 

Hi @shikhasoni1 ,

 

To achieve the above scenario you have to follow 3 steps.

 

step1-using this it will add aria-label in anchor tag in crx/de but you will not be able to retrieve it in dialog 

 

  1. Copy /libs/cq/xssprotection/config.xml to /apps/cq/xssprotection/config.xml.
  2. Open /apps/cq/xssprotection/config.xml. In the common-attributes section, add the following target attribute declaration.
    <attribute name="aria-label>
    <regexp-list> <regexp value="[a-zA-Z0-9-_\$]+" />
    </regexp-list>
    </attribute>
  3. Find the tag declaration by searching the term <tag name="a"    >
  4. Add the line below in the list of attributes:        <attribute name="aria-label" />
  5. use below link to add the js 
    http://experience-aem.blogspot.com/2017/09/aem-63-touch-ui-extend-rich-text-link-dialog-add-rel-sele...

 

After doing the above steps you will get the below error in error.log
org.apache.sling.xss.impl.HtmlToHtmlContentContext AntiSamy warning: The a tag contained an attribute that we could not process. Thearia&#45;label  attribute had a value of "bookmark"

 

 

 

step2- To avoid RTE editor to strip them, I have disabled xss filtering for dialog by adding the property to the text node usinng disableXSSFilteringproperty {Boolean}true

 

step3-To avoid DOM to strip aria-label, content="unsafe" You should  add in your html code

 

Avatar

Level 4

Hey , That's great, it resolved the issue and everything is working fine. Thanks Aniket.

Avatar

Level 1

Hi,

Are you able to see the value saved for aria-label after reopening the dialog? In our case, the value is being saved and available in source, but the value is not getting retained in plugin.

PrasannaG2_0-1700635099345.png

Can you please help me on this.

 

Thanks!