Fenced Frame 總覽

安全地將內容嵌入網頁，不必分享跨網站資料。

導入狀態

這份文件概述了新的 HTML 元素：<fencedframe>。

• Fenced Frames 提案現已正式發布。
• Chrome 平台狀態

建議採行的做法	狀態
Web API 因 urn 設定而改變 說明	將於 2023 年第 1 季透過 Chrome 使用。
廣告報表功能的 Fenced Frames 中的廣告素材巨集 GitHub 問題	將於 2023 年第 3 季透過 Chrome 使用。
傳送自動信標一次 GitHub 問題	將於 2023 年第 3 季透過 Chrome 使用。
序列化 Fenced Frames 設定 GitHub 問題	將於 2023 年第 3 季透過 Chrome 使用。
Protected Audience 廣告大小巨集的其他格式選項 GitHub 問題	將於 2023 年第 4 季透過 Chrome 使用。
自動信標傳送至所有已註冊網址 GitHub 問題 | GitHub 問題	將於 2023 年第 4 季透過 Chrome 使用。
啟用從 Urn iframe 和廣告元件頁框離開廣告興趣群組的功能 GitHub 問題	將於 2024 年第 1 季於 Chrome 中使用
導入 keep.top_navigation_start/commit GitHub 問題、GitHub 問題	將於 2024 年第 1 季於 Chrome 中使用
在 3PCD 之前，不要停用 ReportEvent 中的 Cookie 設定 GitHub 問題	將於 2024 年第 1 季於 Chrome 中使用
開始支援跨來源子頁框中的自動信標 GitHub 問題	將於 2024 年第 1 季於 Chrome 中使用

為什麼需要使用圍欄頁框？

圍欄頁框 (<fencedframe>) 是嵌入內容的 HTML 元素，類似於 iframe。與 iframe 不同，Fenced Frame 會限制與 iframe 的通訊，讓框架存取跨網站資料，而不會與嵌入內容共用。部分 Privacy Sandbox API 可能會需要在 Fenced 影格內轉譯特定文件。

同樣地，嵌入情境中的任何第一方資料都無法與 Fenced Frame 共用。

舉例來說，假設 news.example (嵌入情境) 會在 Fenced 頁框中嵌入 shoes.example 的廣告。news.example 無法從 shoes.example 廣告竊取資料，shoes.example 也無法從 news.example 學習第一方資料。

透過儲存空間分區強化跨網站隱私防護

瀏覽網頁時，您可能已經在某個網站上查看產品，之後又發現這些產品再次出現在完全不同網站的廣告中。

現今的廣告技術主要是透過追蹤技術，使用第三方 Cookie 跨網站共用資訊。這項技術 Chrome 已承諾逐步淘汰，並替換為更保護隱私權的變化版本。

Chrome 目前正在進行儲存空間分區，這會將每個網站的瀏覽器儲存空間區隔開來。目前，如果 shoes.example 的 iframe 嵌入 news.example，且 iframe 會將值儲存在儲存空間中，那麼您可以從 shoes.example 網站讀取該值。儲存空間分區後，跨網站 iframe 不會再共用儲存空間，因此 shoes.example 將無法存取 iframe 儲存的資訊。如果 iframe 是由 *.shoes.example 提供，且嵌入在 *.shoes.example 上，系統會將瀏覽器儲存空間視為「相同網站」，因此會共用瀏覽器儲存空間。

儲存空間分區會套用至 Standard Storage API，包括 LocalStorage、IndexedDB 和 Cookie。在分區的世界中，第一方儲存空間的資訊外洩會大幅減少。

使用跨網站資料

Fenced Frame 是一項 Privacy Sandbox 功能，可以建議頂層網站應進行資料分區。許多 Privacy Sandbox 提案和 API 旨在滿足不使用第三方 Cookie 或其他追蹤機制的跨網站用途。例如：

• Protected Audience API：以保護隱私權的方式放送按照興趣顯示的廣告。
• 共用儲存空間允許在安全環境中存取未分區的跨網站資料。

讓我們來看看圍欄框架如何搭配 Protected Audience API 運作。導入 Protected Audience API 後，系統會在廣告主網站的興趣群組註冊使用者興趣，以及使用者可能會感興趣的廣告。接著，在另一個網站 (稱為「發布商」) 上，參與相關興趣群組註冊的廣告會進行競價，勝出的廣告會顯示在圍欄頁框中。

