MCP server SVG feImage href consent security

feImage is an SVG filter primitive that loads an image from an href attribute and makes it available as a filter input (via the result attribute) for downstream primitives. Unlike a standard <image> element, feImage is inside a <filter> and is never directly rendered — it produces a named intermediate result in the filter pipeline. Its href accepts any URI that the browser can resolve, including data: URIs containing embedded SVG.

SA-CSS-FIH-001: data: URI white SVG as feImage source

A feImage primitive loads a data: URI containing a solid-white SVG rectangle. The result is a white image the same size as the filter region. This image is then composited over the consent text using feBlend mode="screen" (or feComposite operator="over" with source set to the white image). The screen blend mode formula is 1 - (1-A)(1-B); compositing any non-black value with white always yields white. The consent text's rendered pixels are replaced with white. On a white background, the text is invisible.

<filter id="fih1">
  <feImage href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%25' height='100%25' fill='white'/></svg>"
    result="white_layer"/>
  <feBlend in="SourceGraphic" in2="white_layer" mode="screen"/>
</filter>
<!-- screen(any, white) = white; consent text overridden to white on all backgrounds -->

SA-CSS-FIH-002: same-origin URL feImage (asynchronous load)

Instead of a data: URI, feImage href points to a same-origin URL that serves a white PNG or SVG. The image loads asynchronously. During the load gap, feImage produces a transparent result, and the feBlend screen pass-through leaves the consent text visible. Once the image loads, the screen blend produces white-out. This timing creates a scan window: a scanner that evaluates the filter immediately after DOM construction may see the consent text visible (image not yet loaded) and report no finding. By the time the user interacts, the image is loaded and the attack is active.

Mitigation: after checking that a feImage href is present in a consent ancestor filter, add a load event listener and re-evaluate the filter on load.

SA-CSS-FIH-003: nested SVG with embedded filter chain

A data: URI SVG embedded via feImage href can itself contain a filter definition. The outer SVG's filter loads the inner SVG as an image; the inner SVG renders with its own filter applied. This creates a two-level filter chain. Each level may look innocuous in isolation: the outer filter might appear to be a simple feImage-feBlend composition; the inner SVG might appear to be a plain feColorMatrix. Evaluating the chain requires following the feImage href, parsing the embedded SVG, and evaluating its filter before evaluating the compositing step of the outer filter.

SA-CSS-FIH-004: JS mousedown href injection

The feImage element initially has no href attribute (or href=""). An empty href causes feImage to produce a transparent result. The downstream feBlend screen composites transparent against the consent source, leaving the consent text visible. On mousedown, the script sets href to the data: URI white SVG. The feBlend screen immediately produces a white-out. The user's pointer has already contacted the consent element at the moment the attack activates.

consentElement.addEventListener("mousedown", () => {
  const feImg = document.getElementById("consentFilter")
                         .querySelector("feImage");
  feImg.setAttribute("href",
    "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'>" +
    "<rect width='100%' height='100%' fill='white'/></svg>");
});

Attack summary

Defences

• Traverse filter subtree for feImage: When checking consent ancestor filters, find all feImage elements (not just top-level primitives). For each, attempt to resolve the href and determine if the resulting image has non-transparent pixels.
• Flag data: URI feImage in consent filters: A data: URI on an feImage inside a consent ancestor filter is a strong attack indicator. Resolve the URI, render the embedded SVG/PNG, and check if it produces a uniform high-luminance output (white or near-white).
• Await image load before evaluating: For same-origin URL feImage hrefs, add a load event listener and re-evaluate the filter after the image loads. Do not evaluate filter effects only at initial DOM parse time.
• MutationObserver on feImage href: SA-CSS-FIH-004 changes only the href attribute. Add href (and the deprecated xlink:href) to the MutationObserver attribute list on all feImage elements in consent ancestor filter chains.

SkillAudit findings for this attack surface

← Blog  |  Security Checklist