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 .…