Fenced Frame 總覽

在網頁上安全地嵌入內容，不需分享跨網站資料。

導入狀態

本文將說明新的 HTML 元素：<fencedframe>。

• Chrome 正式版。
• Chrome 平台狀態。

為什麼需要設有圍欄的影格？

Fenced Frame (<fencedframe>) 是用於嵌入內容的 HTML 元素，類似於 iframe。與 iframe 不同，Fenced Frame 會限制與嵌入環境的通訊，允許框架存取跨網站資料，但不會與嵌入環境共用這些資料。部分 Privacy Sandbox API 可能需要選取要在 Fenced Frames 中算繪的文件。

同樣地，嵌入情境中的任何第一方資料都無法與設有圍欄的影格共用。

舉例來說，如果 news.example (嵌入環境) 在設有安全範圍的影格中嵌入 shoes.example 的廣告，news.example 就無法從 shoes.example 廣告中擷取資料，shoes.example 也無法從 news.example 瞭解第一方資料。

透過儲存空間分區功能強化跨網站隱私權

瀏覽網頁時，您可能在某個網站上查看產品，然後在完全不同的網站上看到這些產品的廣告。

目前，這項廣告技術主要是透過追蹤技術達成，這類技術會使用第三方 Cookie 在網站間分享資訊。

Chrome 正在開發儲存空間分割功能，可依網站分隔瀏覽器儲存空間。如果沒有分區，假設 news.example 內嵌了 shoes.example 的 iframe，且該 iframe 將值儲存到儲存空間，則該值可從 shoes.example 網站讀取。儲存空間經過分割後，跨網站的 iframe 將無法再共用儲存空間，因此 shoes.example 無法存取 iframe 儲存的資訊。如果 iframe 是從 *.shoes.example 提供，並嵌入 *.shoes.example，瀏覽器儲存空間會共用，因為這兩個網域視為同網站。

儲存空間分割功能將套用至標準儲存空間 API，包括 LocalStorage、IndexedDB 和 Cookie。在分區世界中，第一方儲存空間的資訊洩漏情況將大幅減少。

使用跨網站資料

圍欄架構是 Privacy Sandbox 功能，建議頂層網站分割資料。許多 Privacy Sandbox 提案和 API 的目標，都是在不使用第三方 Cookie 或其他追蹤機制的情況下，滿足跨網站用途。例如：

• Protected Audience API 可讓您以保護隱私權的方式，放送按照興趣顯示的廣告。
• Shared Storage 可在安全環境中存取未分區的跨網站資料。

圍欄架構的設計宗旨是搭配 Protected Audience API 使用。導入 Protected Audience API 後，使用者的興趣會登錄在廣告主的網站興趣群組中，連同使用者可能感興趣的廣告。接著，在另一個網站 (稱為「發布商」)，系統會對相關興趣群組中註冊的廣告進行競價，並在受限框架中顯示勝出的廣告。

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

有了設有圍欄的影格，發布商就能顯示符合訪客興趣的廣告，但只有影格中的廣告主知道 src 和興趣群組。發布者無法存取這項資訊。

圍欄架構的運作方式

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

Fenced Frame 無法使用 postMessage 與嵌入器通訊。不過，設有圍欄的影格可以在設有圍欄的影格內使用 iframe 的 postMessage。

封閉框架會以其他方式與發布商隔離。舉例來說，發布商無法存取設有圍欄的影格內的 DOM，設有圍欄的影格也無法存取發布商的 DOM。此外，封鎖框架不支援屬性 (例如 name)，發布商可將這些屬性設為任何值並加以觀察。

設有安全防護的影格行為類似頂層瀏覽內容 (例如瀏覽器分頁)。雖然某些用途的設限框架 (例如按照興趣放送的再行銷廣告) 可能包含跨網站資料 (例如 Protected Audience API 興趣群組)，但框架無法存取未經區隔的儲存空間或 Cookie。設有圍欄的影格可以存取以隨機數為準的不重複 Cookie 和儲存空間分割區。

如要進一步瞭解設有圍欄的影格特性，請參閱說明文件。

圍籬架構與 iframe 有何不同？

現在您已瞭解設有圍欄的影格可執行的動作和限制，不妨與現有的 iframe 功能比較。

為維護隱私權，設有圍欄的影格支援的外部通訊選項較少。

圍欄架構會取代 iframe 嗎？

最終，設有圍欄的影格不會取代 iframe，您也不必使用這些影格。 如果需要在同一網頁上顯示來自不同頂層分割區的資料，建議使用設有圍欄的影格，因為這類影格的隱私權保護機制更完善。

同網站 iframe (有時稱為友善 iframe) 會被視為可信任的內容。

使用圍欄頁框

圍欄架構會搭配其他 Privacy Sandbox API 運作，在單一頁面中顯示來自不同儲存空間分割區的文件。我們正在討論可能的 API。

這個組合的目前候選人包括：

• 在 TURTLEDOVE API 系列 (這是 Protected Audience API 的基礎) 中，設有圍欄的影格可使用 Shared Storage 進行轉換提升幅度評估。
• 另一種做法是允許圍欄架構唯讀或存取未經分割的儲存空間。

詳情請參閱圍欄架構使用案例說明。

範例

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

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

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

取得設定後，您可以將其指派給設有圍欄的影格的 config 屬性，將影格導覽至設定所代表的資源。舊版 Chrome 不支援 resolveToConfig 屬性，因此您仍須確認 Promise 已解析為 FencedFrameConfig，才能進行導覽：

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

詳情請參閱「設有圍欄的影格」和「設有圍欄的影格設定」說明文章。

標頭

瀏覽器會為從設有圍欄的框架和內嵌在設有圍欄的框架中的 iframe 發出的要求設定 Sec-Fetch-Dest: fencedframe。

Sec-Fetch-Dest: fencedframe

伺服器必須設定 Supports-Loading-Mode: fenced-frame 回應標頭，才能在封閉頁框中載入文件。封閉頁框內的任何 iframe 也必須有標頭。

Supports-Loading-Mode: fenced-frame

共用儲存空間環境

您可能想使用 Private Aggregation，在與嵌入器內容資料相關聯的受限框架中，回報事件層級資料。使用 fencedFrameConfig.setSharedStorageContext() 方法，即可將事件 ID 等脈絡資料，從嵌入器傳遞至 Protected Audience API 啟動的 Shared Storage Worklet。

在下列範例中，我們會在共用儲存空間中儲存嵌入器頁面上的部分資料，以及設有安全防護的影格中的部分資料。在嵌入器頁面中，模擬事件 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;

在設有圍欄的影格中，您可以將影格中的事件層級資料傳遞至共用儲存空間 Worklet (與上述嵌入者的脈絡資料無關)：

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」和「啟用多頁架構」提供不同的實作策略，僅適用於瀏覽器工程師。目前「啟用」的運作方式與「啟用並使用 Shadow DOM」相同。日後「啟用」會對應至「啟用並採用多頁面架構」。

特徵偵測

如要判斷是否已定義設有圍欄的影格，請按照下列步驟操作：

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

如要判斷是否可使用設有圍欄的影格設定，請執行下列操作：

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
   // The fenced frame config is available
}

瀏覽器支援

• MDN
• Chrome 平台狀態

參與討論及分享意見

Fenced Frames 目前仍在討論階段，日後可能會有變動。如果您試用過這項 API，歡迎提供意見。

• GitHub：請參閱說明、提出問題，並追蹤討論。

瞭解詳情

• Chrome 平台狀態
• Blink Intent to Prototype