Disable SVG filters on plugins and cross-origin/restricted iframes

concepts

1. Filter Effects Lab

   Explore the full range of SVG filter primitives applied to same-origin page content. Blur, colour-shift, distort, and composite — all the effects that work within a single origin, with live controls and the exact SVG code that drives them.

2. Iframe Sandbox Demo

   See Chrome 150's security boundary in action. A parent page wraps embedded frames in an SVG filter — the same-origin frame is visually affected while the cross-origin/sandboxed frame is protected. Toggle between Chrome 148 (no protection) and 149 (sandboxed) views.

3. Attack Scenario

   Step-by-step visualisation of the SVG clickjacking attack: apply blur, hue-rotate, or invert to a "cross-origin payment button" and see how Chrome 150 blocks it. The pre-150 side lets you apply any filter; the protected side strips it, showing the button as the payment provider intended.

4. Filter Security Demo

   A 2×3 card matrix covering all 6 iframe configurations (same-origin, cross-origin+CORS, cross-origin no-CORS, sandboxed, cross-origin sandboxed, sandboxed+allow-same-origin). Each card has a status badge and two test buttons for SVG vs CSS filters, with a policy summary table and an attack diagram showing how feDisplacementMap pixel extraction was used before the Chrome 150 fix.

5. CSP Policy Inspector

   A policy matrix showing how different frame configurations interact with the new SVG filter restriction — same-origin, cross-origin, sandboxed, plugin embeds, and data: URI frames. Includes a sandbox attribute builder that shows which permissions are safe to combine, with a warning about allow-same-origin + allow-scripts.

6. Developer Migration Guide

   If you used SVG filters on cross-origin iframes, here are the CSS alternatives. An interactive live comparison shows the same filter effect rendered via SVG (blocked on cross-origin in Chrome 150) and via CSS (still works). A migration reference table maps every common SVG filter primitive to its CSS equivalent — and calls out the primitives like feDisplacementMap that have no CSS replacement by design.

   Interactive Migration CSS filters

why it shipped

SVG clickjacking is a novel attack where a malicious parent page applies dynamic SVG filter effects (distortion, colour inversion, transparency shifts) to a cross-origin iframe to make a legitimate UI — a payment button, an OAuth consent screen, a "Delete account" confirmation — look like something innocent. Users click what they think is one thing but actually interact with the hidden, trusted frame underneath. Because the filter applies at the compositor level, no JavaScript or CSP on the embedded page can detect or block it. Chrome 150 mirrors what Safari already does: the compositor traverses the effect tree and refuses to paint SVG filter effects across the cross-origin boundary. Same-origin iframes and same-origin page content are unaffected; only the cross-origin rendering isolation changes.

references

• ChromeStatus entry
• Tracking bug (crbug.com/476646486)
• MDN: SVG <filter> element
• Filter Effects Module Level 1 (W3C)
• Chrome 149 release notes