HTML：活的标准

面向网页开发者版 — 最后更新于 2024 年 9 月 12 日

1. 1. 1. 4.8.5 iframe 元素
      2. 4.8.6 embed 元素
      3. 4.8.7 object 元素

4.8.5 iframe 元素

类别:

流动内容.

短语内容.

嵌入内容.

交互式内容.

可感知内容.

可以使用此元素的上下文:

在预期 嵌入内容 的地方。

内容模型:

无.

在 text/html 中的标签省略:

两个标签都不能省略。

内容属性:

全局属性

src — 资源地址

srcdoc — 在 iframe 中渲染的文档

name — 内容可导航 的名称

sandbox — 嵌套内容的安全规则

allow — 权限策略 应用于 iframe 的内容

allowfullscreen — 是否允许 iframe 的内容使用 requestFullscreen()

width — 水平尺寸

height — 垂直尺寸

referrerpolicy — 推荐来源策略 用于元素发起的 获取

loading — 用于确定加载延迟

可访问性注意事项:

面向作者.

面向实施者.

DOM 接口:

使用 HTMLIFrameElement。

iframe 元素 代表 其 内容可导航。

src 属性给出元素的 内容可导航 要包含的页面的 URL。如果存在该属性，则必须为一个 有效的非空 URL，可能包含在空格之间。如果在 iframe 元素上指定了 itemprop 属性，则也必须指定 src 属性。

srcdoc 属性给出元素的 内容可导航 要包含的页面的内容。属性的值用于 构建 一个 iframe srcdoc 文档，它是一个 Document，其 URL 匹配 about:srcdoc。

如果存在 srcdoc 属性，则其值必须使用 HTML 语法，该语法包含以下语法组件，按给定顺序排列

1. 任何数量的 注释 和 ASCII 空格。
2. 可选地，一个 DOCTYPE。
3. 任何数量的 注释 和 ASCII 空格。
4. 文档元素，以 html 元素 的形式。
5. 任何数量的 注释 和 ASCII 空格。

上述要求也适用于 XML 文档。

<article>
 <h1>I got my own magazine!</h1>
 <p>After much effort, I've finally found a publisher, and so now I
 have my own magazine! Isn't that awesome?! The first issue will come
 out in September, and we have articles about getting food, and about
 getting in boxes, it's going to be great!</p>
 <footer>
  <p>Written by <a href="/users/cap">cap</a>, 1 hour ago.
 </footer>
 <article>
  <footer> Thirteen minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>did you get a cover picture yet?"></iframe>
 </article>
 <article>
  <footer> Nine minutes ago, <a href="/users/cap">cap</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>Yeah, you can see it <a href=&quot;/gallery?mode=cover&amp;amp;page=1&quot;>in my gallery</a>."></iframe>
 </article>
 <article>
  <footer> Five minutes ago, <a href="/users/ch">ch</a> wrote: </footer>
  <iframe sandbox srcdoc="<p>hey that's earl's table.
<p>you should get earl&amp;amp;me on the next cover."></iframe>
 </article>

在 HTML 语法 中，作者只需要记住使用 U+0022 引号字符（"）来包装属性内容，然后转义所有 U+0026 和号（&）和 U+0022 引号字符（"），并指定 sandbox 属性，以确保安全地嵌入内容。（还要记住在引号之前转义和号，以确保引号变为 " 而不是 "。）

在 XML 中，U+003C 小于号字符（<）也需要转义。为了防止 属性值规范化，XML 的一些空格字符 - 特别是 U+0009 制表符 (tab)、U+000A 换行符 (LF) 和 U+000D 回车符 (CR) - 也需要转义。[XML]

如果同时指定了 src 属性和 srcdoc 属性，则 srcdoc 属性优先。这允许作者为不支持 srcdoc 属性的传统用户代理提供一个备用 URL。

如果在创建元素时，未设置 srcdoc 属性，并且 src 属性也未设置或已设置但其值无法 解析，则元素的 内容可导航 将保留在 初始 about:blank Document 中。

如果用户 导航 离开此页面，则 iframe 的 内容可导航 的 活动 WindowProxy 对象将代理新的 Window 对象以用于新的 Document 对象，但 src 属性不会更改。

如果存在 name 属性，则必须为一个 有效的可导航目标名称。如果存在，则在 创建 时，给定值用于命名元素的 内容可导航。

