Fenced frame

Draft Community Group Report,

This version:
Dominic Farolino (Google)
GitHub WICG/fenced-frame (new issue, open issues)
GitHub spec.bs commits


The fenced frame enforces a boundary between the embedding page and the cross-site embedded document such that user data visible to the two sites is not able to be joined together.

Status of this document

This specification was published by the Web Platform Incubator Community Group. It is not a W3C Standard nor is it on the W3C Standards Track. Please note that under the W3C Community Contributor License Agreement (CLA) there is a limited opt-out and other conditions apply. Learn more about W3C Community and Business Groups.

1. The fencedframe element

Flow content.
Phrasing content.
Embedded content.
Interactive content.
Palpable content.
Contexts in which this element can be used:
Where embedded content is expected.
Content model:
Content attributes:
Global attributes
src — Address of the resource
width — Horizontal dimension
height — Vertical dimension
Accessibility considerations:


DOM interface:
interface HTMLFencedFrameElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString src;
  [CEReactions] attribute DOMString width;
  [CEReactions] attribute DOMString height;

The fencedframe element represents a TODO: Wire up the browsing context "mode" that is being worked on in WICG/nav-speculation so we can have something like a nested top-level browsing context.

The src attribute TODO.

The src IDL attribute must reflect the respective content attribute of the same name.

1.1. Dimension attributes

This section details monkeypatches to [HTML]'s Dimension attributes section. This section will be updated to include fencedframe in the list of elements that the width and height dimension attributes apply to.

1.2. New fenced-frame-src [CSP] directive

Fenced frames are a different element from an iframe. Therefore, using the frame-src directive wouldn’t give web sites enough control over their CSP rules. Introduce a new [CSP] directive: fenced-frame-src. The monkey-patched specification is printed below:

1.2.1. fenced-frame-src

The fenced-frame-src directive restricts the URLs which may be loaded into a TODO: create a new browsing context, nested navigable, to be used here instead of the nested browsing context that is currently in use for other request destinations. The syntax for the directive’s name and value is described by the following ABNF:

directive-name  = "fenced-frame-src"
directive-value = serialized-source-list
Given a page with the following Content Security Policy:
Content-Security-Policy: fenced-frame-src https://example.com/

Fetches for the following code will return a network error, as the URL provided does not match fenced-frame-src's source list:

<fencedframe src="https://example.org/">

The Pre-request check and Post-request check will be the same as the frame-src’s check.

1.2.2. Amending default-src

The default-src directive’s Example 7 and Example 8 will be amended. Where it says:

Content-Security-Policy: connect-src 'self';
                         worker-src 'self'

It will now say:

Content-Security-Policy: connect-src 'self';
                         fenced-frame-src 'self';
                         worker-src 'self'

1.2.3. Amending The Directive Fallback List

In the directive fallback list, in step 1, add a new entry to the list:

  1. Return << "fenced-frame-src", "frame-src", "child-src", "default-src" >>.

1.3. New fencedframe request destination

Every distinct element should have its own request destination to allow for special handling when making requests (fenced frame request behavior deviates from iframe behavior in enough ways to justify having a separate destination). Update the associated request destination list to include a new entry, "fencedframe". It will have the initiator "", the CSP directive fenced-frame-src, and the features HTML’s <fencedframe>.

Add "fencedframe" to the non-subresource request list and to the navigation request list.

Add "fencedframe" to the RequestDestination enum.

In the fetch algorithm, step 13.2, where it says:

A user agent should set value to the first matching statement, if any, switching on request’s destination:

Add "fencedframe" to the switch cases alongside "document", "frame", and "iframe".


Terms defined by this specification

Terms defined by reference


Normative References

Mike West; Antonio Sartori. Content Security Policy Level 3. URL: https://w3c.github.io/webappsec-csp/
Anne van Kesteren. Fetch Standard. Living Standard. URL: https://fetch.spec.whatwg.org/
Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
Edgar Chen; Timothy Gu. Web IDL Standard. Living Standard. URL: https://webidl.spec.whatwg.org/

IDL Index

interface HTMLFencedFrameElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString src;
  [CEReactions] attribute DOMString width;
  [CEReactions] attribute DOMString height;