References

Beginner-friendly references for web development, with live, editable examples.

The HTML srcdoc attribute

Attribute All modern browsers Updated
Quick answer

The HTML srcdoc attribute provides the HTML content of the iframe inline, instead of loading a URL. It is used on the <iframe> element.

Overview

The srcdoc attribute supplies inline HTML for an iframe. It is used on the <iframe> element.

It configures embedded content: what is embedded, what capabilities it is granted, and how it is sandboxed. With third-party content, these attributes are your main security controls.

Syntax

<iframe srcdoc="&lt;p&gt;Hello&lt;/p&gt;"></iframe>

Values

Value
A string of HTML.

Best practices

  • Give every <iframe> a descriptive title.
  • Sandbox untrusted content with sandbox, and avoid combining allow-scripts with allow-same-origin for untrusted sources.
  • Grant only the features a frame needs with the allow attribute.
  • Defer off-screen frames with loading="lazy".

Frequently asked questions

What does the srcdoc attribute do?
Supplies inline HTML for an iframe.
How do I make an iframe secure?
Restrict untrusted content with sandbox, grant minimal features with allow, and never pair allow-scripts with allow-same-origin for untrusted sources.
What happens if both src and srcdoc are set?
srcdoc wins. The src URL is only used as a fallback for browsers that do not support srcdoc.
Which elements use the srcdoc attribute?
It is an element-specific attribute, used on the <iframe> element.
src srclang