<fencedframe>
The <fencedframe> element embeds another HTML page into the current page in a more secure and privacy-preserving way than <iframe> elements. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Overview
The <fencedframe> element embeds another HTML page into the current page in a more secure and privacy-preserving way than <iframe> elements. It is most useful when native HTML semantics or browser capabilities can replace custom implementation work.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
<fencedframe> Experimental | 126 | 126 | | | 126 | |
| HTML attribute | ||||||
allow Experimental | 126 | 126 | | | 126 | |
height Experimental | 126 | 126 | | | 126 | |
width Experimental | 126 | 126 | | | 126 | |
| DOM API | ||||||
Fence Experimental The Fence interface of the Fenced Frame API contains several functions relevant to fencedframe functionality. | 126 | 126 | | | 126 | |
getNestedConfigs Experimental The getNestedConfigs() method of the Fence interface returns the FencedFrameConfigs loaded into s embedded inside the current . | 126 | 126 | | | 126 | |
reportEvent Experimental The reportEvent() method of the Fence interface triggers the submission of report data via a beacon to one or more specific URLs registered via the InterestGroupReportingScriptRunnerGlobalScope.registerAdBeacon method of the Protected Audience API, for the purpose of collecting ad auction results. | 126 | 126 | | | 126 | |
setReportEventDataForAutomaticBeacons Experimental The setReportEventDataForAutomaticBeacons() method of the Fence interface specifies event data that will be sent when a navigation occurs inside a fencedframe. This data will be sent via an automatic beacon to one or more specific URLs registered via the InterestGroupReportingScriptRunnerGlobalScope.registerAdBeacon method of the Protected Audience API, for… | 126 | 126 | | | 126 | |
FencedFrameConfig Experimental The FencedFrameConfig interface represents the navigation of a fencedframe, i.e., what content will be displayed in it. | 126 | 126 | | | 126 | |
setSharedStorageContext Experimental The setSharedStorageContext() method of the FencedFrameConfig interface passes in contextual data from the embedding document to the 's shared storage. | 126 | 126 | | | 126 | |
HTMLFencedFrameElement Experimental The HTMLFencedFrameElement interface represents a fencedframe element in JavaScript and provides configuration properties. | 126 | 126 | | | 126 | |
allow Experimental The allow property of the HTMLFencedFrameElement gets and sets the value of the corresponding fencedframe allow attribute, which represents a Permissions Policy applied to the content when it is first embedded. | 126 | 126 | | | 126 | |
config Experimental The config property of the HTMLFencedFrameElement contains a FencedFrameConfig object, which represents the navigation of a fencedframe, i.e., what content will be displayed in it. A FencedFrameConfig is returned from a source such as the Protected Audience API. | 126 | 126 | | | 126 | |
height Experimental The height property of the HTMLFencedFrameElement gets and sets the value of the corresponding fencedframe height attribute, which specifies the height of the element. | 126 | 126 | | | 126 | |
sandbox Experimental | 126 | 126 | | | 126 | |
width Experimental The width property of the HTMLFencedFrameElement gets and sets the value of the corresponding fencedframe width attribute, which specifies the width of the element. | 126 | 126 | | | 126 | |
deprecatedReplaceInURN Experimental The deprecatedReplaceInURN() method of the Navigator interface substitutes specified strings inside the mapped URL corresponding to a given opaque URN or FencedFrameConfig's internal url property. | 128 | 128 | | | 128 | |
fence Experimental The fence read-only property of the Window interface returns a Fence object instance for the current document context. | 126 | 126 | | | 126 | |
| Other | ||||||
html.elements.a.target.unfencedTop Experimental `_unfencedTop` value | 126 | 126 | | | 126 | |
| The HTTP Content-Security-Policy (CSP) fenced-frame-src directive specifies valid sources for nested browsing contexts loaded into fencedframe elements. | 126 | 126 | | | 126 | |
http.headers.Sec-Fetch-Dest.fencedframe Experimental `fencedframe` value | 126 | 126 | | | 126 | |
Syntax
<fencedframe
width="320" height="50"
mode="opaque-ads">
</fencedframe>Live demo
Privacy-preserving embed idea
Describe fenced frames as a more isolated embedding model for privacy-sensitive cases.
Isolation goal
Explain that the feature aims to reduce host-page knowledge about embedded ad or measurement data.
Adoption note
Expect experimental support and platform restrictions when exploring fenced frames.
Use cases
Use <fencedframe>
Use <fencedframe> when standard HTML needs a more specific platform feature, semantic signal, or browser capability.
Handle edge cases
Apply <fencedframe> to solve a focused requirement without redesigning the whole page architecture.
Cautions
- Test <fencedframe> in your target browsers and input environments before depending on it as a primary behavior.
- Provide a fallback path or acceptable degradation strategy when support is still limited.
Accessibility
- Make sure <fencedframe> supports the intended task without making the page harder to perceive, understand, or operate.
Related links
Powered by web-features