MCP server CSS feComponentTransfer security: feFuncA alpha zeroing, feFuncR/G/B table remapping to background color, discrete step-function alpha zero, and gamma exponent contrast reduction below legibility threshold

Published 2026-09-30 — SkillAudit Research

The SVG feComponentTransfer filter primitive applies an independent transfer function to each channel of its input image. Child elements feFuncR, feFuncG, feFuncB, and feFuncA each define the transfer function for the red, green, blue, and alpha channels respectively. Each function can be of type identity (no change), linear (slope + intercept), gamma (power curve), table (piecewise linear interpolation), or discrete (step function). Absent a child function element for a channel, the channel passes through as identity.

The transfer function model creates a uniquely versatile attack surface: feFuncA can zero the alpha channel (making the element fully transparent) or remap it arbitrarily, while feFuncR/feFuncG/feFuncB can remap the color channel values to produce any output color regardless of the source color. A dark consent text element (#1a1a1a) with a feComponentTransfer that maps R→0.96, G→0.96, B→0.96 outputs near-white (#f5f5f5) — indistinguishable from the page background. All DOM property checks still report the original dark fill color, because those checks read pre-filter CSS properties.

Transfer function math

For each type, the mapping from input value C (in [0,1]) to output value C' is:

• identity: C' = C
• linear: C' = slope × C + intercept
• gamma: C' = amplitude × C^exponent + offset
• table: C' = piecewise linear interpolation between tableValues entries; the interval [k/N, (k+1)/N] maps linearly to [tableValues[k], tableValues[k+1]]
• discrete: C' = tableValues[floor(N × C)], where N = number of tableValues entries; a step function

Attack findings

<filter id="f1">
  <feComponentTransfer>
    <feFuncA type="linear" slope="0" intercept="0"/>
  </feComponentTransfer>
</filter>

<filter id="f1">
  <feComponentTransfer>
    <feFuncR type="table" tableValues="0.96 0.96"/>
    <feFuncG type="table" tableValues="0.96 0.96"/>
    <feFuncB type="table" tableValues="0.96 0.96"/>
  </feComponentTransfer>
</filter>

Detection algorithm

function detectFeComponentTransferAttacks(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;

  // Get the element's fill color components
  const fillColor = style.fill || style.color || 'rgb(26,26,26)';
  const [srcR, srcG, srcB] = parseCSSColor(fillColor); // normalized [0,1]
  const srcA = 1.0; // assuming non-transparent fill

  const findings = [];

  for (const ct of filter.querySelectorAll('feComponentTransfer')) {
    const funcA = ct.querySelector('feFuncA');
    const funcR = ct.querySelector('feFuncR');
    const funcG = ct.querySelector('feFuncG');
    const funcB = ct.querySelector('feFuncB');

    // Check alpha channel
    if (funcA) {
      const outA = applyTransferFunction(funcA, srcA);
      if (outA < 0.05) {
        findings.push({ severity: 'critical', ct, funcA,
          issue: `feFuncA (type="${funcA.getAttribute('type')}") maps input alpha to ${outA.toFixed(3)} — consent text alpha zeroed, element fully transparent` });
      }
    }

    // Check color channels
    if (funcR && funcG && funcB) {
      const outR = applyTransferFunction(funcR, srcR);
      const outG = applyTransferFunction(funcG, srcG);
      const outB = applyTransferFunction(funcB, srcB);
      const outLum = 0.2126 * linearize(outR) + 0.7152 * linearize(outG) + 0.0722 * linearize(outB);
      const bgLum = 1.0; // white background
      const contrast = (bgLum + 0.05) / (outLum + 0.05);
      if (contrast < 2.0) {
        findings.push({ severity: 'critical', ct, funcR, funcG, funcB,
          issue: `feComponentTransfer RGB remapping produces output contrast ${contrast.toFixed(2)}:1 against white — consent text functionally invisible` });
      } else if (contrast < 3.0) {
        findings.push({ severity: 'high', ct, funcR, funcG, funcB,
          issue: `feComponentTransfer RGB remapping produces output contrast ${contrast.toFixed(2)}:1 — below 3:1 threshold` });
      }
    }
  }

  return findings.length ? findings : null;
}

function applyTransferFunction(funcEl, inputVal) {
  const type = funcEl.getAttribute('type') || 'identity';
  switch (type) {
    case 'linear': {
      const slope = parseFloat(funcEl.getAttribute('slope') ?? '1');
      const intercept = parseFloat(funcEl.getAttribute('intercept') ?? '0');
      return Math.max(0, Math.min(1, slope * inputVal + intercept));
    }
    case 'gamma': {
      const amp = parseFloat(funcEl.getAttribute('amplitude') ?? '1');
      const exp = parseFloat(funcEl.getAttribute('exponent') ?? '1');
      const off = parseFloat(funcEl.getAttribute('offset') ?? '0');
      return Math.max(0, Math.min(1, amp * Math.pow(inputVal, exp) + off));
    }
    case 'table': {
      const tv = (funcEl.getAttribute('tableValues') || '0 1').split(/\s+/).map(Number);
      const n = tv.length - 1;
      const k = Math.min(Math.floor(inputVal * n), n - 1);
      const t = inputVal * n - k;
      return Math.max(0, Math.min(1, tv[k] + t * (tv[k+1] - tv[k])));
    }
    case 'discrete': {
      const tv = (funcEl.getAttribute('tableValues') || '0 1').split(/\s+/).map(Number);
      const n = tv.length;
      const k = Math.min(Math.floor(inputVal * n), n - 1);
      return tv[k];
    }
    default: return inputVal; // identity
  }
}

function linearize(c) { return c <= 0.04045 ? c/12.92 : Math.pow((c+0.055)/1.055, 2.4); }
function parseCSSColor(css) {
  const m = css.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
  return m ? [parseInt(m[1])/255, parseInt(m[2])/255, parseInt(m[3])/255] : [0.1, 0.1, 0.1];
}

Remediation