RTE "Source Edit" mode vanishing style tag

[vasudevaraog731]

Hi,

I have added the below snippet code in the RTE "Source Edit" mode to apply the background color for a text.First time while entered the code it's worked fine and applied the style but when we re-open the dialog and with out changing any thing just submitted the dialog the style tag got vanished from the div tag.Is there any issue  applying style via source edit mode?

<div class='offer-comparison-template' style='background-color: rgba(255, 0, 0, 0.5);'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>

First Time :

After Re-open the dialog and submit with out editing:

[Ravi_Pampana]

Hi,

I think AEM RTE will not support style tag, we can use style plugin to add class or color plugin - see Color picker and insert image RTE plugins

will not be supporting use of the script, style, meta, and link tags in the product officially. This is due to the fact that it is not valid html to allow them in the document body.

You can check Facing problem in Rich text component

Note: I tried in AEM 6.4.2 and style value did not work for the first time also.

Hope this helps !

[Jaideep_Brar]

Check if you get something like [1] in the error.log when you save the dialog. If, yes, Tag is removed by the xss protection framework.

Cross-site scripting (XSS) allows attackers to inject code into web pages viewed by other users. This security vulnerability can be exploited by malicious web users to bypass access controls.

AEM applies the principle of filtering all user-supplied content upon output. Preventing XSS is given the highest priority during both development and testing.

You can overlay the "/libs/cq/xssprotection/config.xml" and update the security rules as per your business needs but that will expose AEM instance to cross-site scripting and not recommended by Adobe

For more details check [2]

[1]

25.02.2019 18:29:31.815 *INFO* [10.98.144.110 [1551119371795] GET /content/support/en_US/security.html HTTP/1.1] org.apache.sling.xss.impl.HtmlToHtmlContentContext AntiSamy warning: The a tag contained an attribute that we could not process. The rel attribute had a value of "noopener noreferrer". This value could not be accepted for security reasons. We have chosen to remove this attribute from the tag and leave everything else in place so that we could process the input.

[2] https://helpx.adobe.com/ca/experience-manager/6-2/sites/developing/using/security.html

[hanishb17637780]

Yes, exactly.

You could also check it here at http://localhost:4502/crx/de/index.jsp#/content/we-retail/us/en/user/jcr%3Acontent/root/responsivegr...

http://localhost:4502/crx/de/index.jsp#/content/we-retail/us/en/user/jcr%3Acontent/root/responsivegr...

that the persisted html contains the background style. Now, If you go to the Preview mode, where RTE is not available, you would notice that the background color is not present. So, it's being removed by the XSS Antisamy rules indeed

[vasudevaraog731]

This issue happening only when source edit HTML contains as "table style(<table style="width: 100.0%;"></table>)".This working when we use any style tag as(only rgb) style="background-color: rgb(255, 0, 0);"  but not working with style="background-color: rgba(255, 0, 0, 0.5);".The value not holding when submitting second time with out changing table style.

[vasudevaraog731]

Any one  tried style="background-color: rgba(255, 0, 0, 0.5); in richText Source edit mode.It's not working for rgba but working with rgb for tableStyles ?

[hanishb17637780]

Hi @vasudevaraog73192255

Did you check my last comment related to XSS Antisamy rules ?

Because this is also happening because of the same reason. The reason is not RTE, but XSS.

If this is not clear, Checkout Page 28 of the Slides from my recent Gem session -

https://helpx.adobe.com/content/dam/help/en/experience-manager/kt/eseminars/gems/AEM-Rich-Text-Edito...

And you will also find a small demo related to this just after this slide in the video -

AEM Rich Text Editor (RTE) Deep Dive

HTH

Hanish

[vasudevaraog731]

Yes... you are correct

It's removed while Opening the dialog

org.apache.sling.xss.impl.HtmlToHtmlContentContext AntiSamy warning: The div tag had a style attribute, "background&#45;color", that could not be allowed for security reasons.

What is the recommended step for  this issue?

[hanishb17637780]

The fix for that would be to modify the XSS config to allow it from here -

/libs/cq/xssprotection/config.xml

But, please note that it's not recommended to modify it. This html is not allowed as per the XSS config (I am not aware of the reason). So, best is to avoid using this. You could try to search on google if it's a valid and secured html. If it is, you can try to modify the xml