XSS Vulnerability in Live Preview

Version: 0.16.22

Are you able to reproduce the bug from the demo?

[ x] Yes

Steps:

• Click Import HTML
• Insert <img src="any_image_source.gif" onload="alert(1)"/>
• The JS will be executed

Having proper “sandbox” attribute on iframe could probably mitigate the problem.

[artf]

Quick update, I’ve started working on this one, the first step is done here. I had to switch to the native DOMParser in order to avoid the execution of inline event handlers in the main context.

The next step, which is the only valid/solid solution I have found so far, is the usage of CSP with a nonce inside iframes. The idea is to generate a random nonce (probably with an option to be customized) and apply it to all the trusted scripts/styles, this will keep Components with JS working as expected. About pasting custom HTML/JS inside the editor we might think about an extra trusted option to pass on each append. For example, by default, when someone tries to append a custom code like that (config.allowScripts should be enabled, otherwise scripts are removed in the Parser):

editor.getWrapper().append(`<script>console.log('malicious code');</script>`);

Here the component will be available in the export code (due to allowScripts) but won’t be executed in the canvas, as it is against the CSP rule (which by default won’t include unsafe-inline). In case I want to allow some external inline script (eg. in grapesjs-custom-code we should add some checkbox to allow that), I have to use the new option:

editor.getWrapper().append(`<script>console.log('trusted code');</script>`, { trusted: true });

In this case, the code will be executed also in the canvas. One important note: with CSP enabled and without unsafe-inline rule, all the attribute event handlers are ALWAYS disabled. From what I know there is no way to enable event handlers safely via CSP (eg. https://stackoverflow.com/a/56400044).

What do you think? What would be the right CSP to apply by default?

Hey @blinkybill that one is ready for the next release #3558

[blinkybill]

if you use content security policy http header you can get around a lot of XSS issues like this. but there is one issue with GrapesJS atm which is that it uses underscore.js, which includes a function with use of “eval” so you can’t make the CSP header as secure as it should be