Fenced Frame API

可用性有限

此特性不是基线特性，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一项实验性技术
在生产中使用此技术之前，请仔细检查浏览器兼容性表格。

警告：此功能目前受到一位浏览器供应商的反对。有关详细信息，请参阅下文的标准立场部分。

Fenced Frame API 提供了控制嵌入在<fencedframe>元素中的内容的功能。

概念与用法

Web上主要的隐私和安全问题之一是嵌入在<iframe>元素中的内容。历史上，<iframe>一直被用于设置第三方 Cookie，这些 Cookie 可用于跨站点共享信息和跟踪用户。此外，嵌入在<iframe>中的内容可以与其嵌入的文档进行通信（例如，使用Window.postMessage()）。

嵌入文档还可以使用脚本从<iframe>中读取各种形式的信息—例如，通过读取src属性中的嵌入式URL，您可能获得大量的跟踪/指纹识别数据，特别是当它包含URL参数时。<iframe>还可以访问嵌入上下文的DOM，反之亦然。

大多数现代浏览器都在致力于实现存储分区机制，以便 Cookie 数据不再可用于跟踪（例如，请参阅具有独立分区状态的 Cookie (CHIPS) 或 Firefox 状态分区）。

<fencedframe>元素旨在解决这个难题的另一部分—它们在形式和功能上都非常类似于<iframe>，除了

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

有关fenced frames通信模型的更多信息，请阅读嵌入式框架通信指南。

用例

<fencedframe>由其他API用于嵌入不同类型的跨站点内容或收集数据，以隐私保护的方式满足不同的用例。其中大多数以前依赖于第三方 Cookie 或其他对隐私不利的机制。

Shared Storage API 在安全环境中提供对未分区跨站点数据的访问，在<fencedframe>中计算和/或显示结果。例如：
- 广告商可以衡量广告的覆盖范围，或者根据用户在其他网站上已看到的内容投放后续广告。
- 开发人员可以进行 A/B 测试，根据用户所属的组或已看到每个变体的用户数量向用户展示变体。
- 企业可以根据用户在其他网站上看到的内容来定制用户体验。例如，如果用户已购买会员资格，您可能不希望在您的其他属性上向他们展示会员注册广告。
Protected Audience API 允许开发人员实现基于兴趣组的广告，即再营销和自定义受众用例。它可以评估广告位的多个出价，并在<fencedframe>中显示获胜的广告。
Private Aggregation API 可以从<fencedframe>（源自共享存储或 Protected Audience API）收集数据并创建聚合报告。

`<fencedframe>`是如何工作的？

如上所述，您无法通过常规脚本直接控制嵌入在<fencedframe>中的内容。

要设置将在<fencedframe>中显示的内容，一个利用的API（例如Protected Audience或Shared Storage）将生成一个FencedFrameConfig对象，然后通过JavaScript将其设置为<fencedframe>的HTMLFencedFrameElement.config属性的值。

以下示例从 Protected Audience API 的广告竞价中获取一个 FencedFrameConfig，然后用于在 <fencedframe> 中显示中标广告

const frameConfig = await navigator.runAdAuction({
  // … auction configuration
  resolveToConfig: true,
});

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

必须在runAdAuction()调用中传递resolveToConfig: true以获取FencedFrameConfig对象。如果resolveToConfig设置为false，则生成的Promise将解析为一个不透明的URN（例如urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a），该URN只能在<iframe>中使用。

无论哪种方式，浏览器都会存储一个包含要嵌入内容的的URL—映射到不透明的URN，或者FencedFrameConfig的内部url属性。嵌入上下文中运行的JavaScript无法读取URL值。

注意：为了方便将现有实现迁移到隐私沙盒API，支持在<iframe>中使用不透明URN。此支持是临时的，并且随着采用率的增长将在未来被删除。

注意：FencedFrameConfig有一个setSharedStorageContext()方法，用于将嵌入文档中的数据传递到<fencedframe>的共享存储中。例如，它可以在<fencedframe>的Worklet中访问，并用于生成报告。有关更多详细信息，请参阅Shared Storage API。

Sec-Fetch-Dest: fencedframe

服务器必须为任何打算加载到<fencedframe>中的文档，或嵌入在<fencedframe>中的<iframe>设置一个值为fenced-frame的Supports-Loading-Mode响应头部。

http

Supports-Loading-Mode: fenced-frame

fenced frames对HTTP头部的其他影响如下：

用户代理客户端提示（User-agent client hints）在fenced frames内不可用，因为它们依赖于权限策略的委托，这可能被用于泄露数据。
从fenced frames内部打开的任何新浏览上下文都将强制执行严格的Cross-Origin-Opener-Policy设置，否则可能用于向其他源泄露信息。从fenced frame内部打开的任何新窗口都将设置rel="noopener"和Cross-Origin-Opener-Policy: same-origin，以确保Window.opener返回null，并将其置于自己的浏览上下文组中。
添加了Content-Security-Policy: fenced-frame-src，用于指定加载到<fencedframe>元素中的嵌套浏览上下文的有效来源。
为了缓解隐私问题，fenced frames不能继承Content-Security-Policy: sandbox的自定义设置。要加载fenced frame，您需要指定没有sandbox CSP（这意味着以下值），或者指定以下沙盒值：
- allow-same-origin
- allow-forms
- allow-scripts
- allow-popups
- allow-popups-to-escape-sandbox
- allow-top-navigation-by-user-activation

`beforeunload`和`unload`事件

beforeunload和unload事件在fenced frames上不会触发，因为它们可以通过页面删除时间戳的形式泄露信息。实现旨在尽可能消除潜在的数据泄露。

接口

FencedFrameConfig: 代表<fencedframe>的导航，即将在其中显示的内容。FencedFrameConfig是从Protected Audience API等源返回的，并设置为HTMLFencedFrameElement.config的值。
Fence: 包含几个与fenced frame功能相关的函数。仅对嵌入在<fencedframe>中的文档可用。
HTMLFencedFrameElement: 在JavaScript中代表一个<fencedframe>元素，并提供配置它的属性。

其他接口的扩展

Navigator.deprecatedReplaceInURN(): 替换给定不透明URN或FencedFrameConfig内部url属性对应的映射URL中的指定字符串。
Window.fence: 返回当前文档上下文的Fence对象实例。仅对嵌入在<fencedframe>中的文档可用。