XSS Vulnerability in Live Preview

Well if you use GrapesJS and allow the possibility to insert custom HTML, yes, Self-XSS is possible.

Unfortunately, there are few issues that do not allow me to fix this properly

• I need to access the iframe's DOM in order to add/update inner components so, the editor won't work without sandbox="allow-same-origin".
• Running JS in the editor is one of its features (Components with JS) so to make them work I'd also need allow-scripts
• Having allow-same-origin and allow-scripts at the same time is almost like not using sandbox as the iframe is able to access cookies and other web storage interfaces (eg. LocalStorage, SessionStorage, etc.) of the parent document.

The only valid solution I see, for now, is by default enabling only sandbox="allow-same-origin". Which means Components with JS won't work and to enable it you should change some new option, by taking the risk of Self-XSS if you also allow custom HTML import

I've seen also solutions like this https://stackoverflow.com/a/41606174 (in this case it removes the possibility to read/write cookies) but I'm not sure how is actually reliable

Any suggestion?? 😬

You are right, we thought sandbox="allow-same-origin" will do the job, but allow-scripts is also needed, and then it's like not using sandbox at all. But, what could be helpful anyway is to provide a way for grapejs users to somehow control attributes of the iframe canvas - that way they can take the responsibility and control sandbox value or other attributes.

Thanks!

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