如果發布商在 iframe 中顯示勝出的廣告，且指令碼可以讀取 iframe 的 src 屬性，發布商可以從該廣告網址推測訪客的興趣資訊。這不是隱私權保護。

使用圍欄頁框，發布商可以顯示符合訪客興趣的廣告，但 src 和興趣群組只有在頁框中只會向廣告主得知。發布商無法存取這項資訊。

圍欄頁框的運作方式為何？

Fenced Frame 會使用 FencedFrameConfig 物件進行導覽。這個物件可透過 Protected Audience API 競價或 Shared Storage 的網址選取作業傳回。接著，設定物件在 Fenced frame 元素上的 config 屬性。這點與將網址或不透明 URN 指派給 src 屬性的 iframe 不同。FencedFrameConfig 物件具有唯讀的 url 屬性；不過，由於目前的用途需要隱藏內部資源的實際網址，因此這個屬性會在讀取時傳回字串 opaque。

圍欄頁框無法使用 postMessage 與嵌入器通訊。但 Fenced Frame 可以在 Fenced 影格中搭配 iframe 使用 postMessage。

Fenced Frame 會以其他方式與發布商區隔開來。舉例來說，發布者無法存取 Fenced 影格中的 DOM，而 Fenced Frame 也無法存取發布者的 DOM。此外，name 等屬性可設為發布者所觀察到的任何值，也無法在圍欄頁框中使用。

Fenced Frame 的運作方式與頂層瀏覽內容 (例如瀏覽器分頁) 相同。雖然特定用途 (例如 opaque-ads) 的圍欄框架可能包含跨網站資料 (例如 Protected Audience API 興趣群組)，但頁框無法存取未分區的儲存空間或 Cookie。opaque-ads 圍欄框架可以存取以 Nonce 為基礎的不重複 Cookie 與儲存空間分區。

請參閱說明，進一步瞭解圍欄頁框的特性。

圍欄頁框與 iframe 有何差異？

現在，您已瞭解 Fenced Frame 可執行或不執行的動作，現在建議您與現有的 iframe 功能進行比較。

功能	iframe	fencedframe
嵌入內容	是	是
嵌入的內容可存取嵌入內容 DOM	是	否
嵌入結構定義可存取嵌入內容 DOM	是	否
可觀測的屬性，例如 name	是	否
網址 (http://example.com)	是	是 (視用途而定)
瀏覽器管理的不透明來源 (urn:uuid)	否	是
跨網站資料的存取權	否	是 (視用途而定)

為保障隱私，圍欄頁框支援的外部通訊選項較少。

圍欄頁框是否會取代 iframe？

最終，圍欄頁框不會取代 iframe，您就不必再使用。如果同一個頁面需要顯示不同頂層分區的資料，Fenced Frame 就是一種更加私密的框架。

系統會將同網站 iframe (有時稱為同網域 iframe) 視為可信任的內容。

使用圍欄頁框

Fenced Frame 可以與其他 Privacy Sandbox API 搭配使用，在單一頁面中顯示不同儲存空間分區的文件。潛在的 API 目前仍在討論階段。

目前可採用的組合包括：

• 在 TURTLEDOVE API 系列 (這是 Protected Audience API 的基礎) 中，圍欄頁框可使用共用儲存空間的轉換升幅評估功能。
• 另一種方式是允許圍欄頁框設為唯讀或存取未分區儲存空間。

詳情請參閱圍欄頁框用途說明。

範例

如要取得圍欄頁框 config 物件，您必須傳入 resolveToConfig: true 至 Protected Audience API 的 runAdAuction() 呼叫，或共用儲存空間的 selectURL() 呼叫。如果未新增該屬性 (或設為 false)，結果的承諾會解析為只能在 iframe 中使用的 URN。

透過 Protected Audience API 競價取得圍欄頁框設定

const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});

透過共用儲存空間網址選項取得 Fenced Frame 設定

const frameConfig = await sharedStorage.selectURL('operation-name', {
  resolveToConfig: true
});

取得設定後，您可以將它指派給 Fenced Frame 的 config 屬性，以瀏覽頁框至該設定所代表的資源。舊版 Chrome 不支援 resolveToConfig 屬性，因此您仍然必須在瀏覽前確認承諾已解析為 FencedFrameConfig：

