MCP server CSS feImage security: external resource alpha mask erasure, CORS-disabled zero-alpha collapse, base64 transparent image injection, and SVG fragment white-rectangle overlay of consent text

Published 2026-09-30 — SkillAudit Research

The SVG feImage filter primitive loads an image resource into the filter graph as a new image input. The image source is specified by xlink:href (or href) and can be an external URL, a data: URI, or a reference to an SVG fragment in the same document. Unlike primitives such as feFlood that generate images programmatically from CSS property values, feImage introduces an external resource — one that may not be inspectable by DOM property checks — as a filter input. This creates a distinct class of consent text attack vectors where the erase mechanism lives in an external resource rather than in the filter markup itself.

The four vectors below operate at the intersection of the filter graph and the resource-loading model: transparent PNG alpha masks, CORS-failure zero-alpha collapse, base64 opaque encoding, and SVG fragment foreground composition. See also the related feComposite security page for the operator context and the DOM Ghost Attack post for the "in" operator erasure mechanism these vectors exploit.

Attack findings

<filter id="f1">
  <feImage xlink:href="https://cdn.example.com/transparent.png" result="mask"
           x="0" y="0" width="100%" height="100%"/>
  <feComposite in="SourceGraphic" in2="mask" operator="in"/>
</filter>

<!-- 1x1 transparent PNG in data URI -->
<feImage xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" result="mask"/>
<feComposite in="SourceGraphic" in2="mask" operator="in"/>

Detection algorithm

async function detectFeImageAttacks(consentEl) {
  const style = getComputedStyle(consentEl);
  const filterVal = style.filter;
  if (!filterVal || filterVal === 'none') return null;

  const filterId = filterVal.match(/url\(["']?#([^"')]+)["']?\)/)?.[1];
  if (!filterId) return null;

  const svgRoot = consentEl.closest('svg') || document;
  const filter = svgRoot.querySelector(`filter#${filterId}`);
  if (!filter) return null;

  const primitives = Array.from(filter.querySelectorAll('*'));
  const findings = [];

  for (const prim of primitives) {
    if (prim.tagName !== 'feImage') continue;
    const href = prim.getAttribute('xlink:href') || prim.getAttribute('href') || '';
    const resultName = prim.getAttribute('result');

    // Check if this feImage result feeds operator="in" as in2
    const downstream = primitives.filter(p =>
      p.tagName === 'feComposite' &&
      p.getAttribute('in2') === resultName &&
      p.getAttribute('operator') === 'in'
    );
    if (downstream.length === 0) continue; // not used as zero-alpha mask

    if (href.startsWith('data:')) {
      // Decode base64 data URI and check alpha channel
      const transparent = await checkDataUriTransparency(href);
      if (transparent) {
        findings.push({ severity: 'critical', prim,
          issue: `feImage data URI decodes to transparent image used as in2 of operator="in" — consent text fully erased` });
      }
    } else if (href.startsWith('#')) {
      // SVG fragment reference
      findings.push({ severity: 'medium', prim,
        issue: `feImage href="${href}" references local SVG fragment as in2 of operator="in" — verify fragment pixel content` });
    } else if (href) {
      // External URL — flag for cross-origin CORS risk and transparency check
      findings.push({ severity: 'critical', prim,
        issue: `feImage href="${href}" loads external resource as in2 of operator="in" — CORS-blocked images produce zero-alpha; fetch and check decoded alpha` });
    }
  }

  return findings.length ? findings : null;
}

async function checkDataUriTransparency(dataUri) {
  return new Promise(resolve => {
    const img = new Image();
    img.onload = () => {
      const c = document.createElement('canvas');
      c.width = img.width; c.height = img.height;
      const ctx = c.getContext('2d');
      ctx.drawImage(img, 0, 0);
      const data = ctx.getImageData(0, 0, c.width, c.height).data;
      // Check if all alpha values are below threshold
      let maxAlpha = 0;
      for (let i = 3; i < data.length; i += 4) maxAlpha = Math.max(maxAlpha, data[i]);
      resolve(maxAlpha < 10);
    };
    img.src = dataUri;
  });
}

Remediation