当指定 sandbox 属性时，它会对 iframe 承载的任何内容启用一组额外的限制。它的值必须是一个 无序的、由空格分隔的唯一标记集，这些标记是 ASCII 不区分大小写 的。允许的值是

• allow-downloads
• allow-forms
• allow-modals
• allow-orientation-lock
• allow-pointer-lock
• allow-popups
• allow-popups-to-escape-sandbox
• allow-presentation
• allow-same-origin
• allow-scripts
• allow-top-navigation
• allow-top-navigation-by-user-activation
• allow-top-navigation-to-custom-protocols

当设置该属性时，内容被视为来自一个唯一的 不透明来源，表单、脚本和各种潜在的烦人 API 被禁用，链接被阻止指向其他 可导航对象。allow-same-origin 关键字使内容被视为来自其真实来源，而不是将其强制到 不透明来源；allow-top-navigation 关键字允许内容 导航 其 可遍历可导航对象；allow-top-navigation-by-user-activation 关键字的行为类似，但只允许在浏览上下文 活动窗口 具有 短暂激活 时进行这种 导航；allow-top-navigation-to-custom-protocols 重新启用对非 获取方案 的导航，使其 传递给外部软件；allow-forms、allow-modals、allow-orientation-lock、allow-pointer-lock、allow-popups、allow-presentation、allow-scripts 和 allow-popups-to-escape-sandbox 关键字分别重新启用表单、模态对话框、屏幕方向锁定、指针锁定 API、弹出窗口、演示 API、脚本和创建非沙箱 辅助浏览上下文。allow-downloads 关键字允许内容执行下载。 [POINTERLOCK] [SCREENORIENTATION] [PRESENTATION]

allow-top-navigation 和 allow-top-navigation-by-user-activation 关键字不能同时指定，因为这样做是多余的；在这种不符合规范的标记中，只有 allow-top-navigation 会起作用。

类似地，如果指定了 allow-top-navigation 或 allow-popups，则不能指定 allow-top-navigation-to-custom-protocols 关键字，因为这样做是多余的。

要允许沙箱内容内的 alert()、confirm() 和 prompt()，需要同时指定 allow-modals 和 allow-same-origin 关键字，并且加载的 URL 需要与 顶级来源 同源。如果没有 allow-same-origin 关键字，内容始终被视为跨源，跨源内容 无法显示简单的对话框。

当嵌入页面与包含 iframe 的页面 同源 时，一起设置 allow-scripts 和 allow-same-origin 关键字，允许嵌入页面简单地删除 sandbox 属性，然后重新加载自身，从而完全脱离沙箱。

这些标志只有在 iframe 元素的 内容可导航对象 被 导航 时才会生效。移除它们，或者移除整个 sandbox 属性，对已经加载的页面没有影响。

潜在的恶意文件不应与包含 iframe 元素的文件位于同一服务器。如果攻击者可以诱使用户直接访问恶意内容，而不是在 iframe 中访问，那么对恶意内容进行沙箱处理的作用很小。为了限制恶意 HTML 内容可能造成的损害，应该从一个单独的专用域提供服务。使用不同的域可以确保文件中的脚本无法攻击网站，即使用户被欺骗直接访问这些页面，也无法获得 sandbox 属性的保护。

<p>We're not scared of you! Here is your content, unedited:</p>
<iframe sandbox src="https://usercontent.example.net/getusercontent.cgi?id=12193"></iframe>

<iframe sandbox="allow-same-origin allow-forms allow-scripts"
        src="https://maps.example.com/embedded.html"></iframe>

<iframe sandbox="allow-same-origin allow-forms" src=B></iframe>

<iframe sandbox="allow-scripts" src=C></iframe>

<a href=D>Link</a>

当指定 allow 属性时，它会确定在 iframe 的 内容可导航对象 中的 Document 的 权限策略 初始化时要使用的 容器策略。它的值必须是 序列化权限策略。 [PERMISSIONSPOLICY]

<iframe src="https://maps.example.com/" allow="geolocation"></iframe>

allowfullscreen 属性是一个 布尔属性。当指定时，它表示 iframe 元素的 内容可导航对象 中的 Document 对象将使用一个 权限策略 初始化，该策略允许从任何 来源 使用 "fullscreen" 功能。这是由 处理权限策略属性 算法执行的。 [PERMISSIONSPOLICY]

