What is the difference between src and srcdoc in iframe?

src points to an external URL the browser fetches over the network. srcdoc holds inline HTML the page already contains. When both are set, srcdoc takes priority and src acts as a fallback for browsers that do not support srcdoc.

Can I use an iframe inside iframe srcdoc?

Yes. The srcdoc value is a full HTML document, so it can contain nested iframe elements with their own src or srcdoc. The nested frame still inherits the sandbox flags of the outer iframe.

Is an iframe srcdoc document same-origin with the parent?

Yes by default. Without a sandbox attribute, the srcdoc document is same-origin with the parent page and can read the parent DOM, cookies, and storage. Add sandbox without allow-same-origin to make the document opaque-origin.

What URL does an iframe srcdoc document have?

The browser sets the srcdoc document's URL to about:srcdoc. Relative links and resources inside the srcdoc HTML resolve against about:srcdoc, not the parent page URL. Use absolute URLs or a base tag if you need relative paths to work.

Does iframe srcdoc execute scripts?

Yes. By default, scripts inside srcdoc run with full privileges in the same origin as the parent. Add sandbox="allow-scripts" without allow-same-origin to keep scripts running while blocking same-origin DOM access from the frame.

Does iframe srcdoc inherit charset from the parent?

Yes. The srcdoc document inherits the parent document's character encoding. To override, add a meta charset tag inside the srcdoc HTML, for example at the top of the embedded document.

How do you set the height of an iframe srcdoc?

Use the iframe element's height attribute or CSS height value. The srcdoc document does not auto-size to its content. To resize after rendering, listen for load on the iframe and set height from contentDocument.documentElement.scrollHeight.

Can iframe srcdoc load external scripts?

Yes, if the page's Content Security Policy allows it. The srcdoc document inherits the parent page's CSP, so a strict script-src directive on the parent blocks script-src URLs inside srcdoc too.

Is the iframe element obsolete?

No. The iframe element is part of the HTML Living Standard and every modern browser supports it. Sandboxed iframes with srcdoc are the recommended way to embed untrusted HTML, including code playgrounds and email previews.

Home
/
Learning Hub
/
iframe srcdoc: Browser Support, Examples, Limitations

Testing

iframe srcdoc: Browser Support, Examples, Limitations

Q: Does Internet Explorer support iframe srcdoc?

No. Internet Explorer 11 and earlier ignore srcdoc and fall back to the src attribute. Microsoft has retired Internet Explorer, so use Edge 79 or later on Windows. The jugglinmike srcdoc-polyfill is the common shim for legacy IE.

iframe srcdoc works in Chrome 20+, Edge 79+, Firefox 25+, Safari 6+, Opera 15+, and Samsung Internet 4+. Learn iframe srcdoc browser support and limits.

Prince Dewani

May 6, 2026

On This Page

About srcdoc
Browser Support
srcdoc vs src
Use srcdoc
Limitations
Citations

The iframe srcdoc attribute is an HTML attribute that the WHATWG defines on the iframe element to embed inline HTML inside a frame instead of loading an external URL. Chrome 20+, Edge 79+, Firefox 25+, Safari 6+, Opera 15+, and Samsung Internet 4+ support it, while Internet Explorer never added support.

This guide covers what iframe srcdoc is, the browsers that support it, how it differs from the src attribute, how to use it with code, and the known limitations.

What is iframe srcdoc?

srcdoc is an HTML attribute on the iframe element. It holds an HTML document as a string, which the browser parses and renders inside the frame using about:srcdoc as the document URL. The WHATWG HTML Living Standard defines it, and srcdoc takes priority over the src attribute when both appear on the same iframe.

Which browsers does iframe srcdoc support?

iframe srcdoc works in every modern desktop and mobile browser, with global support over 96 percent. Chrome shipped it first, Safari added it in version 6, Firefox in 25, and Internet Explorer is the only major browser that never supported it.

Loading browser compatibility data...

iframe srcdoc compatibility in Chrome

Chrome supports the iframe srcdoc attribute from Chrome 20 on Windows, macOS, Linux, and ChromeOS. Chrome for Android supports it from Chrome 25, the first stable Chrome for Android release that matched desktop parity. Chrome 1 to 19 ignored the attribute and fell back to the src URL or rendered an empty frame.

iframe srcdoc compatibility in Edge

