category
实验：这是一项实验技术
在生产中使用之前，请仔细检查浏览器兼容性表。
fencedframe API提供了用于控制<fencedframe>元素中嵌入的内容的功能。
概念和用法
网络上隐私和安全问题的一个主要来源是嵌入<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。
用例
<fencedframe>被其他API用于嵌入不同类型的跨站点内容或收集数据，以保护隐私的方式实现不同的用例。其中大多数以前依赖于第三方cookie或其他不利于隐私的机制。
- 共享存储API可在安全环境中访问未分区的跨站点数据，并在<fencedframe>中计算和/或显示结果。例如
- 广告商可以衡量广告的覆盖范围，或者根据用户已经在其他网站上看到的广告来提供后续广告。
- 开发人员可以进行A/B测试，根据分配给用户的组或已经看到每个变体的用户数量向用户显示变体。
- 企业可以根据在其他网站上看到的内容来定制用户的体验。例如，如果他们已经购买了会员资格，你可能不想在其他房产上向他们展示会员资格注册广告。
- 受保护受众API允许开发人员实现基于兴趣组的广告，即重新营销和自定义受众用例。它可以评估广告空间的多个出价，并在＜fencedframe＞中显示获胜的广告。
- 私有聚合API可以从<fencedframe>s（源于共享存储或受保护受众API）收集数据，并创建聚合报告。
＜fencedframe＞是如何工作的？
如上所述，您不能通过常规脚本直接控制<fencedframe>中嵌入的内容。
为了设置将在<fencedframe>中显示的内容，正在使用的API（如受保护的受众或共享存储）生成一个FencedFrameConfig对象，然后通过JavaScript将其设置为<fencedframe>的HTMLFencedFrameElement.config属性的值。
以下示例从受保护观众API的广告拍卖中获取FencedFrameConfig，然后用于在<fencedframe>中显示获胜广告：
JS
const frameConfig = await navigator.runAdAuction({
// ...auction configuration
resolveToConfig: true,
});
const frame = document.createElement("fencedframe");
frame.config = frameConfig;
resolveToConfig:true必须传递给runAdAuction（）调用才能获得FencedFrameConfig对象。如果resolveToConfig设置为false，则生成的Promise将解析为只能在<iframe>中使用的不透明URN（例如URN:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a）。
无论哪种方式，浏览器都会存储一个URL，该URL包含要嵌入的内容的目标位置——映射到不透明的URN，或FencedFrameConfig的内部URL属性。嵌入上下文中运行的JavaScript无法读取URL值。
注意：＜iframe＞s中提供了对不透明的URNs的支持，以方便将现有实现迁移到隐私沙盒API。这种支持是暂时的，将来随着采用率的增加将被取消。
注意：FencedFrameConfig有一个setSharedStorageContext（）方法，用于将数据从嵌入文档传递到<fencedframe>的共享存储。例如，它可以在Worklet中通过＜fencedframe＞访问，并用于生成报告。有关更多详细信息，请参阅共享存储API。
访问围栏对象上的围栏框架功能
在<fencedframe>s中嵌入的文档中，JavaScript可以访问Window.fence属性，该属性为该文档返回一个fence实例。此对象包含几个与fenced-frame API功能特别相关的函数。例如，Fence.reportEvent（）提供了一种通过信标向一个或多个指定的URL触发报告数据提交的方法，以便报告广告浏览量和点击量。
权限策略
只有设计用于<fencedframes>的特定功能才能通过在其上设置的权限策略启用；其他策略控制的功能在此上下文中不可用。有关更多详细信息，请参阅围栏框架可用的权限策略。
HTTP标头
将为从<fencedframe>内部发出的任何请求设置值为fencedframe的Sec-Fetch-Dest标头，包括嵌入<fencedframe>中的子<iframe>。
HTTP
Sec Fetch Dest:fencedframe
服务器必须为任何要加载到<fencedframe>或嵌入<fencedframe>的<iframe>中的文档设置一个值为fencedframe的“支持加载模式”响应标头。
HTTP
Supports-Loading-Mode: fenced-frame
围栏框架对HTTP标头的其他影响如下：
- 用户代理客户端提示在围栏框架内不可用，因为它们依赖于权限策略委派，这可能被用来泄露数据。
- 在从围栏框架内打开的新浏览上下文上强制执行严格的跨来源开放者策略设置，否则它们可能被用来向其他来源泄露信息。从围栏框架内打开的任何新窗口都将具有rel=“noopener”和Cross Origin Opener Policy:same Origin设置，以确保window.Opener返回null并将其放置在自己的浏览上下文组中。
- 内容安全策略：已添加fencedframe src，用于为加载到＜fencedframe＞元素中的嵌套浏览上下文指定有效源。
- 内容安全策略：沙箱自定义设置不能由围栏框架继承，以减轻隐私问题。对于要加载的围栏框架，您需要不指定沙箱CSP（这意味着以下值），或者指定以下沙箱值：
- 允许同源
- 允许表单
- 允许脚本
- 允许弹出窗口
- 允许弹出窗口逃离沙箱
- 允许通过用户激活进行顶部导航
加载和卸载事件之前
beforeunload和unload事件不会在fenced帧上触发，因为它们可能会以页面删除时间戳的形式泄露信息。实施旨在消除尽可能多的潜在泄漏。
接口
FencedFrameConfig
表示<fencedframe>的导航，即将在其中显示什么内容。从受保护的访问群体API等源返回FencedFrameConfig，并将其设置为HTMLFencedFrameElement.config的值。
Fence
包含几个与围栏框架功能相关的功能。仅适用于嵌入<fencedframe>中的文档。
HTMLFencedFrameElement
在JavaScript中表示<fencedframe>元素，并提供用于配置它的属性。
对其他接口的扩展
Navigator.dedepatedReplaceInURN（）
替换与给定不透明URN或FencedFrameConfig的内部URL属性相对应的映射URL中的指定字符串。
Window.fence
返回当前文档上下文的围栏对象实例。仅适用于嵌入<fencedframe>中的文档。
注册和本地测试
创建FencedFrameConfigs的某些API功能，如Navigator.runAdAuction（）（受保护的受众API）和WindowSharedStorage.selectURL（）（共享存储API），以及Fence.reportEvent（）等其他功能，要求您在隐私沙箱注册过程中注册您的网站。如果不这样做，API调用将失败，并显示控制台警告。
注意：在Chrome中，您仍然可以在本地测试您的围栏框架代码，而无需注册。要允许本地测试，请启用以下Chrome开发者标志：
chrome://flags/#privacy-sandbox-enrollment-overrides
示例
以下演示都使用了<fencedframe>s：
- Shared Storage API demos (which also includes some Private Aggregation API examples)
- Protected Audience API demo
规格
- 登录 发表评论