呈现广告

当 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 和存储分区。

如需了解围栏框架的特性,请参阅说明文档

在围栏框架中呈现广告

如果 AuctionConfigresolveToConfig 参数设置为 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 可设置为 iframesrc 来呈现广告。