coderef

<fencedframe>Limited availability

The &#x3C;fencedframe> element embeds another HTML page into the current page in a more secure and privacy-preserving way than &#x3C;iframe> elements.

Not yet supported in all major browsers — check the table and provide a fallback.

Discouraged: Following the announcement that Chrome will maintain its current approach to third-party cookies, Chrome decided to withdraw certain Privacy Sandbox features including the <fencedframe> element and related APIs.

How to use ↓Compare browsers

Browser support

DesktopChrome
✕Not supportedup to 155
Current: 155
Edge
✕Not supportedup to 154
Current: 154
Firefox
✕Not supportedup to 157
Current: 157
Safari
✕Not supportedup to 27
Current: 27
MobileChrome Android
✕Not supportedup to 155
Current: 155
Firefox Android
✕Not supportedup to 157
Current: 157
Safari iOS
✕Not supportedup to 27
Current: 27

How to use

Not supported in Chrome, Edge, Firefox, Safari, Chrome Android, Firefox Android, Safari iOS. Use feature detection below and provide a fallback (or a polyfill) for those browsers.

Example

Full syntax and examples are on MDN: Fence.

Feature detection

JS · check before using
const el = document.createElement("fencedframe");
if (!(el instanceof HTMLUnknownElement)) {
  // <fencedframe> is supported
}

Documentation (MDN)

Specification

Sub-features

Support for each part of the feature (21). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
Fence126126✕✕126✕✕
Fence.getNestedConfigs126126✕✕126✕✕
Fence.reportEvent126126✕✕126✕✕
Fence.setReportEventDataForAutomaticBeacons126126✕✕126✕✕
FencedFrameConfig126126✕✕126✕✕
FencedFrameConfig.setSharedStorageContext✕✕✕✕✕✕✕
HTMLFencedFrameElement126126✕✕126✕✕
HTMLFencedFrameElement.allow126126✕✕126✕✕
HTMLFencedFrameElement.config126126✕✕126✕✕
HTMLFencedFrameElement.height126126✕✕126✕✕
HTMLFencedFrameElement.sandbox126126✕✕126✕✕
HTMLFencedFrameElement.width126126✕✕126✕✕
Navigator.deprecatedReplaceInURN128128✕✕128✕✕
Window.fence126126✕✕126✕✕
a.target.unfencedTop126126✕✕126✕✕
fencedframe126126✕✕126✕✕
fencedframe.allow126126✕✕126✕✕
fencedframe.height126126✕✕126✕✕
fencedframe.width126126✕✕126✕✕
http.headers.Content-Security-Policy.fenced-frame-src126126✕✕126✕✕
Show 1 more
Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
http.headers.Sec-Fetch-Dest.fencedframe126126✕✕126✕✕