HTML iframe sandbox: isolate an embedded preview and name its purpose

Use it for a real task

A receipt preview is displayed inside a bounded frame with a title and a sandbox allowing scripts but not same-origin treatment. The preview can run its own script, yet it does not gain the parent page's origin merely because its URL path is local.

<iframe src="/previews/receipt-R-47.html"
        title="Receipt R-47 preview"
        sandbox="allow-scripts"
        loading="lazy" width="640" height="420"></iframe>

What the markup guarantees

The preview route must exist and control what it serves. Do not casually combine allow-scripts with allow-same-origin for content on the embedding origin; that pairing can undercut the intended isolation. A sandbox is one defense, not a substitute for escaping received HTML and setting server policies.

Cost and limits

A frame loads another document and its dependencies. Reserve its dimensions and defer below-the-fold content when appropriate; a large embedded app can dominate page cost.

Common Mistakes

• Give each meaningful iframe a title.
• Review every sandbox token as an added capability.
• Do not assume a same-origin path remains same-origin under this sandbox policy.

Connected lessons

• HTML character references: escape data before inserting it into markup
• HTML document skeleton: declare language, encoding, and a real title
• HTML video tracks: expose controls and a caption file

Related: HTML video tracks: expose controls and a caption file.

Related: HTML iframe srcdoc: isolate a small preview deliberately.

Related: HTML iframe allow: grant an embedded page only needed capabilities.

Related: HTML lazy iframe: delay an optional embedded view.

Continue with HTML iframe referrerpolicy: limit parent-page details sent to an embed.