What does the srcdoc attribute on an HTML <iframe> do, and how does it interact with the src attribute?

## What the attribute does `<iframe src>` names a URL for the browser to fetch and display in the frame. `<iframe srcdoc>` skips the fetch entirely: the attribute's *value* is the HTML source of the framed document. ```html <iframe srcdoc="<!doctype html><p>Rendered inside the frame.</p>" title="Inline preview"></iframe> ``` The browser parses that string as a complete document — you may include a doctype, `<style>`, `<script>`, whatever you like — and the frame gets a real, separate document with its own DOM, its own stylesheets and its own layout viewport. That isolation of *styles and layout* is the usual reason people reach for it: an email preview or a user-authored snippet renders without your page's CSS leaking in. ## Precedence and fallback When both attributes appear, `srcdoc` wins: ```html <iframe srcdoc="<p>Inline content</p>" src="/fallback.html" title="Preview"></iframe> ``` The `src` is a fallback path for a user agent that does not implement `srcdoc`. In current browsers you will always see the inline content. It is a harmless belt-and-braces pattern, not a way to show both. ## Escaping — the practical trap The value is an HTML attribute, so it plays by attribute rules. Inside a double-quoted attribute you must escape `"` as `&quot;` and `&` as `&amp;`; if you quote the attribute with single quotes, `'` becomes `&#39;` instead. Any markup with attributes of its own quickly turns unreadable: ```html <iframe srcdoc="&lt;a href=&quot;https://example.com&quot;&gt;Link&lt;/a&gt;" title="Escaped example"></iframe> ``` This is why `srcdoc` is usually *generated* rather than hand-written, and why a build step or template that forgets to escape produces a frame whose markup breaks out of the attribute and lands in the parent document — a markup bug with real consequences when the content came from a user. ## The origin, and why it matters A `srcdoc` document has no URL of its own to derive an origin from; it reports `about:srcdoc` and **inherits the origin of the embedding page**. That single fact drives all the security advice around the attribute: - Script inside `srcdoc` is same-origin with your page. It can read and write `window.parent.document`, your cookies, and your `localStorage`. - So a frame is *not* a security boundary here. Putting untrusted HTML in `srcdoc` is equivalent to injecting it into your own page — the visual isolation misleads people into thinking otherwise. - The fix is the `sandbox` attribute, which replaces the inherited origin with a unique opaque one: ```html <iframe sandbox srcdoc="&lt;p&gt;untrusted&lt;/p&gt;" title="Untrusted preview"></iframe> ``` With a bare `sandbox`, scripts do not run and the document has no access to anything of yours. If the preview genuinely needs to run its own script, `sandbox="allow-scripts"` — deliberately without `allow-same-origin` — keeps the opaque origin while letting the code execute. ## When to choose which Reach for `src` when the content is a real page that a server owns: a third-party widget, a video embed, a document viewer. Reach for `srcdoc` when you already hold the markup in memory and want it rendered in an isolated styling context without a round trip — email previews, template previews, code-sandbox output panes, rendering a chunk of stored HTML that must not inherit your CSS. Relative URLs inside `srcdoc` content resolve against the embedding document's base URL, which is convenient when the inline markup references your own assets and surprising if you expected the frame to have its own base. ## Details worth stating in an interview Give `srcdoc` frames a `title` like any other frame — assistive technology announces frames by that string. And keep the size honest: the whole document travels in an attribute inside your HTML response, so a large `srcdoc` inflates the parent page's bytes and cannot be cached separately the way a `src` document can. That tradeoff — no extra request, but no separate caching either — is the one-line summary of when the attribute earns its place.