The safety attributes, read back
The sandboxed frame gets an opaque origin, so even the page that made it can't read inside: the same-origin policy at work.
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
title: Reader poll
sandbox tokens: [ 'allow-scripts', 'allow-popups' ]
allows forms? false
allow: fullscreen; camera 'none'
referrerPolicy: no-referrer | loading: lazy
Can this page read the frame's document? false