demo · v150

Pixel Sidechannel Demo

SVG filters operate at the compositor level and can read pixel data from whatever they are applied to. On a cross-origin iframe, that means an attacker could extract colour information from inside a document they don't have JavaScript access to — a sidechannel leak. Chrome 150 blocks SVG filters at the cross-origin boundary. This demo shows the attack concept on same-origin content (where it works), and explains why it cannot reach cross-origin content.

How the pixel sidechannel attack works

Attacker Embed a target cross-origin iframe (e.g. bank login page). Apply an SVG filter with feColorMatrix or feDisplacementMap to the iframe's container element.
Attacker The SVG filter applies a colour transformation that makes specific target pixels stand out — e.g. "if this pixel is red (a logged-in indicator), shift the entire image blue".
Browser [pre-150] The compositor processes the filter against the iframe's rendered pixels. The filtered output is visible on the page.
Attacker JS reads the rendered output via canvas.drawImage() + getImageData(). Pixel colours in the canvas reveal information about the content inside the cross-origin frame.
Chrome 150 The compositor detects the SVG filter is applied across a cross-origin boundary. It strips the filter from the cross-origin iframe subtree. The attacker sees the unfiltered frame as-is — pixel data is not exposed.

Live visual — filter applied to same-origin canvas (permitted)

Select a filter to see how it transforms the canvas pixel data. This simulates what an attacker does with same-origin content — the same technique is blocked on cross-origin content in Chrome 150.
Original content (same-origin canvas)
Simulated iframe content — secret text hidden in colour
After SVG filter — pixel data leaked
Click "Sample pixels" to read extracted data.

Why cross-origin filtering was the real threat

Attack on a cross-origin iframe (pre-Chrome 150):
/* Attacker embeds a bank login page */
<div style="filter: url(#secret-extractor)">
  <iframe src="https://bank.example.com/login">
  </iframe>
</div>

/* SVG filter: shift red pixels → bright yellow
   so attacker can detect "user is logged in"
   by observing the rendered output colour */
<filter id="secret-extractor">
  <feColorMatrix type="matrix"
    values="1 0 0 0 0
            1 1 0 0 0
            0 0 0 0 0
            0 0 0 1 0"/>
</filter>

/* Attacker reads result via canvas
   → leaks pixel data from inside the iframe */
Chrome 150: filter stripped at cross-origin boundary:
/* Chrome 150 compositor:
   Walks the paint effect tree.
   Finds SVG filter applied to a subtree
   containing a cross-origin iframe.
   Result: filter is NOT applied to the iframe.
   The iframe renders unfiltered.
   Attacker cannot read cross-origin pixels. */

/* Same-origin iframes: filter still applies.
   Cross-origin iframes: filter is stripped.
   CSS filters (blur, brightness, etc.):
     still allowed — no pixel-read sidechannel.
   SVG url() filters:
     blocked at cross-origin boundary. */

see also