<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。
屬性
可用於圍欄頁框權限策略
從頂層上下文委派給圍欄頁框的允許和拒絕功能的權限策略可以用作通信通道,因此構成一種隱私威脅。因此,標準 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>
中顯示獲勝的廣告:
<fencedframe width="640" height="320"></fencedframe>
const frameConfig = await navigator.runAdAuction({
// ...auction configuration
resolveToConfig: true,
});
const frame = document.querySelector("fencedframe");
frame.config = frameConfig;
無障礙議題
使用輔助技術,如屏幕閱讀器的人,可以使用 <fencedframe>
上的 title
屬性 來標記其內容。標題的值應該簡要描述嵌入的內容:
<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
參見
- 圍欄頁框 API
- 在 developers.google.com 上的圍欄頁框
- 在 developers.google.com 上的隱私沙箱