How to securely load user genereated Javascript code from IFrame into my website?
Before I start, I have found a few related references to this question, but they are not answered previously or are about a slightly different scenario to mine.
I have the following need. I need a way to let users write Javascript code, which I then use in my website. From my reading online, I can think of two ways to do this. The website does require sign in.
Way 1
Place the area where users generate the javascript into a outer sandboxed IFrame in a subdomain of my main website. Pass the code to a inner IFrame on my main website to execute the code. This approach would provide the most protection, however due to the architecture of my app this is pretty difficult and I would like to avoid having a inner IFrame.
Way 2
Only have one Iframe where the user generates the code with the following attributes
- Sandbox allow scripts only
- Strict CSP to only allow the main domain and its subdomains to embed the content in an iframe) pass the code back to my main website via postMessage and execute it.
- X-Frame-Options: SAMEORIGIN - only pages on the same origin as the main site can embed it in an iframe.
Now this approach allows for the user to potentially create malicious scripts, which then get passed to my main website to potentially cause issues, however, I don't see what they can do via user generated JS code that they can't do via dev tools anyway?
So as long as I prevent potential third-party actors from potentially passing in malicous code via the iframe, is way 2 sufficient for that?
