-
Notifications
You must be signed in to change notification settings - Fork 207
Description
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.write
s 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.