MCP server CSS flood-color security: SVG feFlood filter background overlay, transparent flood masking, CSS vs attribute override, and feComposite erasure on consent text

Published 2026-09-26 — SkillAudit Research

The SVG feFlood filter primitive fills the entire filter region with a solid color, defined by the flood-color and flood-opacity CSS properties (also available as SVG presentation attributes). feFlood is a source primitive — it generates a filled region that can then be composited with the element's rendered output using feComposite or feBlend.

When an SVG filter applied to a consent text element includes a feFlood primitive composited over the source graphic, the flood region paints on top of the text. If flood-color matches the page background and flood-opacity is 1, the text is completely obscured — replaced by a solid background-colored rectangle. CSS flood-color can override the SVG attribute via the cascade, making this attack invisible to attribute-reading auditors.

Attack findings

<defs>
  <filter id="consent-erase" x="0" y="0" width="100%" height="100%">
    <!-- Generate the source text rendering -->
    <feFlood flood-color="#ffffff" flood-opacity="1" result="bg"/>
    <!-- Composite flood (bg) OVER the SourceGraphic (text) -->
    <feComposite in="bg" in2="SourceGraphic" operator="over"/>
  </filter>
</defs>
<text filter="url(#consent-erase)">
  By clicking Accept, you agree to binding arbitration.
</text>

/* Result:
   feFlood generates white rectangle (flood-color: #ffffff)
   feComposite places white rectangle OVER text → text invisible
   getBoundingClientRect: non-zero (flood fills same region) → passes size check
   getComputedStyle(textEl).filter: "url(#consent-erase)" → reveals filter reference
   feFlood.flood-color computed: "rgb(255,255,255)" → background match → CRITICAL */

<!-- SVG attribute: transparent (innocuous) -->
<feFlood id="consent-flood" flood-color="rgba(0,0,0,0)" flood-opacity="1"/>

/* CSS cascade override: background-matching */
#consent-erase feFlood {
  flood-color: #ffffff;    /* overrides transparent attribute */
}

/* getAttribute('flood-color'):         "rgba(0,0,0,0)" → transparent → PASS (incorrect)
   getComputedStyle(feFlood).floodColor: "rgb(255,255,255)" → white → ATTACK DETECTED
   CSS author stylesheet wins over SVG presentation attribute in cascade */

<filter id="consent-blend-erase">
  <!-- Flood produces background-colored rectangle -->
  <feFlood flood-color="#f8f8f8" flood-opacity="1" result="overlay"/>
  <!-- feBlend mode=normal: foreground (overlay) replaces SourceGraphic (text) pixels -->
  <feBlend in="overlay" in2="SourceGraphic" mode="normal"/>
</filter>

/* feBlend mode=normal compositing: Dst = Src · αSrc + Dst · αDst · (1 - αSrc)
   αSrc = 1 (flood is fully opaque) → Dst = Src (flood color)
   All text pixels replaced by flood color → text invisible
   Auditor checking feBlend.mode: "normal" may not flag as attack (legitimate use: sprite compositing)
   Attack revealed by: flood-color == page background color */

/* Innocent at page load */
@keyframes flood-reveal {
  0%   { flood-color: transparent; }    /* load: innocuous, text visible */
  80%  { flood-color: transparent; }    /* most of delay: text visible */
  100% { flood-color: #ffffff; }        /* at button activation: text invisible */
}

#consent-erase feFlood {
  animation: flood-reveal 3s forwards;    /* matches button activation delay */
  flood-opacity: 1;
}

/* Static audit at t=0: flood-color=transparent → no concern
   At t=3s (button activates): flood-color=#ffffff → text obscured
   Detection: simulate animation timeline; check flood-color at animation-end-time */

Detection

function checkFeFloodFilters(svgRoot, pageBackground = '#ffffff') {
  const findings = [];

  /* Find all consent text elements with filters applied */
  const textEls = svgRoot.querySelectorAll('text, tspan, [data-consent]');
  for (const el of textEls) {
    const filterRef = el.getAttribute('filter') || getComputedStyle(el).filter;
    if (!filterRef || filterRef === 'none') continue;

    const filterId = (filterRef.match(/url\(#([^)]+)\)/) || [])[1];
    if (!filterId) continue;

    const filter = svgRoot.getElementById(filterId);
    if (!filter) continue;

    /* Traverse filter graph for feFlood primitives */
    const floods = filter.querySelectorAll('feFlood');
    for (const flood of floods) {
      /* Must use getComputedStyle — CSS may override SVG attribute */
      const cs = getComputedStyle(flood);
      const floodColor   = cs.floodColor   || flood.getAttribute('flood-color')   || 'black';
      const floodOpacity = parseFloat(cs.floodOpacity || flood.getAttribute('flood-opacity') || '1');

      /* Check for CSS vs attribute mismatch */
      const attrColor = flood.getAttribute('flood-color') || '';
      if (attrColor && cs.floodColor && attrColor !== cs.floodColor) {
        findings.push({
          severity: 'high', flood,
          issue: `flood-color attribute "${attrColor}" overridden by CSS "${cs.floodColor}" — attribute audit sees wrong color`
        });
      }

      /* Check if flood is opaque and background-matching */
      const bgRGB = parseColorToRGB(pageBackground);
      const floodRGB = parseColorToRGB(floodColor);
      if (floodOpacity > 0.8 && floodRGB && bgRGB && colorsMatch(floodRGB, bgRGB, 20)) {
        /* Check compositing operator: is flood placed over SourceGraphic? */
        const composite = flood.parentElement?.querySelector('feComposite, feBlend');
        findings.push({
          severity: 'critical', flood,
          issue: `feFlood with background-matching flood-color (${floodColor}) at opacity=${floodOpacity} — likely composited over consent text to erase it`
        });
      }
    }
  }

  return findings.length ? findings : null;
}

Remediation