HTMLFencedFrameElement: config property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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.

Value

The value of config is initially null.

When its value is set to a FencedFrameConfig object instance, the FencedFrameConfig's internal properties (for example mappedURL) determine what is loaded inside the associated <fencedframe>. In addition:

  • The navigation type will be "replace" (see NavigateEvent.navigationType), meaning that the current history entry is replaced with the new entry, rather adding a new history entry for it.
  • The navigation's Referrer-Policy is set to "no-referrer".

Examples

To set what content will be shown in a <fencedframe>, a utilizing API (such as Protected Audience or Shared Storage) generates a FencedFrameConfig object, which is then set as the value of the <fencedframe>'s config property.

The following example gets a FencedFrameConfig from a Protected Audience API's ad auction, which is then used to display the winning ad in a <fencedframe>:

js
const frameConfig = await navigator.runAdAuction({
  // … auction configuration
  resolveToConfig: true,
});

const frame = document.createElement("fencedframe");
frame.config = frameConfig;

Note: resolveToConfig: true must be passed in to the runAdAuction() call to obtain a FencedFrameConfig object. If it is not set, the resulting Promise will resolve to a URN that can only be used in an <iframe>.

Specifications

Specification
Fenced Frame
# dom-htmlfencedframeelement-config

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
config
Experimental
Chrome – Full support
Chrome 126 (Release date: 2024-06-11)
footnote Full support
Edge – Full support
Edge 126 (Release date: 2024-06-13)
footnote Full support
Firefox – No support
Firefox
footnote No support
Opera – Full support
Opera 112 (Release date: 2024-07-11)
footnote Full support
Safari – No support
Safari
footnote No support
Chrome Android – Full support
Chrome Android 126 (Release date: 2024-06-11)
footnote Full support
Firefox for Android – No support
Firefox for Android
footnote No support
Opera Android – Full support
Opera Android 83 (Release date: 2024-06-25)
footnote Full support
Safari on iOS – No support
Safari on iOS
footnote No support
Samsung Internet – Full support
Samsung Internet 28 (Release date: 2025-04-02)
footnote Full support
WebView Android – Full support
WebView Android 126 (Release date: 2024-06-11)
footnote Full support
WebView on iOS – No support
WebView on iOS
footnote No support

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.

See also