Fencedframe

What Makes Fencedframe Different from Traditional Iframes

The web has long relied on iframes to embed third-party content--from advertisements to interactive widgets. But traditional iframes come with significant privacy trade-offs, allowing embedding sites to access data within frames and enabling cross-site tracking. The <fencedframe> element represents a fundamental shift in how we think about embedded content, providing a privacy-first alternative that maintains the flexibility of iframes while preventing unauthorized data access.

As browsers continue to tighten privacy restrictions and phase out third-party cookies, developers need new tools that respect user privacy while still enabling legitimate use cases like personalized advertising and cross-site content personalization. Our web development services team specializes in implementing privacy-preserving technologies that keep your implementations ahead of evolving web standards.

Key Differences from Iframes

• Communication isolation between frame and embedding site
• Cross-site data access only in controlled circumstances
• No JavaScript manipulation via regular scripting
• No DOM access in either direction
• Built-in privacy features address iframe shortcomings

HTML Element Reference

Element Attributes

allow Attribute

The allow attribute specifies a Permissions Policy for the fencedframe, defining which features are available based on the origin of the request. Only Privacy Sandbox-specific features can be enabled.

<fencedframe
 allow="attribution-reporting; private-aggregation"
 width="640"
 height="480">
</fencedframe>

Note: Standard web features like camera, geolocation, and microphone are not available within fencedframes.

width and height Attributes

These unitless integer attributes set the dimensions of the fencedframe in CSS pixels. Default width: 300px, Default height: 150px.

<fencedframe width="800" height="600"></fencedframe>

title Attribute (Accessibility)

The title attribute provides a label for assistive technology users, describing the embedded content.

<fencedframe
 title="Personalized advertisement from AdTech Partner"
 width="300"
 height="250">
</fencedframe>

JavaScript Configuration with the Fenced Frame API

The FencedFrameConfig Interface

The FencedFrameConfig interface represents the navigation configuration for a fencedframe--what content will be displayed. You cannot set content directly via a src attribute as with iframes. Instead, you obtain a FencedFrameConfig from a privacy API and assign it to the frame's config property.

// Example: Getting config from Protected Audience API auction
const auctionResult = await navigator.runAdAuction({
 decisionLogicUrl: '/auction-logic.js',
 seller: 'https://advertising.example.com'
});

// The result is a FencedFrameConfig
const fencedFrame = document.getElementById('ad-frame');
fencedFrame.config = auctionResult;

HTMLFencedFrameElement Properties

const frame = document.querySelector('fencedframe');

// Access the current configuration
if (frame.config) {
 console.log('Fenced frame has content configured');
}

// Check dimensions configured by the content
console.log(`Content width: ${frame.config?.contentWidth}`);
console.log(`Content height: ${frame.config?.contentHeight}`);

Integration with Privacy Sandbox APIs

Protected Audience API (formerly FLEDGE)

The Protected Audience API enables on-device ad auctions that keep user data local. The winning ad from an auction is returned as a FencedFrameConfig, which is then displayed in a fencedframe:

async function displayPersonalizedAd() {
 const auctionConfig = {
 seller: 'https://ad-network.example.com',
 decisionLogicUrl: '/decision-logic.js',
 interestGroupBuyers: ['https://buyer.example.com'],
 auctionSignals: { category: 'sports' },
 sellerSignals: { site: 'news-site.example.com' }
 };

 const auctionResult = await navigator.runAdAuction(auctionConfig);

 if (auctionResult) {
 const adFrame = document.getElementById('sponsored-content');
 adFrame.config = auctionResult;
 }
}

Privacy guarantees:

• Ad selection happens entirely on-device
• The embedding site cannot see which ad was selected
• User interest group membership stays private
• No cross-site tracking occurs through the ad

For organizations implementing AI automation solutions that require privacy-preserving advertising, the Protected Audience API combined with fencedframes provides a powerful framework for maintaining personalization effectiveness while respecting user privacy.

Shared Storage API

The Shared Storage API allows sites to store and process data across sites in a privacy-preserving manner:

async function displayContentFromSharedStorage() {
 const fencedFrameConfig = await navigator.sharedStorage.selectURL(
 'content-selection-worklet',
 [
 { url: '/content/version-a.html' },
 { url: '/content/version-b.html' },
 { url: '/content/version-c.html' }
 ],
 { data: { userCohort: 'group-1' } }
 );

 const contentFrame = document.getElementById('personalized-content');
 contentFrame.config = fencedFrameConfig;
}

Permissions Policy for Fenced Frames

