當 Protected Audience 競價傳回候選廣告時,可以傳回不透明的 URN,用於在 iframe 中顯示廣告,也可以傳回 FencedFrameConfig,用於在設有圍欄的影格中顯示廣告。
本指南將說明受限框架的定義和必要性,以及如何使用任一方法算繪廣告。如要深入瞭解設有範圍的影格,請參閱這份指南或提案。
什麼是圍欄頁框?
受限框架 (<fencedframe>) 是用於嵌入內容的 HTML 元素,類似於 iframe。與 iframe 不同,設有圍欄的影格會限制與嵌入環境的通訊,允許影格存取跨網站資料,但不與嵌入環境共用。同樣地,嵌入情境中的任何第一方資料都無法與設有圍欄的影格共用。
舉例來說,假設 news.example (嵌入內容) 在設有安全防護的影格中嵌入 shoes.example 的廣告。news.example無法從 shoes.example 廣告中外洩資料,也無法從 news.example 取得第一方資料。shoes.example
圍籬框架的運作方式
設有圍欄的框架會使用 FencedFrameConfig 物件進行導覽。這個物件可從目標對象受保護競價傳回。然後,設定物件會設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設為設config這與iframe不同,後者會將網址或不透明 URN 指派給 src 屬性。FencedFrameConfig 物件具有唯讀的 url 屬性,但由於目前的使用情境需要隱藏內部資源的實際網址,因此讀取這個屬性時會傳回不透明的字串。
Fenced Frame 無法使用 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,用於算繪廣告。