MCP server CSS feTile security: background-color tile covering consent text, high-frequency noise tiling, near-white tile feBlend screen wash, and transparent tile operator="in" zero-alpha mask

Published 2026-09-30 — SkillAudit Research

The SVG feTile filter primitive tiles a rectangular region of its input image across the entire filter output area. The input region size is determined by the primitive's x, y, width, height attributes (in filter primitive coordinate space). feTile takes that region of its input and repeats it (tessellates) to fill the complete filter output space.

As a standalone primitive, feTile is rarely seen in legitimate filter usage — tiling source graphic content is an unusual visual effect. In SVG filter attack chains, feTile serves as an amplifier: a small attack pattern (a 1×1 white pixel, a small noise swatch, a transparent pixel) gets tiled to fill the entire consent element region. This converts a small, limited attack input into a full-coverage filter output without requiring the attack source to match the consent element's dimensions.

Attack findings

<filter id="f1">
  <feFlood flood-color="white" flood-opacity="1" result="src"/>
  <feTile in="src" result="tiled"/>
  <feComposite in="tiled" in2="SourceGraphic" operator="over"/>
</filter>

Detection algorithm

function detectFeTileAttacks(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 tile of filter.querySelectorAll('feTile')) {
    const tileIn = tile.getAttribute('in');
    const tileResult = tile.getAttribute('result');

    // Find the tile's input source
    const source = primitives.find(p => p.getAttribute('result') === tileIn);
    if (!source) continue;

    // Find downstream users of the tile's result
    const downstreamComposite = primitives.find(p =>
      (p.getAttribute('in') === tileResult || p.getAttribute('in2') === tileResult) &&
      p.tagName === 'feComposite'
    );
    const downstreamBlend = primitives.find(p =>
      (p.getAttribute('in') === tileResult || p.getAttribute('in2') === tileResult) &&
      p.tagName === 'feBlend'
    );
    const downstreamMerge = primitives.find(p =>
      p.tagName === 'feMergeNode' && p.getAttribute('in') === tileResult
    );

    if (source.tagName === 'feFlood') {
      const floodOpacity = parseFloat(source.getAttribute('flood-opacity') ?? '1');
      const floodColor = source.getAttribute('flood-color') || 'black';

      if (floodOpacity >= 0.95 && downstreamComposite) {
        const operator = downstreamComposite.getAttribute('operator') || 'over';
        if (operator === 'over' && downstreamComposite.getAttribute('in') === tileResult) {
          findings.push({ severity: 'critical', tile, source, downstreamComposite,
            issue: `feTile amplifies feFlood (opacity=${floodOpacity}, color="${floodColor}") → feComposite operator="${operator}" — tiled opaque flood covers full consent element` });
        }
      }

      if (floodOpacity >= 0.85 && downstreamBlend) {
        const mode = downstreamBlend.getAttribute('mode') || 'normal';
        if (mode === 'screen') {
          findings.push({ severity: 'high', tile, source, downstreamBlend,
            issue: `feTile of near-white feFlood (opacity=${floodOpacity}) → feBlend mode="screen" — screen formula washes consent text luminance to near-white` });
        }
      }
    }

    if (source.tagName === 'feTurbulence' && (downstreamMerge || downstreamBlend)) {
      findings.push({ severity: 'high', tile, source,
        issue: `feTile amplifies feTurbulence noise across full consent element — tiled noise overlay destroys glyph readability` });
    }

    if (source.tagName === 'feImage' && downstreamComposite) {
      const operator = downstreamComposite.getAttribute('operator');
      if (operator === 'in' && downstreamComposite.getAttribute('in2') === tileResult) {
        findings.push({ severity: 'medium', tile, source, downstreamComposite,
          issue: `feTile of feImage → feComposite operator="in" — check feImage alpha channel; zero-alpha tiled source erases consent text` });
      }
    }
  }

  return findings.length ? findings : null;
}

Remediation