Skip to content
iframecheck

srcdoc

The srcdoc attribute holds the full HTML of the page to show in an iframe. The browser shows that HTML in place of a URL, and the frame document gets the URL about:srcdoc.

HTML attribute

Updated

On this page

How it works

The value of srcdoc is a full HTML document. You can leave out the doctype, <html>, and <body>. The browser builds a document from it with the URL about:srcdoc. Relative links in it use the URL of the parent page as their base.

If an iframe has both srcdoc and src, the browser uses srcdoc. A browser that does not support srcdoc loads the URL in src.

Security

A srcdoc frame without a sandbox has the same origin as the parent page. Its scripts can read and change the parent page, and the parent can read the frame.

Add sandbox without allow-same-origin to stop this. The frame then gets a unique origin and acts as a page from another origin. Never put HTML from users into srcdoc without a sandbox.

Example

HTML
<iframe
  srcdoc="<p>Hello from the frame</p>"
  sandbox
  title="Preview"
></iframe>

When srcdoc and src are both set, srcdoc wins.

How to use it

Put the HTML in srcdoc. Add sandbox when the HTML comes from users or other sites.

<iframe
  srcdoc="<!doctype html><p>Preview</p>"
  sandbox="allow-scripts"
  title="Preview"
></iframe>

Wrap the value in double quotes. Escape each & as &amp; first, then each " as &quot;.

Learn more

Sources

Know before you embed.

Free, no sign-up, nothing stored. Paste a URL and get a verdict, a live preview, and the fix.

Test a URLBrowse guides