srcdoc
Warning: This property parses its input as HTML, writing the result into the frame's DOM. APIs like this are known as injection sinks, and are potentially a vector for cross-site scripting (XSS) attacks, if the input originally came from an attacker.
You can mitigate this risk by always assigning TrustedHTML objects instead of strings and enforcing trusted types. See Security considerations for more information.
The srcdoc property of the HTMLIFrameElement interface gets or sets the inline HTML markup of the frame's document.
This reflects the srcdoc attribute of the <iframe>.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 20 | 79 | 25 | 6 | 25 | 6 | |
| HTML attribute | ||||||
srcdoc | 20 | 79 | 25 | 6 | 25 | 6 |
Syntax
<iframe srcdoc="<h1>こんにちは</h1><p>インラインHTMLコンテンツ</p>"
sandbox
width="400" height="200">
</iframe>Live demo
Src and srcdoc. Comparison
Src is partURL, srcdoc is inranHTML.srcdoc that priority.
Use cases
-
Live previews
Render generated or editable markup in an isolated iframe without creating extra route files.
-
Inline embedded documents
Generate small document views or previews dynamically inside a constrained frame.
Cautions
- Inline document strings can become hard to maintain if they grow large or mix too much logic and markup.
- Untrusted HTML should still be sanitized and paired with appropriate sandboxing before being injected into srcdoc.
Accessibility
- Like any iframe, srcdoc content should have a meaningful title and predictable focus entry points.