Rich text editor showing full text

[Tuan Nam Dinh Tran]

Hi team,

I was working on the rich text editor, and for this input

Sorry for the fact that I have to use an image in this case

I would expect it to go like this

However, this is what I get when I use the syncfusion rich text editor

Just wondering if there is any setting that allows me to display the full html like that

[Vinitha Jeyakumar]

Hi Tuan, 

 

 

Greetings from Syncfusion support, 

 

 

We have validated your query “Rich text editor showing full text” 

 

We want to let you know that we cannot include the <script> tag as a input value to the Rich Text Editor and it is the behavior of the Rich Text Editor control, since it indicates the javascript code to be included. Either we can make it visible in the source elements by enabling the enableHtmlSanitizer property as false, it decides whether to allow cross-scripting site or not. Please check the code below, 

 

Code snippet: 

<ejs-richtexteditor id="defaultRTE" enableHtmlSanitizer="true"> 

    <e-content-template> 

        <ul><li>List 1</li><li>List 2</li></ul><p><br></p><p>List 3</p><p>List 4</p><p><br></p><p>&lt;script&gt;alert("hacked")&lt;/script&gt;</p><p>&lt;b onmouseover = alert("XSSTesting!')&gt;&lt;/b&gt;</p> 

    </e-content-template> 

</ejs-richtexteditor> 

 

API Link: https://ej2.syncfusion.com/documentation/api/rich-text-editor/#enablehtmlsanitizer 

 

Please check the code and API link and let us know if you have any concerns. 

 

Regards, 

Vinitha 

 

[Tuan Nam Dinh Tran]

Hi,

Sorry for the late reply. I tried that method and it's not quite the thing I want. If I disable the HTML Sanitizer, the dangerous text is being treated as a html element, not a text, which is not quite what I want. What I want is for the rtf to display this 

and when I click on inspect on the browser, it should go like this, with all the < and > encoded

in case that thing is not possible, just wondering how you did the filtering thing? which tags are being sanitized?

[Indrajith Srinivasan]

Hi Tuan, 

 

Good day to you, 

 

We have validated your reported queries, 

 

Query 1: “What I want is for the rtf to display this ? just wondering how you did the filtering thing?” 

 

We have further validated on your reported query. You can use the value property of the editor, to show the content as expected in the Rich Text Editor.  Check the below shared code blocks and sample for reference. 

 

Code blocks: 

 

 

<ejs-richtexteditor id="defaultRTE" enableHtmlSanitizer="false" 

                    value="<ul><li>List 1</li><li>List 2</li></ul><p><br></p><p>List 3</p><p>List 4</p><p><br></p><p>&lt;script&gt;alert('hacked')&lt;/script&gt;</p><p>&lt;b onmouseover = alert('XSSTesting!')&gt;&lt;/b&gt;</p>"> 

</ejs-richtexteditor> 

 

 

Screenshot:  

 

 

 

Query 2: “which tags are being sanitized?” 

 

Below are the tags, selectors and events which will be sanitized. 

 

The Rich Text Editor value will be sanitized by removing the below tags,  

 

'script',  

'iframe[src]',  

'link[rel='nofollow' href*="javascript:"]',  

'object[type="text/x-scriptlet"]',  

'object[data^="data:text/html;base64"]',  

'img[src^="data:text/html;base64"]',  

'[src^="javascript:"]',  

'[dynsrc^="javascript:"]',  

'[lowsrc^="javascript:"]',  

'[type^="application/x-shockwave-flash"]'  

  

Also, by removing the below attributes with certain selectors,  

{ attribute: 'rel='nofollow' href', selector: '[rel='nofollow' href*="javascript:"]' },  

{ attribute: 'background', selector: '[background^="javascript:"]' },  

{ attribute: 'style', selector: '[style*="javascript:"]' },  

{ attribute: 'style', selector: '[style*="expression("]' },  

{ attribute: 'rel='nofollow' href', selector: 'a[rel='nofollow' href^="data:text/html;base64"]' }];  

  

Also, the below Java Script events will also be removed from the elements,  

'onchange', 'onclick', 'onmouseover', 'onmouseout', 'onkeydown', 'onload', 'onerror', 'onblur',  

'onfocus', 'onbeforeload', 'onbeforeunload', 'onkeyup', 'onsubmit', 'onafterprint', 'onbeforeonload', 'onbeforeprint',  

'onblur', 'oncanplay', 'oncanplaythrough', 'onchange', 'onclick', 'oncontextmenu', 'ondblclick', 'ondrag', 'ondragend', 'ondragenter',  

'ondragleave', 'ondragover', 'ondragstart', 'ondrop', 'ondurationchange', 'onemptied', 'onended', 'onerror', 'onerror',  

'onfocus', 'onformchange', 'onforminput', 'onhaschange', 'oninput', 'oninvalid', 'onkeydown', 'onkeypress',  

'onkeyup', 'onload', 'onloadeddata', 'onloadedmetadata', 'onloadstart', 'onmessage', 'onmousedown',  

'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onmousewheel', 'onoffline', 'onoine', 'ononline', 'onpagehide', 'onpageshow',  

'onpause', 'onplay', 'onplaying', 'onpopstate', 'onprogress', 'onratechange', 'onreadystatechange', 'onredo', 'onresize', 'onscroll',  

'onseeked', 'onseeking', 'onselect', 'onstalled', 'onstorage', 'onsubmit', 'onsuspend', 'ontimeupdate',  

'onundo', 'onunload', 'onvolumechange', 'onwaiting', 'onmouseenter', 'onmouseleave', 'onmousewheel', 'onstart', 'onpropertychange'  

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Tuan Nam Dinh Tran]

sorry for taking so long to answer, but your suggestion works. Thanks a lot!

[Indrajith Srinivasan]

Hi Tuan,

Welcome,

We are glad that your reported issue is resolved. Please get back to us if you need any further assistance.

Regards,

Indrajith