What Is the Fenced Frames Proposal in JavaScript?

The Fenced Frames proposal is a web platform initiative introduced primarily within Google’s Privacy Sandbox to provide secure, isolated embedded contexts. Unlike standard iframes, fenced frames prevent cross-site data correlation by restricting communication channels between the host page and the embedded document. This article explores what fenced frames are, why traditional iframes fall short for modern privacy standards, and how fenced frames enforce strict boundary isolation in JavaScript.

The Problem with Traditional iframes

Standard HTML <iframe> elements allow embedding third-party content, but they permit multiple cross-origin communication mechanisms. The embedding page and the iframe can exchange data via the postMessage API, access shared unpartitioned storage, observe network traffic patterns, and communicate through side-channels. While this interoperability is useful for widgets and embeds, it also enables third-party tracking across different websites, allowing ad tech and tracking scripts to join user identities without explicit consent.

What Is a Fenced Frame?

A fenced frame (<fencedframe>) is an HTML element designed specifically to display content that cannot share data with the embedding context. It acts as an isolated browsing context that allows rendering targeted content—such as interest-based advertisements—without revealing the user’s specific identity or browsing history to the host site.

Fenced frames are commonly used alongside privacy-preserving APIs like the Protected Audience API (formerly FLEDGE) and the Shared Storage API.

How Fenced Frames Enforce Isolation

Fenced frames prevent the leakage and joining of cross-site data using several distinct technical restrictions:

1. Disabling Direct Script Communication

In a standard web environment, the parent page and child frame can communicate using window.postMessage() or direct DOM traversal when on the same origin. In a fenced frame: * The postMessage API is disabled between the embedding page and the fenced frame document. * JavaScript running inside the fenced frame cannot access the parent via window.parent or window.top. These properties return references that prevent crossing the frame boundary.

2. Opaque URLs and FencedFrameConfig

To prevent the parent page from inferring user data based on the source URL of an embed, fenced frames load content using opaque source references rather than direct URLs:

// Example: Setting a fenced frame using a FencedFrameConfig
const frameConfig = await navigator.runAdAuction(auctionConfig);
const fencedFrame = document.createElement('fencedframe');
fencedFrame.config = frameConfig;
document.body.appendChild(fencedFrame);

The parent page only receives an opaque FencedFrameConfig object or a temporary URN (urn:uuid:...). The host JavaScript cannot inspect the actual URL, metadata, or creative content rendered inside the frame.

3. Partitioned Storage and Network Isolation

Fenced frames operate under strict storage and network isolation rules: * Storage Access: Standard shared cookies, localStorage, and IndexedDB access across top-level sites are either partitioned or completely restricted within the frame context. * Network Restrictions: In advanced configurations, network access can be restricted after the frame is rendered, preventing the frame from exfiltrating data via fetch() or beacon requests after acquiring sensitive local data.

4. Controlled Outbound Interaction

User interaction within a fenced frame (such as clicks) can trigger navigation, but outbound data transfer remains governed by strict privacy budgets or predefined reporting mechanisms (such as Private Aggregation or fenced frame reporting beacons). Scripts cannot freely inject arbitrary tracking parameters into the destination URL based on cross-site data.

Summary

The Fenced Frames proposal provides a technical boundary that allows the web ecosystem to display personalized or external content without facilitating cross-site tracking. By blocking postMessage, abstracting frame URLs with FencedFrameConfig, and partitioning storage access, fenced frames ensure that embedded JavaScript operates in complete isolation from the surrounding page.