demo · v151

Iframe Policy Inspector

A nested iframe hierarchy where each frame has its own allow-list. Toggle the top-level header and the per-iframe allow="" attribute, and watch the effective policy propagate down — visualised as a tree where each row reads "would this fetch be permitted right here?".

Visualisation only. This page simulates the inheritance rules from the Permissions Policy spec. The Direct Sockets API itself is gated on Isolated Web Apps, but the merger rule applies to any nested IWA context.

top-level policy header

per-iframe allow attribute

resolved policy tree

code

// On a top-level navigation:
//   Permissions-Policy: local-network=(self "https://partner.com"),
//                       loopback-network=self,
//                       direct-sockets=self

// On a nested iframe:
<iframe src="/billing"
        allow="local-network=*; direct-sockets=*">
  <!-- Effective policy is the *intersection* of the parent's
       grant and what the allow attribute opts into. -->
</iframe>

// Pre-151 you also had to set direct-sockets-private here.
// Chrome 151 collapses that into local-network = same intent.

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