Fenced Frame API

可用性有限

此特性不是基線特性，因為它在一些最廣泛使用的瀏覽器中不起作用。

實驗性： 這是一項實驗性技術
在生產中使用此技術之前，請仔細檢查瀏覽器相容性表格。

警告：此功能目前受到一位瀏覽器供應商的反對。有關詳細資訊，請參閱下文的標準立場部分。

Fenced Frame API 提供了控制嵌入在<fencedframe>元素中的內容的功能。

概念與用法

Web上主要的隱私和安全問題之一是嵌入在<iframe>元素中的內容。歷史上，<iframe>一直被用於設定第三方 Cookie，這些 Cookie 可用於跨站點共享資訊和跟蹤使用者。此外，嵌入在<iframe>中的內容可以與其嵌入的文件進行通訊（例如，使用Window.postMessage()）。

嵌入文件還可以使用指令碼從<iframe>中讀取各種形式的資訊—例如，透過讀取src屬性中的嵌入式URL，您可能獲得大量的跟蹤/指紋識別資料，特別是當它包含URL引數時。<iframe>還可以訪問嵌入上下文的DOM，反之亦然。

大多數現代瀏覽器都在致力於實現儲存分割槽機制，以便 Cookie 資料不再可用於跟蹤（例如，請參閱具有獨立分割槽狀態的 Cookie (CHIPS) 或 Firefox 狀態分割槽）。

<fencedframe>元素旨在解決這個難題的另一部分—它們在形式和功能上都非常類似於<iframe>，除了

<fencedframe>內容與其嵌入的站點之間無法共享通訊。
<fencedframe>可以訪問跨站點資料，但僅限於在非常特定的受控情況下，以保護使用者隱私。
<fencedframe>不能透過常規指令碼進行自由操作或訪問其資料（例如讀取或設定源URL）。<fencedframe>內容只能透過特定API嵌入。
<fencedframe>無法訪問嵌入上下文的DOM，嵌入上下文也無法訪問<fencedframe>的DOM。

有關fenced frames通訊模型的更多資訊，請閱讀嵌入式框架通訊指南。

用例

<fencedframe>由其他API用於嵌入不同型別的跨站點內容或收集資料，以隱私保護的方式滿足不同的用例。其中大多數以前依賴於第三方 Cookie 或其他對隱私不利的機制。

Shared Storage API 在安全環境中提供對未分割槽跨站點資料的訪問，在<fencedframe>中計算和/或顯示結果。例如：
- 廣告商可以衡量廣告的覆蓋範圍，或者根據使用者在其他網站上已看到的內容投放後續廣告。
- 開發人員可以進行 A/B 測試，根據使用者所屬的組或已看到每個變體的使用者數量向用戶展示變體。
- 企業可以根據使用者在其他網站上看到的內容來定製使用者體驗。例如，如果使用者已購買會員資格，您可能不希望在您的其他屬性上向他們展示會員註冊廣告。
Protected Audience API 允許開發人員實現基於興趣組的廣告，即再營銷和自定義受眾用例。它可以評估廣告位的多個出價，並在<fencedframe>中顯示獲勝的廣告。
Private Aggregation API 可以從<fencedframe>（源自共享儲存或 Protected Audience API）收集資料並建立聚合報告。

`<fencedframe>`是如何工作的？

如上所述，您無法透過常規指令碼直接控制嵌入在<fencedframe>中的內容。

要設定將在<fencedframe>中顯示的內容，一個利用的API（例如Protected Audience或Shared Storage）將生成一個FencedFrameConfig物件，然後透過JavaScript將其設定為<fencedframe>的HTMLFencedFrameElement.config屬性的值。

以下示例從 Protected Audience API 的廣告競價中獲取一個 FencedFrameConfig，然後用於在 <fencedframe> 中顯示中標廣告

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

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

必須在runAdAuction()呼叫中傳遞resolveToConfig: true以獲取FencedFrameConfig物件。如果resolveToConfig設定為false，則生成的Promise將解析為一個不透明的URN（例如urn:uuid:c36973b5-e5d9-de59-e4c4-364f137b3c7a），該URN只能在<iframe>中使用。

無論哪種方式，瀏覽器都會儲存一個包含要嵌入內容的的URL—對映到不透明的URN，或者FencedFrameConfig的內部url屬性。嵌入上下文中執行的JavaScript無法讀取URL值。

注意：為了方便將現有實現遷移到隱私沙盒API，支援在<iframe>中使用不透明URN。此支援是臨時的，並且隨著採用率的增長將在未來被刪除。

注意：FencedFrameConfig有一個setSharedStorageContext()方法，用於將嵌入文件中的資料傳遞到<fencedframe>的共享儲存中。例如，它可以在<fencedframe>的Worklet中訪問，並用於生成報告。有關更多詳細資訊，請參閱Shared Storage API。

Sec-Fetch-Dest: fencedframe

伺服器必須為任何打算載入到<fencedframe>中的文件，或嵌入在<fencedframe>中的<iframe>設定一個值為fenced-frame的Supports-Loading-Mode響應頭部。

http

Supports-Loading-Mode: fenced-frame

fenced frames對HTTP頭部的其他影響如下：

使用者代理客戶端提示（User-agent client hints）在fenced frames內不可用，因為它們依賴於許可權策略的委託，這可能被用於洩露資料。
從fenced frames內部開啟的任何新瀏覽上下文都將強制執行嚴格的Cross-Origin-Opener-Policy設定，否則可能用於向其他源洩露資訊。從fenced frame內部開啟的任何新視窗都將設定rel="noopener"和Cross-Origin-Opener-Policy: same-origin，以確保Window.opener返回null，並將其置於自己的瀏覽上下文組中。
添加了Content-Security-Policy: fenced-frame-src，用於指定載入到<fencedframe>元素中的巢狀瀏覽上下文的有效來源。
為了緩解隱私問題，fenced frames不能繼承Content-Security-Policy: sandbox的自定義設定。要載入fenced frame，您需要指定沒有sandbox CSP（這意味著以下值），或者指定以下沙盒值：
- allow-same-origin
- allow-forms
- allow-scripts
- allow-popups
- allow-popups-to-escape-sandbox
- allow-top-navigation-by-user-activation

`beforeunload`和`unload`事件

beforeunload和unload事件在fenced frames上不會觸發，因為它們可以透過頁面刪除時間戳的形式洩露資訊。實現旨在儘可能消除潛在的資料洩露。

介面

FencedFrameConfig: 代表<fencedframe>的導航，即將在其中顯示的內容。FencedFrameConfig是從Protected Audience API等源返回的，並設定為HTMLFencedFrameElement.config的值。
Fence: 包含幾個與fenced frame功能相關的函式。僅對嵌入在<fencedframe>中的文件可用。
HTMLFencedFrameElement: 在JavaScript中代表一個<fencedframe>元素，並提供配置它的屬性。

其他介面的擴充套件

Navigator.deprecatedReplaceInURN(): 替換給定不透明URN或FencedFrameConfig內部url屬性對應的對映URL中的指定字串。
Window.fence: 返回當前文件上下文的Fence物件例項。僅對嵌入在<fencedframe>中的文件可用。