<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 功能可以通過權限策略(例如 camerageolocation)控制其可用性的不可用在圍欄頁框內。

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

  • 受保護的受眾 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 物件的內部 contentWidthcontentHeight 屬性設置。在這種情況下,改變 <fencedframe>widthheight 將改變頁面上嵌入容器的大小,但容器內部的文件將被視覺縮放以適應。嵌入文件的報告寬度和高度(即 Window.innerWidthWindow.innerHeight)將保持不變。

無障礙

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

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

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

範例

要設置 <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 角色 applicationdocumentimgnonepresentation
DOM 介面 HTMLFencedFrameElement

規範

Specification
Fenced Frame
# the-fencedframe-element

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fencedframe
Experimental
allow
Experimental
height
Experimental
width
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.

參見