HTML srcdoc Attribute

The HTML srcdoc attribute specifies HTML content that is displayed directly inside an <iframe>. Instead of loading a separate document from a URL, the browser creates the iframe document from the HTML provided as the attribute's value.

Elements That Use the srcdoc Attribute

The srcdoc attribute is used with the <iframe> element.

Element	Description
`<iframe>`	Embeds an HTML document provided directly by the `srcdoc` attribute.

srcdoc Attribute Value

The value of the srcdoc attribute is a string containing HTML markup that becomes the content of the iframe document.

<iframe srcdoc="<h1>Hello, World!</h1>"
        title="HTML example"></iframe>

The HTML inside the attribute is parsed as a separate document and displayed inside the <iframe>.

How srcdoc Works

When an <iframe> has a srcdoc attribute, the browser uses the attribute's HTML as the document displayed by the frame.

<iframe
  srcdoc="<h1>HTML Example</h1><p>This content is embedded directly in the iframe.</p>"
  title="Embedded HTML example">
</iframe>

The embedded markup can contain the normal structure and content of an HTML document. A complete <html>, <head>, and <body> structure can be supplied, although the browser can also create the required document structure when only a fragment of HTML is provided.

srcdoc and src

An <iframe> can have both srcdoc and src attributes. When srcdoc is supported and specified, its content takes priority over the document identified by src.

<iframe
  src="fallback.html"
  srcdoc="<p>Content from srcdoc.</p>"
  title="Iframe example">
</iframe>

In current browsers that support srcdoc, the embedded srcdoc content is displayed instead of fallback.html.

Escaping HTML

Because the HTML document is written inside an HTML attribute, characters that would interfere with the surrounding attribute markup must be escaped correctly.

<iframe
  srcdoc="<p>Learn &amp; practice HTML.</p>"
  title="Escaped HTML example">
</iframe>

In particular, quotation marks used inside a quoted srcdoc value must be represented safely so they do not prematurely close the outer attribute. Ampersands may require an additional level of escaping because the attribute value is parsed before the embedded document is parsed.

<iframe
  srcdoc="<p class=&quot;example&quot;>Hello</p>"
  title="Quoted attribute example">
</iframe>

Security Considerations

The srcdoc attribute can contain active HTML, including scripts, so untrusted content should not be inserted into it without appropriate protection. Unsafely embedding user-supplied markup can create cross-site scripting and other security risks.

The sandbox attribute can restrict what an iframe document is allowed to do.

<iframe
  sandbox
  srcdoc="<p>Sandboxed iframe content.</p>"
  title="Sandboxed HTML example">
</iframe>

Be careful when combining sandbox permissions. In particular, allowing both scripts and same-origin behavior for same-origin iframe content can greatly reduce the protection provided by sandboxing.

Common Mistakes

Do not place unescaped quotation marks inside the srcdoc value when they would close the surrounding HTML attribute. Encode them appropriately or use compatible quoting.

Do not assume that src will be displayed when a supported browser encounters both srcdoc and src. The srcdoc document takes priority.

Do not insert untrusted HTML directly into srcdoc without appropriate sanitization and security controls. The embedded document can contain active content.

Do not confuse srcdoc with src. The src attribute identifies a document by URL, while srcdoc supplies the document's HTML directly.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The srcdoc attribute on the <iframe> element is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the srcdoc Attribute

The example uses srcdoc to display a heading and paragraph directly inside an <iframe> without loading a separate HTML file.

Play in Editor

Summary

The HTML srcdoc attribute supplies HTML content directly to an <iframe>. When both srcdoc and src are specified, supported browsers display the srcdoc content. Because the attribute can contain active HTML, embedded content must be handled carefully, especially when any part of it comes from an untrusted source.