iframe Sandboxing and Permissions Policy
Restrict embedded content with sandbox and Permissions-Policy.
iframe Sandboxing and Permissions Policy is a free HTML Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Sandbox iframes?
Untrusted content in an iframe (third-party widgets, user-submitted HTML previews, embedded games) should not have full browser capabilities. The sandbox attribute restricts what the iframe can do, reducing the damage if it turns out to be malicious.
Empty sandbox = Maximum Restriction
<iframe sandbox src="..."> with no value applies every restriction: no scripts, no forms, no popups, no top-level navigation, no plugins, treated as a unique origin. Use this as the starting point and add only what the embedded content needs.
Adding Capabilities
Sandbox tokens re-enable specific capabilities: sandbox="allow-scripts allow-same-origin" permits script execution and same-origin access. Each token relaxes one restriction; combine the minimum set the iframe actually needs.
<iframe sandbox="allow-scripts allow-same-origin" src="https://embed.example.com/widget"></iframe>Common Tokens
allow-scripts enables JS. allow-forms enables form submission. allow-popups enables window.open. allow-same-origin avoids treating the iframe as a unique origin (needed for localStorage). allow-top-navigation permits navigating the parent window.
The Dangerous Combination
Combining allow-scripts with allow-same-origin for an iframe that you also host gives the iframe full access to your origin — including the ability to remove its own sandbox. Only combine for trusted content; for untrusted, omit allow-same-origin.
Permissions Policy
Permissions Policy (formerly Feature Policy) controls which browser APIs (camera, microphone, geolocation, fullscreen, autoplay) the page and its iframes can use. Set on the parent: Permissions-Policy: geolocation=() blocks geolocation everywhere.
Per-iframe Permission Grant
The allow attribute on an iframe overrides the parent's policy for that iframe: <iframe allow="camera; microphone"> permits those APIs in the iframe even if the parent's default policy denies them.
<iframe
src="https://video-call.example.com"
allow="camera; microphone; fullscreen"
sandbox="allow-scripts allow-same-origin">
</iframe>Listing Permissions
Specifications are an evolving list — camera, microphone, geolocation, accelerometer, gyroscope, magnetometer, payment, usb, midi, fullscreen, autoplay, picture-in-picture and dozens more. Audit the list and explicitly deny anything your page does not need.
Reporting Policy Violations
Permissions-Policy reports violations to a configured endpoint, like CSP's report-uri. Use this during a migration: enable a strict policy, watch what breaks, then relax in a measured way for legitimate features.
Origin Isolation
For sensitive pages, set Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp. This isolates the page from cross-origin windows, protecting against Spectre-style timing attacks and enabling SharedArrayBuffer.
Defense in Depth
Sandbox + Permissions Policy + CSP + COOP/COEP layer together. Each protects against a different class of attack. Embedding third-party content is risky enough that no single mitigation is sufficient — combine them so a bypass of one is caught by another.
Testing
Use the Network panel and the Issues panel in Chrome DevTools to surface sandbox and permissions violations. Many violations are silent (the API just returns undefined or rejects the promise); explicit reporting endpoints help discover them in production.
Knowledge Check
Why is the combination sandbox="allow-scripts allow-same-origin" potentially dangerous for an iframe hosted on your own origin?
Summary
Sandbox iframes by default and add only the tokens the content needs. Avoid allow-scripts+allow-same-origin for untrusted content. Use Permissions Policy to deny powerful APIs site-wide and the iframe allow attribute to grant exceptions. Combine with CSP and COOP/COEP for defense in depth.
Frequently asked questions
Is the “iframe Sandboxing and Permissions Policy” lesson free?
Yes — the full text of “iframe Sandboxing and Permissions Policy” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.
What will I learn in “iframe Sandboxing and Permissions Policy”?
Restrict embedded content with sandbox and Permissions-Policy. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start HTML Academy?
No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “iframe Sandboxing and Permissions Policy” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this HTML Academy lesson?
Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Content Security Policy meta http-equiv
- XSS via innerHTML and How to Prevent It
- iframe Sandboxing and Permissions Policy
- HTTPS and Subresource Integrity