This element includes theglobal attributes.

allowExperimental

Specifies aPermissions Policy for the<fencedframe>, which defines what features are available to the<fencedframe> based on the origin of the request. SeePermissions policies available to fenced frames for more details of which features can be controlled via a policy set on a fenced frame.

heightExperimental

A unitless integer representing the height of the fenced frame in CSS pixels. The default is150.

widthExperimental

A unitless integer representing the width of the fenced frame in CSS pixels. The default is300.

Permissions delegated from the top-level context to a fenced frame for allowing and denying features could be used as a communication channel, so constitute a privacy threat. As a result, standard web features that can have their availability controlled viaPermissions Policy (for example,camera orgeolocation) arenot available within fenced frames.

The only features that can be enabled by a policy inside fenced frames are the specific features designed to be used inside fenced frames:

• Protected Audience API
  • attribution-reporting
  • private-aggregation
  • shared-storage
  • shared-storage-select-url
• Shared Storage API
  • attribution-reporting
  • private-aggregation
  • shared-storage
  • shared-storage-select-url

Currently these are always enabled inside fenced frames. In the future, which ones are enabled will be controllable using the<fencedframe>allow attribute. Blocking privacy sandbox features in this manner will also block the fenced frame from loading — there will be no communication channel at all.

The ability of the document's active focus to be moved across fenced frame boundaries (i.e., from an element outside the fenced frame to one inside, or vice versa) is limited. User-initiated actions such as a click or a tab can do so, as there is no fingerprinting risk there.

However, trying to traverse the boundary via an API call such asHTMLElement.focus() is prohibited — a malicious script could use a series of such calls to leak inferred information across the boundary.

Being areplaced element, the<fencedframe> allows the position of the embedded document within its box to be adjusted using theobject-position property.

The size of the embedded content may be set by internalcontentWidth andcontentHeight properties of the<fencedframe>'sconfig object. In such cases, changing thewidth orheight of the<fencedframe> will change the size of the embedded container on the page, but the document inside the container will be visually scaled to fit. The reported width and height of the embedded document (i.e.,Window.innerWidth andWindow.innerHeight) will be unchanged.

People navigating with assistive technology, such as a screen reader, can use thetitle attribute on a<fencedframe> to label its content. The title's value should concisely describe the embedded content:

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

Without this title, they have to navigate into the<fencedframe> to determine what its embedded content is. This context shift can be confusing and time-consuming, especially for pages with multiple<fencedframe>s and/or if embeds contain interactive content like video or audio.

To set what content will be shown in a<fencedframe>, a utilizing API (such asProtected Audience orShared Storage) generates aFencedFrameConfig object, which is then set as the value of the<fencedframe>'sconfig property.

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

<fencedframe width="640" height="320"></fencedframe>

const frameConfig = await navigator.runAdAuction({  // … auction configuration  resolveToConfig: true,});const frame = document.querySelector("fencedframe");frame.config = frameConfig;

• Fenced Frame API
• Fenced frames on privacysandbox.google.com
• The Privacy Sandbox on privacysandbox.google.com