iframe Sandbox
Definition
Adding sandbox to an iframe tag puts the embedded document into a restricted context: it cannot run scripts, submit forms, open pop-ups, trigger downloads, or treat itself as belonging to its own origin. Each capability is restored by listing a token in the attribute value, such as allow-scripts, allow-forms, allow-popups or allow-same-origin. A bare sandbox with no tokens is the strictest setting, and it is the right default for showing HTML you did not write. The tokens are additive, space-separated and case-sensitive, and a token the browser does not recognise is ignored rather than treated as an error. Every current browser has supported the attribute for well over a decade. Most AI chat tools display the code they generate through exactly this mechanism.
Why It Matters
A sandbox is the difference between showing someone's HTML and running it. Put an untrusted page in an unsandboxed frame on your own domain and its script can read your cookies, call your API with the visitor's session, or repaint the surrounding page as a convincing login form. With a bare sandbox attribute the same file renders as inert markup. This is not a theoretical risk: cross-site scripting through embedded third-party content is one of the ordinary ways a legitimate site starts serving an attack. The fix costs one attribute and about four seconds.
How It Works
The browser parses the attribute value into a set of allowed capabilities and applies the rest as denials before the framed document loads. Without allow-scripts, inline and external JavaScript never execute, and without allow-forms a submit button does nothing at all. Without allow-same-origin the frame is given a unique opaque origin, so it cannot read cookies, localStorage or IndexedDB belonging to the site that framed it, and the same-origin policy stops it touching the parent document. The well-known trap is combining allow-scripts and allow-same-origin on content you do not control: the framed page can then reach into the parent and remove its own sandbox attribute, which largely defeats the point. Serve such content from a separate hostname if you need both, so the origin they end up sharing is not one that matters.
Real-World Example
A designer publishes a one-page interactive report at quarterly-review.99helpers.site and the intranet team wants it embedded in the staff homepage. They frame it with sandbox set to allow-scripts allow-popups, so the charts animate and an outbound link still opens, but the frame cannot read anything the intranet has stored. When a contact form is added to the report a month later, the team adds allow-forms rather than dropping the attribute. The page keeps working and the boundary stays where it was.
Common Mistakes
- ✕Setting allow-scripts and allow-same-origin together on content you do not control — the framed page can then reach out and strip its own restrictions
- ✕Assuming sandbox blocks network traffic — it does not; images, fonts and trackers still load unless a Content Security Policy stops them
- ✕Removing the attribute because one feature broke, instead of adding the single token that was missing
Related Terms
iframe Embed
An iframe embed places another web page or file inside a rectangle on your page, as a separate document with its own address. It is the usual way to show a hosted PDF, map or demo in place.
Same-Origin Policy
The browser rule that keeps code loaded from one origin from reading data belonging to another. It is the foundation the rest of web security is built on.
Content Security Policy
A response header that tells the browser which sources a page is allowed to load scripts, styles, images and frames from. Anything outside the policy is blocked before it runs.
Artifact Sandbox
The restricted environment a chat tool runs your generated code in while you are still in the conversation. It renders a live preview, but with tight limits on network access, storage and anything outside its own frame.
Static Hosting
Static hosting is a service that stores a folder of finished web files and serves them over HTTP, without running any application code of yours. You upload the folder; the host answers requests for the files in it.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →