Detailed explanation
The <iframe> sandbox attribute applies a set of security restrictions to embedded content. Its values are space-separated permission tokens, not mutually exclusive modes: each token removes a particular restriction. With sandbox="", all sandbox restrictions apply; omitting the attribute applies none of these sandbox restrictions, although normal browser security rules still apply. This distinction matters when embedding third-party widgets, previews, or user-generated content because you should grant only the capabilities the embedded page actually needs.
By default, sandboxing blocks scripts, form submission, popups, and several other capabilities, while treating the document as having an opaque origin. allow-scripts permits JavaScript execution but does not restore its normal origin. allow-forms permits form submission; forms may still render without it. allow-same-origin preserves the document's real origin rather than forcing an opaque one, enabling origin-dependent access where other browser policies permit it. Importantly, it does not make a third-party page same-origin with its parent or bypass the same-origin policy. In the example sandbox="allow-scripts allow-forms", scripts and submissions work, but origin isolation and other sandbox restrictions remain.
Other tokens control narrower capabilities. allow-popups permits opening auxiliary browsing contexts, such as through window.open(), subject to browser popup policies; those contexts normally inherit sandbox restrictions. Adding allow-popups-to-escape-sandbox lets newly opened contexts avoid inheriting them. allow-top-navigation permits navigating the top-level page, whereas allow-top-navigation-by-user-activation requires transient user activation, such as a click. allow-downloads permits downloads, allow-modals enables otherwise blocked modal APIs such as alert(), and allow-pointer-lock permits pointer locking. These permissions are independent: enabling scripts alone does not enable popups, downloads, or form submission.
Interviewers usually look for an understanding of selective permission grants and their limits, rather than a memorised token list. The critical security caveat is combining allow-scripts and allow-same-origin for content that shares the parent's origin: it can access its iframe element, remove sandbox, and reload to escape the restrictions. Keep untrusted content on a separate origin and grant minimal tokens. Sandbox also complements, rather than replaces, the iframe allow attribute, Permissions Policy, CSP, and browser privacy restrictions.
Key points to remember
- sandbox="" enables all sandbox restrictions; an absent sandbox attribute enables none of them.
- Tokens combine to lift specific restrictions; they are not alternative sandbox modes.
- allow-scripts permits JavaScript, while allow-forms separately permits form submission.
- allow-same-origin preserves the embedded page's actual origin; it does not bypass cross-origin restrictions.
- Popup inheritance and top-level navigation have separate tokens with different security consequences.
Common mistakes candidates make
- Assuming allow-scripts also enables forms, popups, and other scripted capabilities.
- Claiming allow-same-origin makes any embedded page same-origin with its parent.
- Combining allow-scripts and allow-same-origin for untrusted same-origin content without recognising the sandbox escape risk.
Likely follow-up questions
How do allow-popups and allow-popups-to-escape-sandbox differ?
allow-popups permits opening popups, which normally inherit the iframe's sandbox restrictions. allow-popups-to-escape-sandbox removes that inheritance; use both when popups must open without those restrictions.
Can a sandboxed iframe execute scripts without accessing the parent's DOM?
Yes: sandbox="allow-scripts" permits execution while retaining an opaque origin, preventing direct same-origin access to the parent's DOM. Cross-origin messaging through postMessage remains possible, but receivers must carefully validate messages and their senders.
How is sandbox different from the iframe allow attribute?
sandbox restricts document capabilities such as script execution, form submission, and navigation. The allow attribute configures Permissions Policy for features such as camera or microphone access; it does not override sandbox restrictions or automatically grant user permission.
Interview tip: Start with the empty-sandbox baseline, explain the example token by token, and finish with the same-origin script escape caveat.
