Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.

Script issue with RTE

Avatar

Level 1

In AEM 6.3 script tag is not getting saved when configured via RTE.

Below are the observations we noticed

1.If we tried giving <script></script> in source edit and come back to normal view within dialog before closing, script is removed,

this is fixed by doing changes in whitespaceprocessor.js by removing script

2. On click of dialog save, values are not getting retained in jcr:content node. script tag is getting removed.

And also src attribute for img tag is getting removed for few url's

below are the steps which helps us to solve few issues

1.We overlayed /apps/cq/xssprotection/config.xml which solves issue by adding required url.

2. This works only for few scenarios and fails if we are trying to use below img src tag

<img class='avia_image ' src='https://s3.amazonaws.com/cision-wp-files/us/wp-content/uploads/2018/03/12155415/marketing_content_2....' alt='' title='marketing_content_2' itemprop="contentURL"  />

Help is Appreciated !!

Thanks

20 Replies

Avatar

Level 10

I am not following what you are trying to do. Are you following Adobe documentation when modifying the RTE like this., Can you ponit the community to the doc so this can be reproduced.

We are using the standard OOTB component and just trying to add an HTML which contains a script tag , On saving the Dialog, the script tag and entire content within the script is getting stripped of , leaving only with HTML.

Does this answer to your query?

Avatar

Level 10

I am concerned when you say you have to modify whitespaceprocessor.js. As far as i know - there are no AEM instructions prompting you to modify this JS file.

If there are - can you point me there.

Hi Scott,

Thanks for you reply,

I had modified the whitespaceprocessor.js by referring to the solution given in below thread.

Is it possible to add javascript in rte? If yes, then how?

Even after trying the above solution the issue still exists.

Let us know what needs to be done further.

Avatar

Administrator

Similar thread:-



Kautuk Sahni

Avatar

Level 2

hi Syeda ,

You were able to solve this ??

I'm running into the same issue that the RTE is removing the src attribute from the <img> tag

Avatar

Community Advisor

Hi,

You can check /libs/cq/xssprotection/config.xml for img tag valid rules.

Thanks
Arun



Arun Patidar

Avatar

Level 2

Thanks Arun,

For the img tag inside the RTE wasn't a missing configuration inside the /libs/cq/xssprotection/config.xml

It was the /libs/clientlibs/granite/richtext/core/js/HtmlSerializer.js the one stripping out the src attribute from the img tag.

Avatar

Community Advisor

Hi,

I tried to add img tag from source works for me.

I didn't do any config.

Screen Shot 2018-08-14 at 1.45.37 PM.png



Arun Patidar

Avatar

Level 2

Which AEM version did you test it ??

We are using AEM 6.3 and created a RTE plugin that consumes a third party application and with the html being returned pasted inside the RTE. When we start switching ( or directly accept the dialog changes) from the plugin view source  it remove the src attribute form the image tag

Avatar

Community Advisor

Hi,

I tested in 6.3.

Are you able to create img tag manually from source editor as I did?



Arun Patidar

Avatar

Level 2

Yes, from the source editor yes.

But not if you use a custom RTE plugin that add html snippets. And I think Syeda ( that created this thread ) had the same issue

Avatar

Level 1

Hi,

This works fine for few img tags without customization.

Script issue is still there with RTE,we are using text area instead of RTE if html has script.

Avatar

Community Advisor

Hi,

I observed only one thing if you put src in single quotes then values are getting stripped.

Try to convert src attribute value in double quotes

e.g. <p><img src="https://forums.adobe.com/community/image/5429/2.png?a=843130" alt="img1"></p>

src getting stripped for  <p><img src='https://forums.adobe.com/community/image/5429/2.png?a=843130'  alt="img1"></p>



Arun Patidar

Avatar

Level 2

If you look into http://localhost:4502/crx/de/index.jsp#/libs/clientlibs/granite/richtext/core/js/HtmlSerializer.js  in the line 272 it uses a attribMapping array. That mapping is defined

CUI.rte.HtmlSerializer.HELPER_ATTRIB_MAPPINGS = {

    "a": [ "href", CUI.rte.Common.HREF_ATTRIB ],

    "img": [ "src", CUI.rte.Common.SRC_ATTRIB ]

};

CUI.rte.Common.SRC_ATTRIB search for _rte_src, cause I'm only adding the src attribute it stripped out src tag.

That was what I found debugging, in order to avoid this behavior I had to overlay this file and did the modification that I needed.

[link edited on poster's request.]

Avatar

Community Advisor

Yes,

I can see while It is added in dialog it add _rte_src attribute. If I removed that attribute and save again, src attribute striped again.

That could be the reason.

Screen Shot 2018-08-14 at 4.12.22 PM.png

I tried to add below works for me it converts _rte_src to src

<img alt="img1" _rte_src="https://forums.adobe.com/community/image/5429/2.png?a=843130">

Not sure if anything above is useful or not for you.



Arun Patidar

Avatar

Level 2

Thanks Arun,

It's not an option cause I'm using a third-party application that return the html snippet to put inside the RTE and I want to avoid parsing the html.

As a workaround I extended HtmlSerializer.js and changed that behavior, after that everything works

Avatar

Community Advisor

Hi,

I am glad it works for you at the end. Sometimes we need to modify OOTB things to adapt for custom use.



Arun Patidar

Avatar

Level 1

I found that adding _rte_src="your_url" in addition to src="your_url" keeps your src attribute from getting stripped and becoming null after saving your rte.