v149 · Iframe Sandbox Demo

Iframe Sandbox Demo

Watch Chrome 149's security boundary in action. A parent page applies a distortion filter to two embedded frames — same-origin (left) and cross-origin/sandboxed (right). Toggle between browser versions to see the protection engage.

Simulate:
Chrome 149 (protected): The parent page applies a distortion+inversion SVG filter to its container. The same-origin frame (left) is visually distorted — this is expected and permitted. The cross-origin/sandboxed frame (right) is not filtered; Chrome's compositor detects the cross-origin boundary and skips the filter for that subtree.
same-origin frame same-origin

Payment portal

Amount: $12.99

filter: url(#f-attack) — applied ✓
affected by parent filter
cross-origin / sandboxed cross-origin

Payment portal

Amount: $12.99

filter: url(#f-attack) — applied (Chrome ≤148)
vulnerable: filter leaks through
Attack vector

The attacker wraps a legitimate payment iframe in a container styled with filter: url(#f-attack). The filter inverts colours and distorts text so "Approve" appears to say something else, while the actual click still activates the trusted button inside the frame. The victim believes they're clicking "Cancel" — they're not.

The code that triggers the boundary

<!-- Attacker's page -->
<svg>
  <defs>
    <filter id="f-attack">
      <feComponentTransfer>
        <feFuncR type="linear" slope="-1" intercept="1"/>
        <feFuncG type="linear" slope="-1" intercept="1"/>
        <feFuncB type="linear" slope="-1" intercept="1"/>
      </feComponentTransfer>
      <feTurbulence baseFrequency="0.08" result="noise"/>
      <feDisplacementMap in2="noise" scale="8"/>
    </filter>
  </defs>
</svg>

<!-- This wrapper tries to filter the embedded frame -->
<div style="filter: url(#f-attack)">
  <iframe src="https://payment.example.com/confirm"
          sandbox="allow-scripts allow-forms">
  </iframe>
</div>

<!-- Chrome 149: compositor refuses to apply f-attack to the iframe.
     Chrome ≤148: filter renders onto the cross-origin frame. -->
This demo simulates the cross-origin boundary. Because static HTML pages are all same-origin, the "cross-origin frame" here is a same-origin div styled to look embedded. In a real attack scenario it would be an actual cross-origin iframe — and Chrome 149 would block the filter at the compositor, with zero JavaScript involvement required.

see also