<fencedframe>：圍欄頁框元素

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

實驗性質: 這是一個實驗中的功能
此功能在某些瀏覽器尚在開發中，請參考兼容表格以得到不同瀏覽器用的前輟。

<fencedframe> HTML 元素代表了一個巢狀的瀏覽上下文，將另一個 HTML 頁面嵌入到當前頁面中。<fencedframe> 在形式和功能上與 <iframe> 元素非常相似，不同之處在於：

  • <fencedframe> 內容和其嵌入站點之間的通信受限。
  • <fencedframe> 可以訪問跨站點數據，但只有在一個非常特定的一組受控情況下才能保護用戶隱私。
  • <fencedframe> 無法通過常規腳本（例如讀取或設置源 URL）來操控或訪問其數據。<fencedframe> 內容只能通過特定的 API 來嵌入。
  • <fencedframe> 無法訪問嵌入上下文的 DOM，嵌入上下文也無法訪問 <fencedframe> 的 DOM。

<fencedframe> 元素是一種具有更多本地隱私功能的 <iframe>。它解決了 <iframe> 的一些缺陷，例如對第三方 cookie 的依賴和其他隱私風險。詳細信息請參見 Fenced frame API。

屬性

該元素包括全域屬性。

allow

為 <fencedframe> 指定一個權限策略，該策略基於請求的原始位置定義了哪些功能對 <fencedframe> 可用。有關可以通過設置在圍欄頁框上的策略來控制哪些功能的更多詳細信息，請參見可用於圍欄頁框權限策略。

height

一個無單位的整數，表示圍欄頁框的高度，以 CSS 像素為單位。默認值為 150。

width

一個無單位的整數，表示圍欄頁框的寬度，以 CSS 像素為單位。默認值為 300。

可用於圍欄頁框權限策略

從頂層上下文委派給圍欄頁框的允許和拒絕功能的權限策略可以用作通信通道，因此構成一種隱私威脅。因此，標準 Web 功能可以通過權限策略（例如 camera 或 geolocation）控制其可用性的不可用在圍欄頁框內。

可以通過策略在圍欄頁框內啟用的唯一功能是專為在圍欄頁框內使用而設計的特定功能：

  • 受保護的受眾 API
    • attribution-reporting
    • private-aggregation
    • shared-storage
    • shared-storage-select-url
  • 共享存儲 API
    • attribution-reporting
    • private-aggregation
    • shared-storage
    • shared-storage-select-url

目前，在圍欄頁框內始終啟用這些功能。將來，哪些功能被啟用將可以使用 <fencedframe> 的 allow 屬性來控制。通過這種方式阻止隱私沙箱功能還將阻止圍欄頁框加載——完全沒有通信通道。

跨越圍欄頁框邊界進行對焦

將文檔的活動焦點從圍欄頁框邊界（即從框框外的元素到內部元素，或反之）移動的能力受到限制。用戶啟動的操作，如單擊或切換，可以這樣做，因為那裡沒有指紋識別風險。

然而，試圖通過 API 調用（例如 HTMLElement.focus()）是被禁止的——惡意腳本可以使用一系列這樣的調用來跨越邊界洩露推斷的信息。

定位和縮放

作為替換元素，可以使用 object-position 和 object-fit 屬性來調整 <iframe> 元素框中嵌入文檔的位置、對齊和縮放。

嵌入內容的大小可以由 <fencedframe> 的 config 對象的內部 contentWidth 和 contentHeight 屬性設置。在這種情況下，改變 <fencedframe> 的 width 或 height 將改變頁面上嵌入容器的大小，但容器內部的文檔將被視覺縮放以適應。嵌入文檔的報告寬度和高度（即 Window.innerWidth 和 Window.innerHeight）將保持不變。

範例

要設置 <fencedframe> 中顯示的內容，需要使用 API（例如受保護的受眾或共享存儲）生成一個 FencedFrameConfig 對象，然後將其設置為 <fencedframe> 的 config 屬性的值。

以下範例從受保護的受眾 API 的廣告拍賣中獲取了一個 FencedFrameConfig，然後將其用於在 <fencedframe> 中顯示獲勝的廣告：

html
<fencedframe width="640" height="320"></fencedframe>
js
const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true,
});

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

備註：必須在 runAdAuction() 調用中傳遞 resolveToConfig: true，以獲取一個 FencedFrameConfig 對象。如果未設置，則生成的 Promise 將解析為一個只能在 <iframe> 中使用的 URN。

無障礙議題

使用輔助技術，如屏幕閱讀器的人，可以使用 <fencedframe> 上的 title 屬性 來標記其內容。標題的值應該簡要描述嵌入的內容：

html
<fencedframe
  title="Advertisement for new Log. From Blammo!"
  width="640"
  height="320"></fencedframe>

如果沒有此標題，他們必須進入 <iframe> 才能確定其嵌入的內容。這種上下文轉換可能會令人困惑和耗時，特別是對於包含多個 <iframe> 的頁面和/或嵌入包含互動內容（如影片或音頻）的情況。

技術摘要

內容類型 流內容、段落型內容、嵌入型內容、互動型內容、捫及內容。
允許的內容 無。
標籤省略 不允許，開始和結束標籤都是必須的。
允許的父元素 任何接受嵌入型內容的元素。
隱含的 ARIA 角色 沒有相對應的角色
允許的 ARIA 角色 application、document、 img、none、 presentation
DOM 介面 HTMLFencedFrameElement

規範

Specification
Fenced Frame
# the-fencedframe-element

瀏覽器相容性

BCD tables only load in the browser

參見