<fencedframe>: 围栏框架元素

实验性： 这是一个 实验性技术
在生产环境中使用之前，请仔细查看 浏览器兼容性表。

<fencedframe> HTML 元素代表一个嵌套的 浏览上下文，将另一个 HTML 页面嵌入到当前页面中。<fencedframe> 的形式和功能与 <iframe> 元素非常相似，除了

  • <fencedframe> 内容与其嵌入网站之间的通信受到限制。
  • <fencedframe> 可以访问跨站点数据，但仅限于在保护用户隐私的非常具体的一组受控情况下。
  • <fencedframes> 无法通过常规脚本进行操作或访问其数据（例如读取或设置源 URL）。<fencedframe> 内容只能通过 特定 API 嵌入。
  • <fencedframe> 无法访问嵌入上下文的 DOM，反之亦然。

<fencedframe> 元素是一种 <iframe>，内置了更多原生隐私功能。它解决了 <iframe> 的缺点，例如对第三方 cookie 的依赖和其他隐私风险。有关更多详细信息，请参阅 围栏框架 API。

属性

此元素包括 全局属性。

allow

指定 <fencedframe> 的 权限策略，该策略根据请求的来源定义 <fencedframe> 可用的功能。有关哪些功能可以通过围栏框架上设置的策略控制的更多详细信息，请参阅 围栏框架可用的权限策略。

height

一个无单位的整数，表示围栏框架的高度（以 CSS 像素为单位）。默认值为 150。

width

一个无单位的整数，表示围栏框架的宽度（以 CSS 像素为单位）。默认值为 300。

围栏框架可用的权限策略

从顶层上下文委托给围栏框架的权限，用于允许和拒绝功能，可能用作通信通道，因此构成隐私威胁。因此，可以通过 权限策略 控制其可用性的标准 Web 功能（例如，camera 或 geolocation）不可用在围栏框架内。

只有专为在围栏框架内使用而设计的特定功能可以通过围栏框架内的策略启用

  • 受保护的受众 API
    • attribution-reporting
    • private-aggregation
    • shared-storage
    • shared-storage-select-url
  • 共享存储 API
    • attribution-reporting
    • private-aggregation
    • shared-storage
    • shared-storage-select-url

目前这些功能始终在围栏框架内启用。未来，哪些功能启用将可以通过 <fencedframe> allow 属性控制。以这种方式阻止隐私沙盒功能也会阻止围栏框架加载 - 根本不会有通信通道。

跨围栏框架边界聚焦

文档的活动焦点跨围栏框架边界移动的能力（即从围栏框架外的元素移动到内部元素，反之亦然）受到限制。用户发起的操作（例如点击或标签）可以这样做，因为那里没有指纹识别风险。

但是，尝试通过 API 调用（例如 HTMLElement.focus()）遍历边界是被禁止的 - 恶意脚本可以使用一系列此类调用跨边界泄露推断信息。

定位和缩放

作为一个 替换元素，<fencedframe> 允许使用 object-position 属性调整嵌入文档在其框内的位置。

注意： object-fit 属性对 <fencedframe> 元素无效。

嵌入内容的大小可以通过 <fencedframe> 的 config 对象的内部 contentWidth 和 contentHeight 属性设置。在这种情况下，更改 <fencedframe> 的 width 或 height 将会改变页面上嵌入容器的大小，但容器内的文档将被视觉缩放以适应。嵌入文档的报告宽度和高度（即 Window.innerWidth 和 Window.innerHeight）将保持不变。

可访问性

使用屏幕阅读器等辅助技术的使用者可以使用 <fencedframe> 上的 title 属性 来标记其内容。标题的值应简洁地描述嵌入的内容。

html
<fencedframe
  title="Advertisement for new Log. From Blammo!"
  width="640"
  height="320"></fencedframe>

如果没有此标题，他们必须导航到 <iframe> 内以确定其嵌入内容是什么。这种上下文切换可能会令人困惑且耗时，尤其是在页面包含多个 <iframe> 以及/或者嵌入包含视频或音频等交互式内容的情况下。

示例

要设置在 <fencedframe> 中显示的内容，利用 API（例如 受保护的受众 或 共享存储）将生成一个 FencedFrameConfig 对象，然后将其设置为 <fencedframe> 的 config 属性的值。

以下示例从受保护的受众 API 的广告拍卖中获取 FencedFrameConfig，然后将其用于在 <fencedframe> 中显示中标广告。

html
<fencedframe width="640" height="320"></fencedframe>
js
const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true,
});

const frame = document.querySelector("fencedframe");
frame.config = frameConfig;

注意： 必须在 runAdAuction() 调用中传递 resolveToConfig: true 以获取 FencedFrameConfig 对象。如果未设置，则生成的 Promise 将解析为一个只能在 <iframe> 中使用的 URN。

技术摘要

内容类别 流内容、短语内容、嵌入内容、交互式内容、可触内容。
允许的内容 无。
标签省略 无，起始标签和结束标签都是必需的。
允许的父元素 任何接受嵌入内容的元素。
隐式 ARIA 角色 无对应角色
允许的 ARIA 角色 application、document、img、none、presentation
DOM 接口 HTMLFencedFrameElement

规范

规范
封闭框架
# the-fencedframe-element

浏览器兼容性

BCD 表格只在浏览器中加载

另请参阅