Microsoft Edge supports srcdoc from Edge 79, the first Chromium-based Edge build, on Windows, macOS, Linux, Android, and iOS. Legacy EdgeHTML Edge 12 to 18 did not support srcdoc at all and silently fell back to the src URL, which broke pages that relied on inline HTML embedding.

iframe srcdoc compatibility in Firefox

Firefox supports the iframe srcdoc attribute from Firefox 25 on Windows, macOS, Linux, and Android. Firefox for Android added support in the same release. Firefox 1 to 24 did not parse the attribute, so any iframe that depended on srcdoc rendered the src fallback or stayed empty.

iframe srcdoc compatibility in Safari

Safari supports srcdoc from Safari 6 on macOS and from iOS Safari 6 on iPhone and iPad. Apple shipped both updates together in OS X Mountain Lion and iOS 6. Safari 3 to 5 on macOS and iOS Safari 3 to 5 did not support the attribute and rendered the src URL or an empty frame instead.

iframe srcdoc compatibility in Opera

Opera supports srcdoc from Opera 15, the first Chromium-based desktop Opera. Opera 12 and earlier, which used the Presto engine, did not support srcdoc. Opera Mobile supports it from Opera Mobile 14 on Android, and the standalone Opera Mini proxy browser does not support srcdoc because it never executes attribute logic on the device.

iframe srcdoc compatibility in Samsung Internet

Samsung Internet supports the iframe srcdoc attribute from Samsung Internet 4 on Galaxy phones and tablets. It is built on Chromium, so the parsing rules, sandbox behavior, and same-origin model match Chrome for Android. Earlier Samsung Internet builds shipped a Chromium core that did not surface srcdoc.

iframe srcdoc compatibility in Android Browser

The legacy stock Android Browser supports srcdoc from Android 4.4 (KitKat) when Google replaced its WebKit fork with Chromium WebView. Older WebView-based Android Browser builds on Android 4.3 and earlier ignored srcdoc. On modern Android phones, users run Chrome for Android, Firefox for Android, or Samsung Internet, all of which support it.

iframe srcdoc compatibility in Internet Explorer

Internet Explorer never added native support for the iframe srcdoc attribute in any version, including IE 11. Microsoft has retired Internet Explorer, so use Edge 79 or later if you need a Chromium browser on Windows. For pages that still target IE, the jugglinmike srcdoc-polyfill shim reads the attribute and rewrites the iframe to use a data URL instead.

Note: iframe srcdoc behavior changes across older Safari, Edge legacy, and Internet Explorer. Test it on real browsers and OS with TestMu AI. Try TestMu AI free!

What is the difference between iframe srcdoc and src?

The src attribute fetches an external URL into the frame, while srcdoc renders an HTML string the page already contains. Both can appear on the same iframe, in which case srcdoc takes priority and src acts as a fallback for browsers that do not support srcdoc.

Dimension	iframe srcdoc	iframe src
Source of content	HTML string written inline in the attribute	URL the browser fetches over the network
Network request	None; the HTML is parsed in place	One HTTP request to the target URL
Document URL	about:srcdoc	The fetched URL
Default origin	Same origin as the parent page (unless sandbox is set)	Origin of the fetched URL
Fallback when both are set	Used in browsers that support srcdoc	Used in browsers that do not, including Internet Explorer
Best fit	Inline previews, sanitized user HTML, code playgrounds, email rendering	Embedded videos, third-party widgets, separate web apps

How do you use the iframe srcdoc attribute?

Set srcdoc on an iframe element to a string that contains valid HTML. The browser parses the string as a complete document and renders it inside the frame, with the document URL set to about:srcdoc. You can pair srcdoc with the sandbox attribute to lock down what the embedded code can do, which is the standard pattern for code playgrounds and untrusted HTML previews.

The DOCTYPE, html, head, and body tags are optional inside the srcdoc value, so a one-line snippet is enough for most previews. Quotes inside the value have to be escaped with HTML entities or alternated, and ampersands must be escaped twice when written directly in the markup. Setting the value with element.srcdoc in JavaScript avoids most escaping pain.

Paste this snippet into the browser DevTools console to confirm srcdoc support and render a sandboxed inline document:

// Run in the DevTools console of any browser to test iframe srcdoc support.
const frame = document.createElement("iframe");
const supportsSrcdoc = "srcdoc" in frame;
console.log("iframe srcdoc supported:", supportsSrcdoc);

