script tags and javascript:alert is allowed, even if invalid_elements and allow_script_urls is set

[jaspritt-hora]

Hi, I want to remove the script tags and javascript:alert code, while getting the content from the editor. I have set the following options in init:

invalid_elements: "script,link"
allow_script_urls: false

I have got the above attributes from the official documentation.

In the editor, I have typed the below text
<script>alert("Hello")</script>
In console, I have the following -
Editor content --> <p>&lt;script&gt;alert('Hi')&lt;/script&gt;</p>

I want am expecting - script tag to be removed

Javascript code example -

In the editor, I have typed the below text
<a href="javascript:alert(1)"></a>
In console, I have the following -
Editor content --> <p>&lt;a href="javascript:alert(1)"&gt;&lt;/a&gt;</p>

I am expecting the output as - javascript: portion to be removed

I am using the following versions -
tinymce/tinymce-react - v4.2.0
tinymce - v6

Is the Editor content console correct for both cases. If NOT, how do I go about achieving the same?

[tiny-james]

It does remove scripts, try this demo for example:
https://codesandbox.io/s/removing-scripts-wqn7nd?file=/src/index.js

[jaspritt-hora]

@tiny-james - Any information on the new scenario mentioned above?

[tiny-james]

Those are not script tags. You are getting confused between encoded text and script tags. Note how the < becomes <, it can not run as a script.

[jaspritt-hora]

@tiny-james - I see that. I didn't phrase my question correctly.

Scenario -
If I fetch the editor content as text or as raw (after encoding the content). I would get -

<script>alert('hello')</script>
<p><a href="javascript:alert(1)">Alert me</a></p>

This would then have to be rendered as dangerouslySetInnerHTML, to show the user as message.
Therefore, the code inside the script tag and href would execute on clicking - this would lead to an XSS attack (which would be disastrous)

In my application, there is NO edit mode, hence the content coming from DB would never be rendered inside the editor. Hence, I believe allow_script_url and invalid_elements wouldn't work.

Question -
Is there an inbuilt way (parameter or method ) of NOT allowing script and javascript:url content to pass to server ?
OR
Do I have to use a 3rd party library as way of sanitizing the content, before passing to the server?
Would this be the correct approach or am I missing something?

Additional Notes:
I wasn't able to find the option in TinyMCE
However, I searched and found - https://github.com/cure53/DOMPurify library - which sanitizes the content and gets rid of the above script and javascript:url tags.

[tiny-james]

You seem to be confusing plain text rendered safely in the editor with HTML that might contain XSS. When using TinyMCE you can't type HTML directly into the editor like you have in your screenshots so anything you type is already escaped and safe. To input HTML with a GUI you use the code plugin (see: https://www.tiny.cloud/docs/tinymce/6/code/ ) which gives a popup window. Once you close the code view popup all the HTML is sanitized to remove any vector for XSS before updating the editor.

This would then have to be rendered as dangerouslySetInnerHTML, to show the user as message.

No you would never render text with dangerouslySetInnerHTML. Instead use <div style={{ whiteSpace: 'pre-wrap' }}>{text}</div>.

That said you may as well use a textarea if you only care about text. TinyMCE is a HTML editor that can if needed output text but it doesn't give any benefit over textarea if all you want is text.

Additionally don't ever use editor.getContent( { format: 'raw' }) as this method is only intended for internal use by plugins and even then it is very rare to need it. I guarantee you don't need it (we don't even document it! https://www.tiny.cloud/docs/tinymce/6/apis/tinymce.editor/#getContent ).

Is there an inbuilt way (parameter or method ) of NOT allowing script and javascript:url content to pass to server ?

Any content that comes from the editor by default will be HTML that has XSS removed. That said you should never trust any content from the client side. Always validate content that is to be displayed as HTML (that is outside the editor) on the server side because your users have full control over the client side and could have sent anything to the server.

Do I have to use a 3rd party library as way of sanitizing the content, before passing to the server?

Just sanitize it on the server, client side sanitization is only helpful to prevent XSS from pasted content (which the editor already protects against). If you are using nodejs then DOMPurify will work on the server too. If you are only dealing with plain text then even better - you just have to ensure that you never try to render it as HTML (ie never use dangerouslySetInnerHtml).

[jaspritt-hora]

@tiny-james - Thank you for the detailed info. This clarifies the approach to be taken.
Have a good one!