HTML sandbox Attribute

Introduction

The sandbox attribute on <iframe> creates a restricted environment for embedded content. When present (even empty: sandbox or sandbox=""), the browser applies maximum lockdown — blocking scripts, form submission, popups, and top-level navigation. You then add allow-* tokens to lift specific restrictions only where needed. Use it for ads, user-generated embeds, and third-party widgets. Manage tokens with iframe.sandbox (a DOMTokenList in JavaScript). Pair with referrerpolicy and Content Security Policy for defense in depth.

What You’ll Learn

Purpose of sandbox Attribute

Embedding another page in an <iframe> runs foreign HTML and JavaScript in your site’s context. Without protection, embedded content could redirect the parent page, steal cookies, open popups, or submit forms. The sandbox attribute mitigates these risks by defaulting to a locked-down mode.

Think of it as a deny-by-default security model: add only the allow-* permissions the embed truly needs — not a blanket allow-everything approach.

📝 Syntax

Add sandbox to an <iframe> — empty for max restrictions, or with space-separated allow-* tokens:

<!-- Maximum restrictions (recommended starting point) -->
<iframe src="https://widgets.example.com" sandbox></iframe>

<!-- Allow scripts only (still blocks forms, popups, etc.) -->
<iframe src="https://widgets.example.com" sandbox="allow-scripts"></iframe>

<!-- Inline demo with srcdoc -->
<iframe sandbox="allow-scripts" srcdoc="<p>Hello</p>"></iframe>

Syntax Rules

• Valid on <iframe> — the standard use case.
• Empty sandbox or sandbox="" enables all default restrictions.
• Tokens are space-separated allow-* keywords that remove specific restrictions.
• Invalid or unknown tokens are ignored.
• JavaScript: iframe.sandbox is a DOMTokenList — use .add(), .remove(), .toggle().
• Complements (does not replace) CSP, HTTPS, and careful src selection.
• Use srcdoc for small trusted inline demos; use src for external pages.

💎 Values

Common allow-* sandbox tokens (each lifts one restriction):

• allow-scripts — Permits JavaScript execution inside the iframe.
• allow-same-origin — Treats content as same origin (enables storage access; use cautiously).
• allow-forms — Allows form submission from the iframe.
• allow-modals — Allows alert(), confirm(), and prompt().
• allow-popups — Allows opening new browsing contexts (popups).
• allow-popups-to-escape-sandbox — Popups run without sandbox restrictions.
• allow-top-navigation-by-user-activation — Top-level navigation only after user gesture.
• allow-downloads — Allows file downloads from the iframe.

<!-- Widget needs scripts + forms, nothing else -->
<iframe
  src="https://partner.example/widget"
  sandbox="allow-scripts allow-forms"
  title="Partner widget"
></iframe>

How it Works

Without any token, the iframe cannot run scripts or submit forms. Each allow-* value you add grants one capability back to the embedded document.

Applicable Elements

No sandbox vs sandbox vs tokens

*Adding allow-same-origin removes unique-origin treatment.

Examples Gallery

Locked-down iframe, selective allow-* tokens, and dynamic iframe.sandbox updates in JavaScript.

<iframe
  src="https://untrusted.example/embed"
  sandbox
  title="Untrusted embed"
  width="300"
  height="200"
></iframe>

<iframe
  sandbox="allow-scripts"
  title="Scripted widget"
  srcdoc="<p id='msg'>Loading…</p><script>document.getElementById('msg').textContent='Script ran!';</script>"
  width="280"
  height="80"
></iframe>

<iframe id="dynamicIframe" sandbox src="about:blank"></iframe>
<button id="enableBtn">Allow scripts</button>

<script>
  document.getElementById("enableBtn").addEventListener("click", () => {
    document.getElementById("dynamicIframe").sandbox.add("allow-scripts");
  });
</script>

♿ Accessibility

• Always set title — Give every sandboxed <iframe> a descriptive title for screen reader users.
• Sandbox does not block focus — Users can still tab into the iframe; ensure embedded UI is accessible.
• Modals need allow-modals — Without it, alert() inside the iframe is blocked (often desirable).
• Inform users about embeds — Label third-party content clearly in surrounding page text.
• Security aids everyone — Preventing malicious redirects protects all users, including assistive tech users.

💡 Best Practices