iframe sandbox attribute
The sandbox attribute on the iframe element:
- its presence implies security rules to ensure safe embedding of content (plugins, forms, Pointer lock API, scripts are disabled, navigation to different browsing-contexts disallowed, same-origin treatment disallowed); the restrictions can be removed by specifying their "allow-" syntax on sandbox attribute, thus:
- allow-same-origin = allowing the gadget to communicate with its originating server
- allow-top-navigation = allows the content to navigate its top-level browsing context
- allow-forms = re-enables forms / allows form submission
- allow-popups = allows popups
- allow-script = allows scripts
- allow-pointer-lock = enables the Pointer Lock API - sandbox is a specific attribute → can be applied ONLY on the next HTML5 element: iframe
Examples
| <iframe | attribute | = | "value(s)" | > | ... | <⁄iframe> | Examples |
|---|---|---|---|---|---|---|---|
| 4. | sandbox | = | "", , allow-forms, allow-pointer-lock, allow popups, allow-same-origin, allow-scripts, allow-top-navigation | < sandbox> ... <⁄> < sandbox="allow-forms"> ... <⁄> |
Video demonstration iframe sandbox attribute
HTML5 iframe sandbox attribute Tutorial
| min | video details |
|---|---|
| 00:00 | video tutorial: sandbox attribute on iframe element |
| 00:06 | sandbox attribute implies security rules to ensure safe embedding of the content |
| 00:10 | security rules: - the plugins, forms, scripts are disabled - navigation to another browsing-context is disallowed and so is the same-origin treatment |
| 00:22 | the framed document, index3.php, contains scripts and a link that targets the top browsing-context by default iframe impose no restriction: - script works - navigation to another browsing context is allowed |
| 00:37 | when sandbox attribute us added on iframe element like this: <iframe sandbox> or <iframe sandbox=""> all the security rules previously mentioned apply to it → scripts are disabled navigation to other browsing-context disallowed...and so forth |
| 00:50 | the security rules can be removed by specifying their corresponding "allow-" form |
| 00:57 | scripts have been enabled, navigation to other browsing-contexts is still disallowed |
| 01:10 | navigation to other browsing-context is now allowed the linked document opens in the top-browsing context |