当 Protected Audience 竞价返回候选广告时,它可能会返回为不透明 URN(用于在 iframe
中呈现广告)或 FencedFrameConfig
(用于在围栏框架中呈现广告)。
本指南将介绍什么是围栏框架、围栏框架的必要性,以及如何使用任一方法呈现广告。如需更深入地了解围栏框架,请参阅本指南或提案了解详情。
什么是围栏框架?
围栏框架 (<fencedframe>
) 是嵌入内容的 HTML 元素,类似于 iframe
。与 iframe
不同,围栏帧会限制与其嵌入上下文的通信,以允许该帧访问跨网站数据,而无需与嵌入上下文共享数据。同样,嵌入上下文中的任何第一方数据都不能与围栏帧共享。
例如,假设 news.example
(嵌入上下文)会在围栏框架中嵌入 shoes.example
中的广告。news.example
不能外泄 shoes.example
广告中的数据,shoes.example
也不能通过 news.example
获知第一方数据。
围栏框架的工作原理是什么?
围栏框架使用 FencedFrameConfig
对象进行导航。此对象可从 Protected Audience 竞价返回。然后,将配置对象设置为围栏框架元素的 config
属性。这与将网址或不透明 URN 分配给 src
属性的 iframe
不同。FencedFrameConfig
对象具有只读的 url
属性;不过,由于当前用例需要隐藏内部资源的实际网址,因此该属性在读取时会返回不透明的字符串。
围栏框架无法使用 postMessage
与其嵌入器进行通信。不过,围栏框架可以将 postMessage
与围栏框架内的 iframe
结合使用。
围栏框架将通过其他方式与发布商隔离开来。发布商无权访问围栏框架内的 DOM,而围栏框架无法访问发布商的 DOM。此外,name
等属性在围栏框架中不可用,它们可以设置为发布商并由其观察到的任何值。
围栏框架的行为类似于顶级浏览上下文(例如浏览器标签页)。虽然某些用例(例如 opaque-ads
)中的围栏框架可以包含跨网站数据(例如 Protected Audience API 兴趣群体),但该框架无法访问未分区的存储空间或 Cookie。opaque-ads
围栏帧可以访问基于 Nonce 的唯一 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
来呈现广告。