<fencedframe>: 圍欄框架元素

實驗性： 這是一個 實驗性技術
在生產環境中使用之前，請仔細檢視 瀏覽器相容性表。

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

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

<fencedframe> 元素是一種 <iframe>，內建了更多原生隱私功能。它解決了 <iframe> 的缺點，例如對第三方 cookie 的依賴和其他隱私風險。有關更多詳細資訊，請參閱 圍欄框架 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()）遍歷邊界是被禁止的 - 惡意指令碼可以使用一系列此類呼叫跨邊界洩露推斷資訊。

定位和縮放

作為一個 替換元素，<fencedframe> 允許使用 object-position 屬性調整嵌入文件在其框內的位置。

注意： object-fit 屬性對 <fencedframe> 元素無效。

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

可訪問性

使用螢幕閱讀器等輔助技術的使用者可以使用 <fencedframe> 上的 title 屬性 來標記其內容。標題的值應簡潔地描述嵌入的內容。

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

如果沒有此標題，他們必須導航到 <iframe> 內以確定其嵌入內容是什麼。這種上下文切換可能會令人困惑且耗時，尤其是在頁面包含多個 <iframe> 以及/或者嵌入包含影片或音訊等互動式內容的情況下。

示例

要設定在 <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。

技術摘要

內容類別 流內容、短語內容、嵌入內容、互動式內容、可觸內容。
允許的內容 無。
標籤省略 無，起始標籤和結束標籤都是必需的。
允許的父元素 任何接受嵌入內容的元素。
隱式 ARIA 角色 無對應角色
允許的 ARIA 角色 application、document、img、none、presentation
DOM 介面 HTMLFencedFrameElement

規範

規範
封閉框架
# the-fencedframe-element

瀏覽器相容性

BCD 表格只在瀏覽器中載入

另請參閱