將設定設為 fenced frame 屬性

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

詳情請參閱 Fenced Frame 和 Fenced Frame 設定的說明。

標頭

瀏覽器會針對來自圍欄頁框和內嵌 iframe 的要求設定 Sec-Fetch-Dest: fencedframe。

Sec-Fetch-Dest: fencedframe

伺服器必須設定 Supports-Loading-Mode: fenced-frame 回應標頭，才能在圍欄頁框中載入文件。圍欄頁框中的所有 iframe 也必須提供標題。

Supports-Loading-Mode: fenced-frame

共用儲存空間結構定義

您可能想使用「私人匯總」功能，在與嵌入工具的比對內容資料相關聯的圍欄頁框中回報事件層級資料。您可以使用 fencedFrameConfig.setSharedStorageContext() 方法，將部分情境資料 (例如事件 ID) 從嵌入程式傳遞至 Protected Audience API 發起的共用儲存小程式。

在以下範例中，我們將部分資料儲存在嵌入工具頁面中，並將部分資料儲存在共用儲存空間的 Fenced Frame 中。在嵌入工具頁面中，系統會將模擬事件 ID 設為共用儲存空間結構定義。系統會從圍欄頁框傳入影格事件資料。

在嵌入工具頁面中，您可以將結構定義資料設為共用儲存空間結構定義：

const frameConfig = await navigator.runAdAuction({ resolveToConfig: true });

// Data from the embedder that you want to pass to the shared storage worklet
frameConfig.setSharedStorageContext('some-event-id');

const frame = document.createElement('fencedframe');
frame.config = frameConfig;

您可以從圍欄頁框中，將頁框中的事件層級資料傳入共用儲存小程式 (與上述嵌入程式的比對內容資料無關)：

const frameData = {
  // Data available only inside the fenced frame
}

await window.sharedStorage.worklet.addModule('reporting-worklet.js');

await window.sharedStorage.run('send-report', {
  data: {
    frameData
  },
});

您可以從 sharedStorage.context 讀取嵌入程式的背景資訊資訊，以及從 data 物件讀取影格的事件層級資料，然後透過「私密匯總」回報：

class ReportingOperation {
  convertEventIdToBucket(eventId) { ... }
  convertEventPayloadToValue(info) { ... }

  async run(data) {
    // Data from the embedder
    const eventId = sharedStorage.context;

    // Data from the fenced frame
    const eventPayload = data.frameData;

    privateAggregation.sendHistogramReport({
      bucket: convertEventIdToBucket(eventId),
      value: convertEventPayloadToValue(eventPayload)
    });
  }
}

register('send-report', ReportingOperation);

如要進一步瞭解嵌入器在圍欄頁框設定物件中的結構定義，請參閱說明。

試用圍欄頁框

使用 Chrome 標記，在 chrome://flags/#enable-fenced-frames 啟用 Fenced Frame API。

對話方塊中有多個選項。強烈建議您選取*「啟用」*，讓 Chrome 能在新架構推出時自動更新。

其他選項「搭配 ShadowDOM 啟用」和「已啟用多頁架構啟用」選項，可提供只與瀏覽器工程師相關的其他實作策略。目前，「Enable」的運作方式與「啟用 ShadowDOM」相同。日後，「啟用」會對應至「啟用多頁面架構」。

功能偵測

如要判斷是否已定義圍欄影格：

if (window.HTMLFencedFrameElement) {
  // The fenced frame element is defined
}

如何判斷是否可使用 Fenced Frame 設定： js if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) { // The fenced frame config is available }

瀏覽器支援

<fencedframe> 元素仍處於實驗模式，因此目前 Chrome 97 以上版本才支援該元素。目前其他瀏覽器不支援。

互動並提供意見

Fenced Frames 仍在積極討論中，日後可能會有變動。如果您已經試用過這個 API，並提供寶貴意見，我們非常樂意聽聽您的想法。

• GitHub：閱讀說明、提出問題，並追蹤討論內容。
• 開發人員支援：在 Privacy Sandbox 開發人員支援存放區上提問及參與討論。

瞭解詳情

• Chrome 平台狀態
• 將意圖變成原型