Available Policy Features

Unlike regular iframes, fencedframes have a restricted set of features available through permissions policy:

<fencedframe
 allow="attribution-reporting; private-aggregation; shared-storage"
 width="640"
 height="480">
</fencedframe>

Privacy Considerations

Permissions delegated from the top-level context to a fenced frame could serve as a communication channel, creating a privacy threat. By restricting available features, fencedframes prevent embedding sites from using policy settings to infer information about users.

For comprehensive SEO strategy implementation, understanding these privacy boundaries helps ensure your technical implementations align with modern privacy standards while maintaining search visibility and user trust.

Accessibility Best Practices

Labeling with the Title Attribute

Always provide a descriptive title attribute for fencedframes to help assistive technology users:

<fencedframe
 title="Sponsored content: Product recommendations based on your interests"
 width="300"
 height="250">
</fencedframe>

Focus Management

• User-initiated focus movements (clicks, tab navigation) can cross fencedframe boundaries
• Programmatic focus via HTMLElement.focus() is prohibited
• This restriction prevents malicious scripts from using focus traversal to leak information

Alternative Text Strategies

Consider providing summary text near fencedframes for users who may have difficulty understanding the embedded content's purpose or origin.

Performance Optimization

Lazy Loading

While fencedframes don't have a native lazy loading attribute, use Intersection Observer:

const observer = new IntersectionObserver((entries) => {
 entries.forEach(entry => {
 if (entry.isIntersecting) {
 const frame = entry.target;
 configureFencedFrame(frame);
 observer.unobserve(frame);
 }
 });
});

document.querySelectorAll('fencedframe[data-lazy]').forEach(frame => {
 observer.observe(frame);
});

Impact on Core Web Vitals

Fencedframes can impact Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS):

1. Reserve adequate space with width and height attributes
2. Avoid dynamically resizing frames after content loads
3. Consider lazy loading for below-the-fold frames

Resource Preloading

For known fencedframe configurations, preload resources to reduce perceived latency.

Browser Compatibility and Adoption

Current Support

As of early 2025, fencedframes are available in Chromium-based browsers (Chrome, Edge) with limited or no support in Firefox and Safari.

Feature Detection

function isFencedFrameSupported() {
 return HTMLFencedFrameElement !== undefined;
}

// Usage
if (isFencedFrameSupported()) {
 // Use fencedframes
} else {
 // Fallback to iframes or alternative approaches
}

Gradual Enhancement Strategy

Build implementations to work with traditional iframes as a fallback:

async function embedContentWithFallback(container, config) {
 if (isFencedFrameSupported()) {
 const frame = document.createElement('fencedframe');
 frame.width = config.width;
 frame.height = config.height;
 frame.config = config.fencedFrameConfig;
 container.appendChild(frame);
 } else {
 // Fallback to iframe with src
 const iframe = document.createElement('iframe');
 iframe.src = config.fallbackUrl;
 iframe.width = config.width;
 iframe.height = config.height;
 container.appendChild(iframe);
 }
}

Migration Guide: From Iframe to Fencedframe

Key Differences to Address

1. No src attribute - Content is set via config property, not src
2. No DOM access - Cannot read or manipulate frame content from parent
3. Limited APIs - postMessage, focus(), and many DOM APIs unavailable
4. New integrations - Must use Protected Audience or Shared Storage APIs
5. Browser support - Requires Chromium-based browsers currently

Migration Checklist

• Identify all iframe use cases that could use fencedframes
• Implement Protected Audience or Shared Storage integration
• Create fallback strategy for non-Chromium browsers
• Update accessibility labels and focus management
• Test with real Protected Audience auctions
• Monitor performance impact on Core Web Vitals

Code Example: Complete Protected Audience Integration

async function initAdDisplay(adSlotId) {
 const adFrame = document.getElementById(adSlotId);

 const auctionConfig = {
 seller: 'https://ad-platform.example.com',
 decisionLogicUrl: '/js/decision-logic.js',
 interestGroupBuyers: ['https://advertiser.example.com'],
 auctionSignals: getAuctionSignals(),
 sellerSignals: await getSellerSignals()
 };

 const auctionResult = await navigator.runAdAuction(auctionConfig);

 if (auctionResult) {
 adFrame.config = auctionResult;
 adFrame.title = 'Advertisement';
 } else {
 displayFallbackAd(adFrame);
 }
}

Sources

1. MDN Web Docs - fencedframe element
2. Google Privacy Sandbox - Fenced Frames
3. MDN Web Docs - Fenced Frame API