MCP server CSS feMerge security: feMergeNode ordering attack covering SourceGraphic, near-white flood opacity collapse, animated input substitution, and word-level merge occlusion of consent text

Published 2026-09-30 — SkillAudit Research

The SVG feMerge filter primitive composites multiple input images by stacking them in document order, back-to-front — each feMergeNode child's in input is placed on top of the previous nodes using the Porter-Duff "over" operator. The last feMergeNode is the frontmost layer. This sequential compositing model creates a class of consent text attacks based on layer ordering: place an opaque or near-opaque flood result as the final feMergeNode, and it covers every pixel of the layers below it, including SourceGraphic.

Unlike feComposite attacks that require understanding compositing operator semantics, feMerge attacks rely on intuitive layer stacking — the same model as CSS z-index. The attack is structurally simple but requires traversing the feMergeNode order and evaluating each node's referenced input image. See also the feComposite security page for operator-level attacks and the feBlend security page for mode-based layering attacks.

Attack findings

<filter id="f1">
  <feFlood flood-color="white" flood-opacity="1" result="white-layer"/>
  <feMerge>
    <feMergeNode in="SourceGraphic"/>
    <feMergeNode in="white-layer"/>  <!-- last = frontmost -->
  </feMerge>
</filter>

Detection algorithm

function detectFeMergeAttacks(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 merge of filter.querySelectorAll('feMerge')) {
    const nodes = Array.from(merge.querySelectorAll('feMergeNode'));
    // Last node is frontmost layer
    for (let i = nodes.length - 1; i >= 0; i--) {
      const node = nodes[i];
      const inName = node.getAttribute('in');
      if (!inName || inName === 'SourceGraphic') continue;

      // Find the primitive producing this result
      const source = primitives.find(p => p.getAttribute('result') === inName);
      if (!source) continue;

      if (source.tagName === 'feFlood') {
        const floodOpacity = parseFloat(
          getComputedStyle(source)['flood-opacity'] ??
          source.getAttribute('flood-opacity') ?? '1'
        );
        if (floodOpacity >= 0.95) {
          findings.push({ severity: 'critical', node, source,
            issue: `feMergeNode at position ${i} (front layer) references feFlood with opacity=${floodOpacity} — opaque flood covers SourceGraphic in merge stack` });
        } else if (floodOpacity > 0.7) {
          const floodColor = getComputedStyle(source)['flood-color'] || source.getAttribute('flood-color') || 'black';
          findings.push({ severity: 'high', node, source,
            issue: `feMergeNode front layer: feFlood opacity=${floodOpacity} color="${floodColor}" — compute output contrast against page background` });
        }
      }
      // Only check the last non-SourceGraphic node as the likely attack layer
      break;
    }
  }

  // Set up MutationObserver for animated in= attribute
  const mergeNodes = filter.querySelectorAll('feMergeNode');
  const observer = new MutationObserver(mutations => {
    const postFindings = detectFeMergeAttacks(consentEl);
    if (postFindings?.length) reportFindings('mutation', postFindings);
  });
  mergeNodes.forEach(n => observer.observe(n, { attributes: true, attributeFilter: ['in'] }));

  return findings.length ? findings : null;
}

Remediation