<article>
 <header>
  <p><img src="/usericons/1627591962735"> <b>Fred Flintstone</b></p>
  <p><a href="/posts/3095182851" rel=bookmark>12:44</a> — <a href="#acl-3095182851">Private Post</a></p>
 </header>
 <p>Check out my new ride!</p>
 <iframe src="https://video.example.com/embed?id=92469812" allowfullscreen></iframe>
</article>

allow 和 allowfullscreen 都不能授予对 iframe 元素的 内容可导航对象 中的功能的访问权限，如果元素的 节点文档 未被允许使用该功能。

因为它们只影响 内容可导航对象 的 活动文档 的 权限策略，所以 allow 和 allowfullscreen 属性只有在 iframe 的 内容可导航对象 被 导航 时才会生效。添加或删除它们对已经加载的文档没有影响。

iframe 元素支持 尺寸属性，用于嵌入内容具有特定尺寸的情况（例如，广告单元具有明确定义的尺寸）。

iframe 元素永远不会有 回退内容，因为它总是 创建一个新的子可导航对象，无论指定的初始内容是否成功使用。

referrerpolicy 属性是一个 引用者策略属性。它的目的是设置在 处理 iframe 属性 时使用的 引用者策略。 [REFERRERPOLICY]

loading 属性是一个 延迟加载属性。它的目的是指示加载位于视窗范围之外的 iframe 元素的策略。

当 loading 属性的状态更改为 Eager 状态时，用户代理必须执行以下步骤

1. 令 resumptionSteps 为 iframe 元素的 延迟加载恢复步骤。

2. 如果 resumptionSteps 为空，则返回。

3. 将 iframe 的 延迟加载恢复步骤 设置为空。

4. 调用 resumptionSteps。

iframe 元素的后代不代表任何内容。（在不支持 iframe 元素的旧版用户代理中，内容将被解析为可以充当回退内容的标记。）

HTML 解析器 将 iframe 元素中的标记视为文本。

<iframe src="https://ads.example.com/?customerid=923513721&amp;format=banner"
        width="468" height="60"></iframe>

4.8.6 embed 元素

类别:

流动内容.

短语内容.

嵌入内容.

交互式内容.

可感知内容.

可以使用此元素的上下文:

预期 嵌入式内容 的位置。

内容模型:

无.

在 text/html 中的标签省略:

没有 结束标签。

内容属性:

全局属性

src — 资源的地址

type — 嵌入式资源的类型

width — 水平尺寸

height — 垂直尺寸

任何没有命名空间的其他属性（参见正文）。

可访问性注意事项:

面向作者.

面向实施者.

DOM 接口:

embed 元素提供了一个外部应用程序或交互式内容的集成点。

src 属性给出正在嵌入的资源的 URL。如果存在此属性，则它必须包含一个 有效的非空 URL，可能包含空格。

如果在 embed 元素上指定了 itemprop 属性，则也必须指定 src 属性。

type 属性（如果存在）给出用于选择要实例化的插件的 MIME 类型。该值必须是一个 有效的 MIME 类型字符串。如果 type 属性和 src 属性都存在，则 type 属性必须指定与由 src 属性给出的资源的 显式 Content-Type 元数据 相同的类型。

embed 元素支持 尺寸属性。

4.8.7 object 元素

类别:

流动内容.

短语内容.

嵌入内容.

列出 的 与表单关联的元素。

可感知内容.

可以使用此元素的上下文:

预期 嵌入式内容 的位置。

内容模型:

透明的.

在 text/html 中的标签省略:

两个标签都不能省略。

内容属性:

全局属性

data — 资源的地址

type — 嵌入式资源的类型

name — 内容可导航的 名称

form — 将元素与 form 元素关联

width — 水平尺寸

height — 垂直尺寸

可访问性注意事项:

面向作者.

面向实施者.

DOM 接口:

使用 HTMLObjectElement。

object 元素可以表示一个外部资源，该资源将根据其类型被视为图像或 子可导航的。

data 属性指定资源的 URL。它必须存在，并且必须包含一个 有效的非空 URL，可能包含空格。

type 属性（如果存在）指定资源的类型。如果存在，该属性必须是一个 有效的 MIME 类型字符串。

name 属性（如果存在）必须是一个 有效的可导航目标名称。如果适用，给定的值用于命名元素的 内容可导航的，并且如果在元素的 内容可导航的 创建 时存在，则使用给定的值。

form 属性用于明确地将 object 元素与其 表单所有者 关联。

object 元素支持 尺寸属性。

<figure>
 <object data="clock.html"></object>
 <figcaption>My HTML Clock</figcaption>
</figure>