Code can break out of the iframe and modify parent page (XSS)

[tom-sherman]

It is currently possible to access window.parent inside of the render iframes which allows a malicious actor to take advantage of XSS or some accidentally dodgy code to crash the Playroom environment.

Is it within the scope of this project to guard against these sorts of problems?

Example

<div>
	{window.parent.document.body.innerHTML = '<h1>You\'ve been hacked lol</h1>'}
</div>

https://seek-oss.github.io/braid-design-system/playroom/#?code=N4Igxg9gJgpiBcIA8AhCAPAfAHQHbAHcBLXKCAgOgAcBDAJxlwBcKywBXAW0ZYCNoAnhRK4YdABIAVALIAZAAQBeeQHIkACwCMmAJoR22bCoBuMebxiN56mmADWMKPIA2EZ0gD0WzCoC+ntCwQXyA

Potential fixes

Adding sandbox="allow-scripts" to the iframe component fixes this issue at the cost of completely breaking HMR.

I tried evaling the code in a worker but I don't think React components are structured-clonable

Maybe it's possible to use realms-shim with a bit of work?

[mattcompiles]

This should be resolved by #157