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 不同 允許框架存取跨網站 但的資料不會與嵌入內容分享部分 Privacy Sandbox API 可能需要特定文件才能在圍欄頁框中算繪。

同理，嵌入環境中的任何第一方資料也無法分享給 形成圍欄

舉例來說，假設 news.example (嵌入內容) 從以下位置嵌入廣告： shoes.example。「news.example」無法從以下來源竊取資料： 「shoes.example」廣告，以及「shoes.example」無法從 news.example。

利用儲存空間分區強化跨網站隱私

或許您在瀏覽網路時 可能在某個網站上瀏覽過產品 之後會看到完全不同網站上的廣告

如今，這項廣告技術主要是透過追蹤來達成 該技術會使用第三方 Cookie 跨網站分享資訊。這個 是 Chrome 努力邁向階段的技術 出局。 並替換為更多隱私權保護變化版本

Chrome 的工作是儲存空間 分區 可分隔每個網站的瀏覽器儲存空間。目前，如果 iframe 是由 shoes.example 提供 嵌入 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 競價或共用儲存空間的網址選取作業傳回。接著，設定物件會設為 Fenced frame 元素上的 config 屬性。這與 iframe 是網址或不透明 URN 指派給 src 屬性的 iframe。FencedFrameConfig 物件具有唯讀 url 屬性；不過，由於目前用途需要隱藏內部資源的實際網址，因此這個屬性會在讀取時傳回 opaque 字串。

Fenced Frame 無法使用 postMessage 與嵌入器通訊。然而，Fenced Frame 可以在 Fenced 頁框中使用包含 iframe 的 postMessage。

Fenced Frame 會以其他方式與發布商區隔。例如 發布商就無法存取圍欄頁框中的 DOM，而 圍欄頁框無法存取發布者的 DOM。此外，像 name：可設為 但不適用於圍欄頁框。

Fenced Frame 的運作方式類似於頂層瀏覽 背景資訊 (例如瀏覽器分頁)。雖然在某些使用案例中採用圍欄框架 (例如 opaque-ads) 可包含跨網站資料 (例如 Protected Audience API 興趣) 群組)，框架將無法存取未分區的儲存空間或 Cookie。一個 opaque-ads 個圍欄頁框可以存取不重複的 Nonce Cookie 和儲存空間

如要進一步瞭解圍欄和圍欄的特性，請參閱 說明。

圍欄頁框和 iframe 有何差異？

現在您已瞭解圍欄影格的精確度和無法運作了，接下來您可以比較 與現有 iframe 功能的差異

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

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

圍欄頁框會取代 iframe 嗎？

最終，Fenced Frame 並不會取代 iframe，您也無法使用這種頁框。 如果從 Fenced Frame 不同頂層分區必須顯示於相同頁面。

同網站 iframe (有時也稱為同網域 iframe) 即視為可信任 內容。

使用圍欄頁框

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

目前的組合包括：

• 從 TURTLEDOVE API 系列 (也就是 但對於 Protected Audience API 的基準，圍欄架構可與轉換升幅搭配使用 成效評估 透過共用儲存空間存取儲存空間
• 另一個選項是 唯讀 或存取未分區 如果 30 天內讀取資料

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

範例

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

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

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

從「共用儲存空間網址」選項取得圍欄頁框設定

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 回應標頭，才能將文件載入圍欄頁框。Fenced 頁框中的任何 iframe 也都必須包含 標頭。

Supports-Loading-Mode: fenced-frame

共用儲存空間結構定義

如要回報與嵌入器中比對內容資料相關聯的圍欄頁框事件層級資料，建議使用私人匯總功能。使用 fencedFrameConfig.setSharedStorageContext() 方法時，您可以將一些比對內容資料 (例如事件 ID) 從嵌入器傳遞到 Protected Audience API 啟動的共用儲存空間工作程式。

在以下範例中，我們會儲存嵌入器網頁上的部分資料，以及共用儲存空間中透過圍欄框架取得的部分資料。在嵌入頁面中，將模擬事件 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.contributeToHistogram({
      bucket: convertEventIdToBucket(eventId),
      value: convertEventPayloadToValue(eventPayload)
    });
  }
}

register('send-report', ReportingOperation);

如要進一步瞭解圍欄頁框設定物件中的嵌入程式背景資訊，請參閱說明。

試用圍欄頁框

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

對話方塊中有多個選項，強烈建議您選取 *啟用*：允許 Chrome 自動更新至新架構 及時啟用。

其他選項搭配 ShadowDOM和啟用 網頁架構提供不同的導入策略， 與瀏覽器工程師相關目前「啟用」的運作方式與 透過 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 平台狀態
• 將意圖閃爍 原型設計