Most XSS learning resources have a tradeoff. They either explain payloads theoretically without letting you see execution, or they require a deliberately vulnerable backend. I wanted a safer middle ground: a fully static frontend app where payloads can run, but only inside an isolated preview.

The core of the project is a sandboxed iframe:

< iframe title = "Sandboxed XSS payload preview" sandbox = "allow-scripts" srcDoc = { generatedHtml } />

Enter fullscreen mode

Exit fullscreen mode

The important detail is what is not allowed. The iframe has allow-scripts , so payloads can execute inside the preview, but it does not have allow-same-origin . That means the iframe gets a unique opaque origin. The payload can demonstrate behavior, but it cannot access the parent page's origin, storage, or DOM.

I also override risky browser APIs inside the frame:

window . alert = ( message ) => { parent . postMessage ({ type : ' xss-alert ' , message }, ' * ' ) }

window . open = () => null window .…