<iframe> 中的 srcdoc="..." 和 src="data:text/html,..." 有啥区别？

Posted 2023-03-05

【中文标题】<iframe> 中的 srcdoc="..." 和 src="data:text/html,..." 有啥区别？

【英文标题】：What is the difference between srcdoc="..." and src="data:text/html,..." in an <iframe>?<iframe> 中的 srcdoc="..." 和 src="data:text/html,..." 有什么区别？

【发布时间】：2013-11-13 09:01:53

【问题描述】：

例如，它们之间的区别是什么：

<iframe srcdoc="<p>Some html</p>"></iframe>
<iframe src="data:text/html,<p>Some HTML</p>"></iframe>

Demo

而且，如果它们完全一样，为什么 HTML5 添加srcdoc 属性？

编辑

也许我不够清楚。我不是在比较 src 和 srcdoc，而是 src 使用 text/html 数据 URI 和 srcdoc。

那么，如果功能图是这样的

| src 属性 | srcdoc 属性 -------------------------------------------------- ------------------ 网址 |是 |不使用 src (*) HTML 内容 |是的，使用数据 URI |是的

为什么需要srcdoc？

---

(*) 注意：

似乎srcdoc 可用于通过 URL (Demo) 加载页面，使用带有srcattribute 的子框架：

<iframe srcdoc="<iframe src='http://microsoft.com'></iframe>"></iframe>

【参考方案1】：

其他答案列出了一些表面上的差异，但真的错过了解释为什么浏览器/规范编写者会复制已经存在的东西的关键差异：

<iframe src="data:...untrusted content" sandbox /> 不安全

<iframe srcdoc="...untrusted content" sandbox /> 安全（虽然不起作用）

这种新语法为内容作者提供了一种保护其用户的方法，即使他们可能使用的是旧版浏览器。没有它，内容作者将根本不愿意使用沙盒功能，而且它也不会被使用。

【讨论】：

如果主要好处是不受信任的内容，为什么要指定它包含内联内容 - 大多数不受信任的内容不是来自外部 URL 吗？ IE。为什么不采用 [data] URI 的 sandboxedsrc 属性？ （这也可以避免一些未来的浏览器在不实现沙箱的情况下实现 srcdoc）。

因为作者已经可以使用外部网址（在单独的域上）来提供不受信任的内容。

安全是什么意思？它无法访问嵌入页面？嵌入收款人无法访问？或两者？或者什么

否则，与常规 div 或 HTML 组件相比，这有什么意义

任何关于 iframe 的“沙盒”的文章都会讨论它提供的好处

【参考方案2】：

来自 MDN：

^1. 嵌入上下文要包含的页面内容。这 属性预计将与沙盒一起使用，并且 无缝属性。如果浏览器支持 srcdoc 属性，它 将覆盖 src 属性中指定的内容（如果存在）。 如果浏览器不支持 srcdoc 属性，它将显示 src 属性中指定的文件（如果存在）。

因此，srcdoc 属性会覆盖使用src 属性嵌入的内容。

Demo

---

另外，你所说的以下 sn-p data:text/html 被称为 Data URI 并且它有局限性..

^2. 数据 URI 不能超过 32,768 个字符。

1.MDN, 2.MSDN

【讨论】：

“所以，srcdoc 属性会覆盖使用 src 属性嵌入的内容。”显然不是在 Firefox 24 中，我看到两个带有微软网站的 IFrame。

@MarcelKorpel 支持srcdoc的Firefox的第一个版本是25（developer.mozilla.org/en-US/docs/Web/HTML/Element/…）

@MrAlien 关于数据 URI 的长度限制的好点，与 have no limit 的 html 属性不同。无论如何，似乎限制是由 Microsoft 实现施加的，因为MDN 没有说任何关于限制的内容，而RFC standard 只说“请注意，某些使用 URL 的应用程序可能会施加长度限制 i>"

@MarcelKorpel 看看无缝属性和其他较新的 html5 属性，你就会明白为什么需要 srcdoc

