search

vuejs / repl

Vue SFC REPL as a Vue 3 component
https://repl-vuejs.vercel.app
MIT License
879 stars 156 forks source link

sandboxed iframe #199

Open hatemhosny opened 6 months ago

hatemhosny commented 6 months ago

hello, Thanks for the great project. I used it as a base for Vue support on my project (LiveCodes - an open-source client-side code playground for 80+ frameworks/languages). https://livecodes.io/?template=vue

I noticed that the result page of the repl is displayed in a sandboxed iframe. However, the code is sent to the iframe by setting srcdoc. This does not set a different origin for the iframe.

Note, however, that you need to be very careful when dealing with framed content that comes from the same origin as the parent. If a page on https://example.com/ frames another page on the same origin with a sandbox that includes both the allow-same-origin and allow-scripts flags, then the framed page can reach up into the parent, and remove the sandbox attribute entirely. https://web.dev/articles/sandboxed-iframes

For example, if I run this in the repl, it works!

parent.document.body.innerHTML = 'Hacked!'

If we are able to access the repl parent (embedding pages on user websites), then we can read cookies, localStorage and all sorts of bad things. I think this is a major security concern.

I suggest to set the iframe.src to a page on a different origin and then send the html using postMessage. This is an example repo, where I added a simple webpage that can be set as iframe.src and would accept the HTML sent to it from its parent and document.writes it to itself. I published that to npm so that it can be hosted (with versions) on CDNs. It can be used as this URL: https://unpkg.com/@live-codes/playground-sandbox@1.0.0/index.html.

That was just an example. However, if you agree with that, I would be happy to send a PR for this change.

tachibana-shin commented 6 months ago

Instead of using the document.write api which has been removed by Google, we can use service worker to thoroughly handle this.

hatemhosny commented 6 months ago

Thank you @tachibana-shin for drawing my attention to this. I did find what you refer to: https://developer.chrome.com/blog/removing-document-write However, I believe this does not apply to our case:

Specifically Chrome will not execute the Githubissues.

  • Githubissues is a development platform for aggregating issues.