Sandbox in action: scripts allowed vs blocked
Both frames contain the same kind of script. Only the one with allow-scripts can run it.
An <iframe> shows another web page inside yours, such as a map or a video; title, sandbox, allow and referrerpolicy make it accessible and safe, and server headers stop other sites from framing yours.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Embed https://www.openstreetmap.org/export/embed.html?bbox=0,51.4,0.1,51.5 as an accessible, lazy, borderless 600×400 map.
Embed an untrusted widget from https://widget.example.com so that it can run scripts but cannot submit forms, open popups or navigate your page, and sends no referrer.
Write the response headers that stop every site, including yours, from framing your pages.
Explain it without notes
What is the same-origin policy and how does it affect iframes?
What does an empty sandbox attribute block, and how do you add capabilities back?
What is clickjacking and how does a site defend against it?
What do allow and referrerpolicy control on an iframe?
Preview
Console
Nothing logged yet.Expected console output
Message: Hello from frame A
Done waiting. Frame B never spoke.