MCP server CSS feColorMatrix security: SVG feColorMatrix filter type matrix coefficient attack, saturate desaturation to gray, hueRotate background-matching, and CSS filter attribute override on consent text

Published 2026-09-26 — SkillAudit Research

The SVG feColorMatrix filter primitive transforms the color and alpha values of each input pixel using one of four computation modes: type="matrix" (full 5×4 RGBA matrix multiplication), type="saturate" (scalar saturation adjustment), type="hueRotate" (hue rotation in degrees), and type="luminanceToAlpha" (replaces alpha channel with luminance). Each mode produces a pixel-level color transformation that is completely independent of the element's fill attribute. Standard contrast checkers that inspect getComputedStyle(el).fill or the SVG fill attribute will see the original fill color — not the filter output color — and will produce an incorrect contrast reading.

An MCP server can exploit this gap by using feColorMatrix to transform the rendered appearance of consent text while preserving its fill attribute. The matrix type is especially powerful: its 20 free coefficients can map any input color to any output color, including mapping dark consent text to near-white. The saturate and hueRotate types are more constrained but can still degrade contrast in targeted ways, particularly when the background color is specifically chosen to exploit the luminance or hue family of the desaturated or rotated output. CSS can additionally override the values presentation attribute, so the SVG source may show a benign or identity matrix while the browser applies an attack matrix via the CSS cascade.

Attack findings

<filter id="consent-tint">
  <!-- Maps #1a1a1a (dark text) to #e8e8e8 (near-white) -->
  <!-- Looks like a subtle tint; is actually a near-full-erase -->
  <feColorMatrix type="matrix" values="
    0.1  0    0    0  0.89
    0    0.1  0    0  0.89
    0    0    0.1  0  0.89
    0    0    0    1  0
  "/>
</filter>
<!--
  Input: rgb(26, 26, 26) → dark consent text
  R_out = 0.1*(26/255) + 0.89 ≈ 0.9002 → ~229/255 → #e5e5e5
  Contrast vs #ffffff: ~1.28:1 → far below 3:1 minimum

  fill="#1a1a1a" check PASSES (fill is dark)
  getComputedStyle(el).fill → "rgb(26, 26, 26)" PASSES
  Only filter output simulation reveals attack -->

<filter id="consent-desat">
  <feColorMatrix type="saturate" values="0"/>
</filter>
<!-- Consent text: fill="#5566aa" (mid-blue) on background #f0ede8 (warm gray)
     Original contrast: #5566aa vs #f0ede8 = 3.8:1 (passes)
     Desaturated: luminance(#5566aa) ≈ 0.30 → gray(~#888) vs #f0ede8 → 2.3:1 (fails)
     type="saturate" values="0" looks like a grayscale/print style, not an attack -->

<filter id="consent-hue">
  <!-- 210° hue rotation: shifts blue-gray text toward background amber family -->
  <feColorMatrix type="hueRotate" values="210"/>
</filter>
<!-- Original:  #2d4a6b (cool blue-gray) vs #f5f0e8 (warm cream) → high contrast
     Rotated:   hue rotated 210° → warm-ish mid-color → closer to background family
     Specific contrast depends on rotation value and original text/background pair;
     attacker picks rotation to minimize contrast for target text/background combo -->

<!-- SVG attribute: identity matrix (benign, pass-through) -->
<feColorMatrix id="consent-matrix" type="matrix"
  values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>

<!-- CSS (in <style> or external) overrides values attribute via presentation attribute cascade -->
<style>
#consent-matrix {
  /* Overrides SVG attribute: attack matrix mapped dark to near-white */
  values: 0.1 0 0 0 0.89  0 0.1 0 0 0.89  0 0 0.1 0 0.89  0 0 0 1 0;
}
</style>
<!-- getAttribute('values') → "1 0 0 0 0  0 1 0 0 0  ..." → PASS (identity)
     Browser applies CSS values → attack matrix applied to consent text -->

Detection

function checkFeColorMatrix(svgRoot) {
  const findings = [];
  const filters = svgRoot.querySelectorAll('filter');
  for (const filter of filters) {
    const matrices = filter.querySelectorAll('feColorMatrix');
    for (const matrix of matrices) {
      // Check for CSS override of values attribute
      const attrValues = matrix.getAttribute('values');
      const cssValues = getComputedStyle(matrix).values; // may not be exposed in all browsers

      const type = matrix.getAttribute('type') || 'matrix';

      if (type === 'saturate') {
        const satVal = parseFloat(matrix.getAttribute('values') || '1');
        if (satVal < 0.2) {
          findings.push({ severity: 'high', issue: `feColorMatrix saturate=${satVal} — check desaturated contrast for low-luminance text on warm backgrounds` });
        }
      }

      if (type === 'matrix' && attrValues) {
        // Simulate matrix on consent text fill color
        // Parse 20 values, apply 5x4 matrix to RGBA input
        const vals = attrValues.trim().split(/\s+/).map(Number);
        if (vals.length === 20) {
          // Apply to dark text: input rgb(26,26,26,255) normalized
          const r=26/255, g=26/255, b=26/255, a=1;
          const r_out = vals[0]*r + vals[1]*g + vals[2]*b + vals[3]*a + vals[4];
          const g_out = vals[5]*r + vals[6]*g + vals[7]*b + vals[8]*a + vals[9];
          const b_out = vals[10]*r + vals[11]*g + vals[12]*b + vals[13]*a + vals[14];
          // If output is near-white (r_out, g_out, b_out all > 0.8), flag
          if (r_out > 0.75 && g_out > 0.75 && b_out > 0.75) {
            findings.push({ severity: 'critical', issue: `feColorMatrix matrix maps dark text to near-white: output rgb(${Math.round(r_out*255)},${Math.round(g_out*255)},${Math.round(b_out*255)}) — contrast likely below 3:1` });
          }
        }
      }
    }
  }
  return findings.length ? findings : null;
}

Remediation