if (supportsSrcdoc) {
  frame.srcdoc = '<!doctype html><meta charset="utf-8"><p>Hello from srcdoc</p>';
  frame.sandbox = "allow-scripts";
  frame.width = 400;
  frame.height = 120;
  document.body.appendChild(frame);
}

If supportsSrcdoc is false, the browser is Internet Explorer or a very old build. Fall back to a real URL in src or load the jugglinmike srcdoc-polyfill, which converts the attribute to a data URL automatically.

What are the limitations of the iframe srcdoc attribute?

iframe srcdoc has wide modern browser coverage, but a few real edge cases still bite in production. The biggest hits are same-origin behavior, attribute escaping, missing Internet Explorer support, and quirks around relative URLs and Content Security Policy.

Same-origin with the parent by default: Without the sandbox attribute, the srcdoc document is same-origin with the parent page and has full access to its DOM, cookies, and storage. Always pair srcdoc with sandbox when you embed user-generated HTML to avoid cross-site scripting.
Attribute escaping is fiddly: Quotes inside the srcdoc value must be escaped, and ampersands must be doubly escaped so they survive both attribute parsing and the inner HTML parse. Setting the property in JavaScript with element.srcdoc avoids the entity dance entirely.
No Internet Explorer support: IE 11 and earlier ignore srcdoc and fall back to the src URL. Pages that still target IE need either an absolute src fallback or the jugglinmike srcdoc-polyfill, which rewrites the iframe at runtime.
Relative URLs use about:srcdoc as base: Relative links and relative resource URLs inside the srcdoc document resolve against about:srcdoc, not the parent page URL. Use absolute URLs or set a base tag inside the srcdoc HTML to make relative paths resolve correctly.
Inherits the parent's Content Security Policy: A srcdoc document inherits the parent page's CSP, so a strict script-src or frame-src on the parent can block scripts and resources inside the srcdoc frame even when sandbox="allow-scripts" is set.
Auto-sizing is manual: The iframe element does not resize to fit the srcdoc document. Set height through CSS or read contentDocument.documentElement.scrollHeight on the load event to size the frame to its content.
Document.cookie shows the parent's cookies: Because the srcdoc document is same-origin by default, document.cookie inside it reads and writes the parent page's cookie jar. A sandbox attribute without allow-same-origin removes this access entirely.

In my experience, the most surprising failure happens with relative asset URLs. A srcdoc document that links to /assets/style.css resolves the path against about:srcdoc, which has no host, so the request fails with a network error. Switching to absolute URLs or injecting a base href tag inside the srcdoc HTML fixes it on every browser that supports the attribute.

Citations

All iframe srcdoc version numbers and platform notes in this guide come from these primary sources:

MDN Web Docs - HTMLIFrameElement.srcdoc property: developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/srcdoc
MDN Web Docs - The iframe element: developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
WHATWG HTML Living Standard - The iframe element: html.spec.whatwg.org/multipage/iframe-embed-object.html
WHATWG HTML Living Standard - Sandboxing: html.spec.whatwg.org/multipage/origin.html
Wikipedia - HTML element (iframe): en.wikipedia.org/wiki/HTML_element
Chrome Platform Status - HTMLIFrameElement.srcdoc: chromestatus.com/feature/5715898031046656
WebKit blog - Safari 6 release notes: webkit.org/blog/2125/finally-safari-6
Mozilla Hacks - Firefox 25 release announcement: hacks.mozilla.org/2013/10/firefox-development-highlights-storage-inspector-srcdoc-attribute-of-iframe-element
Microsoft Learn - Microsoft Edge for Business: learn.microsoft.com/en-us/deployedge/microsoft-edge-relnote-stable-channel
GitHub - jugglinmike srcdoc-polyfill: github.com/jugglinmike/srcdoc-polyfill
Apple Developer - Safari 6 release notes: developer.apple.com/library/archive/releasenotes/General/WhatsNewInSafari/Articles/Safari_6_0

Author

Prince Dewani

Blogs: 8

Prince Dewani is a Community Contributor at TestMu AI, where he manages content strategies around software testing, QA, and test automation. He is certified in Selenium, Cypress, Playwright, Appium, Automation Testing, and KaneAI. Prince has also presented academic research at the international conference PBCON-01. He further specializes in on-page SEO, bridging marketing with core testing technologies. On LinkedIn, he is followed by 4,300+ QA engineers, developers, DevOps experts, tech leaders, and AI-focused practitioners in the global testing community.