当 Protected Audience 竞价返回广告候选对象时,该对象可以作为不透明的 URN 返回,用于在 iframe 中呈现广告;也可以作为 FencedFrameConfig 返回,用于在围栏框架中呈现广告。
本指南将介绍什么是受限框架、为什么需要受限框架,以及如何使用这两种方法来呈现广告。如需深入了解受限框架,请参阅本指南或提案了解详情。
什么是 fenced frame?
围栏框架 (<fencedframe>) 是一种用于嵌入内容的 HTML 元素,类似于 iframe。与 iframe 不同,围栏框架会限制与嵌入上下文的通信,以允许框架访问跨网站数据,而无需与嵌入上下文共享这些数据。同样,嵌入上下文中的任何第一方数据都无法与围栏框架共享。
例如,假设 news.example(嵌入上下文)在围栏框架中嵌入了来自 shoes.example 的广告。news.example 无法从 shoes.example 广告中窃取数据,并且 shoes.example 无法从 news.example 中了解第一方数据。
围栏式框架的工作原理
围栏框架使用 FencedFrameConfig 对象进行导航。此对象可从 Protected Audience 竞价中返回。然后,将配置对象设置为围栏框架元素的 config 属性。这与 iframe 不同,在 iframe 中,网址或不透明 URN 会分配给 src 属性。FencedFrameConfig 对象具有只读的 url 属性;不过,由于当前使用情形要求隐藏内部资源的实际网址,因此此属性在读取时会返回字符串“opaque”。
围栏框架无法使用 postMessage 与其嵌入者通信。不过,围栏框架可以使用 postMessage 和围栏框架内的 iframe。
围栏框架还会以其他方式与发布商隔离。发布者无法访问围栏框架内的 DOM,而围栏框架也无法访问发布者的 DOM。此外,封闭框架中不提供 name 等可设置为任意值并可供发布商观察的属性。
围栏框架的行为方式与顶级浏览上下文(例如浏览器标签页)类似。虽然在某些使用情形(例如 opaque-ads)中,围栏框架可以包含跨网站数据(例如 Protected Audience API 兴趣群体),但该框架无法访问未分区的存储空间或 Cookie。opaque-ads 受限框架可以访问基于随机数的唯一 Cookie 和存储分区。
有关围栏框架的特征,请参阅说明文档了解详情。
在围栏框架中呈现广告
如果 AuctionConfig 的 resolveToConfig 参数设置为 true,则 Protected Audience 竞价会返回 FencedFrameConfig:
const frameConfig = await navigator.runAdAuction({
// ...auction configuration
resolveToConfig: true
});
获取配置后,您可以将其分配给围栏框架的 config 属性,以将框架导航到配置所表示的资源。旧版 Chrome 不支持 resolveToConfig 属性,因此您仍必须确认 promise 是否解析为 FencedFrameConfig,然后才能进行导航:
if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
const frame = document.createElement('fencedframe');
frame.config = frameConfig;
}
在 iframe 中呈现广告
如果 AuctionConfig 未明确设置 resolveToConfig,或者将其设置为 false,则 runAdAuction() 会返回不透明的 URN。此 URN 可设置为 iframe 的 src 以呈现广告。