The current implementation of the playground allows users to execute arbitrary code in a given window which can lead to XSS attacks. We can prevent this by executing the preview code inside an iframe, this way XSS attacks are prevented due to browsers same origin policy.
To fix this, with the current implementation, we would have to figure out a way to mount the Preview Component on an iframe. We could either try to incorporate an existing package, like react-frame-component to the Preview component or emulate the package by using portals and updating the Preview component life cycle.
I am happy to make a PR with this change and make the web a little safer while at it 🙂
The current implementation of the playground allows users to execute arbitrary code in a given window which can lead to XSS attacks. We can prevent this by executing the preview code inside an iframe, this way XSS attacks are prevented due to browsers same origin policy.
To fix this, with the current implementation, we would have to figure out a way to mount the
PreviewComponent on an iframe. We could either try to incorporate an existing package, like react-frame-component to thePreviewcomponent or emulate the package by using portals and updating thePreviewcomponent life cycle.I am happy to make a PR with this change and make the web a little safer while at it 🙂