@Oriol 谢谢你，是的，mdn 没有指定任何限制，但 aamsure uri 确实有限制

【参考方案3】：

带有src 属性和 HTML 内容的 iframe 是跨域的，

但是带有srcDoc 属性和 HTML 内容的 iframe 不是跨域的

【讨论】：

这很好，Chrome 将数据 URI 视为跨域。 Firefox 将它们视为同源，不确定 Edge 的作用。

“不跨域”是什么意思？

@GregoryMagarshak “非跨域”，意味着 iframe 内容将被视为来自与父页面相同的域。因此，它不会受到浏览器同源策略的限制，这通常会阻止浏览器访问远程页面的内容，就像使用 src='some-url.com' 时一样。 developer.mozilla.org/en-US/docs/Web/Security/…

【参考方案4】：

在撰写本文时 - Chrome (v36) 中的 srcdoc 允许设置和获取 cookie，而将 src 与数据 URL 一起使用则不允许：

未捕获的安全错误：无法从“文档”读取“cookie”属性：“数据：”URL 中的 Cookie 被禁用

这对您可能很重要，也可能不重要，但排除了在我正在构建的应用程序中使用数据 URL 的可能性，这很遗憾，因为 IE 目前不支持 srcdoc (v11)。

【讨论】：

好点。数据 URI 在某些浏览器上存在限制，因此 srcdoc 在这些情况下效果更好。

在 Chromium 81 中，父框架背景和字体样式也层叠到 iframe 中，增加了更多实用性。

【参考方案5】：

另一个显着的区别是 src 带有 data-uri 的属性支持 URI 百分比编码规则，而 srcdoc 不支持，因为它支持常规 html 语法，

这些来源会产生不同的结果：

<iframe srcdoc="<p>hello%20world</p><h1>give%0D%0Ame%0D%0Asome%24</h1>"></iframe>

<iframe src="data:text/html;charset=UTF-8,<p>hello%20datauri<p><h1>give%0D%0A me%0D%0Asome%24</h1>"></iframe>

我还注意到属性值中 js 脚本的解析存在差异（它可能不仅仅是百分比编码），但还没有弄清楚规则......

【讨论】：

src 的内容必须经过 URL 编码才能正确处理。有关如何执行此操作的详细信息，请参阅this question。

我在较大的文本文件上没有太多运气 URI 编码属性值。对我有用的是事先在 bash 中使用 recode(1) 清理输入。

【参考方案6】：

在您的示例中，这两种形式在功能上是相同的。但是，您可以同时使用src 和srcdoc 属性，允许非HTML5 浏览器使用src 版本，而HTML5 浏览器可以使用srcdoc 版本以及sandbox 和seamless 属性在如何处理 iFrame 方面提供更大的灵活性。

【讨论】：

但是sandbox 和seamless 属性也可以与src 属性一起使用，不是吗？在我看来，src 比srcdoc 更灵活

@Oriol，我认为我的回答直接指向了为什么这很重要，而不是作为一个缺陷，而是作为一个功能

【参考方案7】：

srcdoc: 嵌入上下文要包含的页面内容。该属性预计将与沙盒和无缝属性一起使用。如果浏览器支持 srcdoc 属性，它将覆盖 src 属性中指定的内容（如果存在）。如果浏览器不支持 srcdoc 属性，它将显示 src 属性中指定的文件（如果存在）。

src:要嵌入的页面的 URL。

【讨论】：

但是src属性也可以包含页面的HTML内容，使用数据URIs

【参考方案8】：

主要区别在于 'src' 属性包含您要嵌入标签中的文档的地址。

另一方面，'srcdoc'属性包含要显示在内嵌框架中的页面的 HTML 内容。

srcdoc 的主要缺点是并非所有浏览器都支持它，而 src 与所有浏览器兼容。

详细解释请通过以下链接： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe

【讨论】：

但是src属性也可以包含页面的HTML内容，使用数据URIs