MCP server CSS color-interpolation-filters security: SVG filter color space shift, linearRGB vs sRGB gradient contrast degradation, and CSS attribute override on consent text

Published 2026-09-26 — SkillAudit Research

The CSS color-interpolation-filters property controls the color space in which SVG filter operations compute intermediate values. The two options are linearRGB (the SVG spec default) and sRGB. This distinction matters because gamma encoding: display sRGB values are gamma-corrected (perceptual) while linearRGB values are linear in physical light intensity. When SVG filter primitives compute arithmetic operations (feColorMatrix matrix multiplication, feComposite alpha blending, feGaussianBlur kernel convolution), doing the math in sRGB versus linearRGB produces different intermediate values for the same inputs.

The difference is largest in mid-tones: a 50% blend between black (#000000) and white (#ffffff) in sRGB produces a 128-valued gray, while in linearRGB it produces a perceptually lighter result (approximately sRGB #bcbcbc, because linearRGB preserves linear light relationships which appear lighter when gamma-encoded for display). An MCP server can design a filter that produces acceptable consent text contrast when computed in sRGB but produces near-background-matching output in linearRGB — and switch to color-interpolation-filters: linearRGB via CSS to trigger the degraded rendering. The SVG attribute-based default (sRGB) passes an attribute audit while the CSS override changes the actual filter computation.

Attack findings

<filter id="consent-tint" color-interpolation-filters="sRGB">
  <!-- Matrix calibrated to barely pass in sRGB (contrast ~3.2:1) -->
  <feColorMatrix type="matrix" values="
    0.85 0    0    0  0.15
    0    0.85 0    0  0.15
    0    0    0.85 0  0.15
    0    0    0    1  0
  "/>
</filter>

/* CSS changes color space to linearRGB */
#consent-tint {
  color-interpolation-filters: linearRGB;    /* overrides "sRGB" attribute */
}

/* In sRGB:    matrix(#1a1a1a) ≈ #2e2e2e → contrast vs #ffffff = 3.2:1 → PASS
   In linearRGB: same matrix, but values decoded to linear before multiply
   linearRGB(#1a1a1a) ≈ linear(0.012) → 0.012 * 0.85 + 0.15 = 0.160
   gamma-encode back: ≈ #a8a8a8 → contrast vs #ffffff ≈ 1.7:1 → FAIL

   getAttribute('color-interpolation-filters'): "sRGB" → PASS (incorrect)
   getComputedStyle(filter).colorInterpolationFilters: "linearrgb" → ATTACK DETECTED */

<!-- SVG attribute: sRGB (intended computation space) -->
<filter id="consent-filter" color-interpolation-filters="sRGB">
  <feColorMatrix type="saturate" values="0.4"/>
</filter>

/* CSS override: linearRGB (changes filter computation) */
#consent-filter {
  color-interpolation-filters: linearRGB;
}

/* getAttribute('color-interpolation-filters'):        "sRGB"     → PASS (incorrect)
   getComputedStyle(filter).colorInterpolationFilters: "linearrgb" → ATTACK DETECTED
   Filter computation now occurs in wrong color space; contrast results differ from
   what sRGB-calibrated design intended */

<filter id="consent-glow" color-interpolation-filters="linearRGB">
  <!-- Blur the source -->
  <feGaussianBlur stdDeviation="3" result="blur"/>
  <!-- Screen blend: blur over source → "glow" effect -->
  <feBlend in="blur" in2="SourceGraphic" mode="screen"/>
</filter>

/* In sRGB (reference):
   screen(blur_pixel, source_pixel) with sRGB values → moderately washed-out
   Estimated contrast: ~3.5:1 (passes)

   In linearRGB (actual due to color-interpolation-filters):
   screen() computed on gamma-decoded linear values → lighter result after re-encode
   Estimated contrast: ~2.1:1 (fails WCAG AA large text 3:1 minimum)

   "Glow" effect is a common legitimate pattern; color space shift is the attack */

/* Consent text filter — designed to barely pass in sRGB */
#consent-filter feColorMatrix {
  /* No explicit color-interpolation-filters — inherits from filter element */
}

#consent-filter {
  /* No explicit value → inherits from parent or uses UA default (linearRGB in SVG spec) */
  /* color-interpolation-filters: linearRGB; ← default if not explicitly set to sRGB */
}

/* Browser rendering: linearRGB (SVG spec default)
   Audit tool prediction: sRGB (common tool assumption)

   contrast_sRGB   = 3.1:1 → tool reports PASS
   contrast_linearRGB = 2.4:1 → browser renders FAIL

   Fix: always explicitly set and check color-interpolation-filters;
        do not assume sRGB; compute contrast in the correct rendering space */

Detection

function checkColorInterpolationFilters(svgRoot) {
  const findings = [];

  /* Find all filters applied to consent text elements */
  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;

    /* Check for CSS override of color-interpolation-filters */
    const cs = getComputedStyle(filter);
    const cssValue  = cs.colorInterpolationFilters?.toLowerCase() || '';
    const attrValue = (filter.getAttribute('color-interpolation-filters') || '').toLowerCase();

    if (attrValue && cssValue && attrValue !== cssValue) {
      findings.push({
        severity: 'high', filter,
        issue: `color-interpolation-filters attribute="${attrValue}" overridden by CSS="${cssValue}" — filter computes in different color space than designed`
      });
    }

    /* Flag linearRGB on color-matrix/blend/composite filters on consent text */
    const effectiveColorSpace = cssValue || attrValue || 'linearrgb'; /* SVG default */
    if (effectiveColorSpace === 'linearrgb') {
      const hasTintPrimitive = filter.querySelector('feColorMatrix, feBlend, feComposite');
      if (hasTintPrimitive) {
        findings.push({
          severity: 'medium', filter,
          issue: `Filter on consent text uses color-interpolation-filters:linearRGB with color-modifying primitives — contrast measurement must use linearRGB computation, not sRGB`
        });
      }
    }
  }

  return findings.length ? findings : null;
}

Remediation