TheFencedFrameConfig interface represents the navigation of a<fencedframe>, i.e., what content will be displayed in it.

FencedFrameConfig objects cannot be constructed manually via JavaScript. They are returned from a source such as theProtected Audience API and set as the value ofHTMLFencedFrameElement.config.

AFencedFrameConfig object instance has an exposed method, but it also maps to internal config information containing opaque properties not accessible from JavaScript. This includes information such as the source of the loaded content and interest groups for advertising purposes. It is key to how fenced frames help to implement key use cases while respecting user privacy.

Instance methods

setSharedStorageContext()Experimental

Passes in data from the embedding document to the<fencedframe>'s shared storage.

Examples

Basic usage

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>:

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

Passing contextual data viasetSharedStorageContext()

You can use thePrivate Aggregation API to create reports that combine event-level data inside fenced frames with contextual data from the embedding document.setSharedStorageContext() can be used to pass contextual data from the embedder to shared storage worklets initiated by theProtected Audience API.

In the following example, we store data from both the embedding page and the fenced frame inshared storage.

In the embedding page, we will set a mock event ID as the shared storage context usingsetSharedStorageContext():

const frameConfig = await navigator.runAdAuction({ resolveToConfig: true });// Data from the embedder that you want to pass to the shared storage workletframeConfig.setSharedStorageContext("some-event-id");const frame = document.createElement("fencedframe");frame.config = frameConfig;

Inside the fenced frame, we add the worklet module withwindow.sharedStorage.worklet.addModule(), and then send the event-level data into the shared storage worklet usingwindow.sharedStorage.run() (this is unrelated to the contextual data from the embedding document):

const frameData = {  // Data available only inside the fenced frame};await window.sharedStorage.worklet.addModule("reporting-worklet.js");await window.sharedStorage.run("send-report", {  data: {    frameData,  },});

In thereporting-worklet.js worklet, we read the embedding document's event ID fromsharedStorage.context and the frame's event-level data from the data object, then report them throughPrivate Aggregation:

class ReportingOperation {  convertEventIdToBucket(eventId) {    // …  }  convertEventPayloadToValue(info) {    // …  }  async run(data) {    // Data from the embedder    const eventId = sharedStorage.context;    // Data from the fenced frame    const eventPayload = data.frameData;    privateAggregation.sendHistogramReport({      bucket: convertEventIdToBucket(eventId),      value: convertEventPayloadToValue(eventPayload),    });  }}register("send-report", ReportingOperation);

Specifications

Browser compatibility

See also

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