MCP server CSS feDistantLight security: elevation=90 maximum illumination whitewash, azimuth-calibrated stroke targeting, animated elevation activation, and CSS attribute override discrepancy

Published 2026-10-01 — SkillAudit Research

The SVG feDistantLight element defines a directional light source. Unlike fePointLight (which originates from a fixed position), a distant light has a uniform direction across the entire filter region — identical direction at every pixel. The light direction is specified by two angles: azimuth (degrees, horizontal direction measured counter-clockwise from the positive x-axis; 0° = right, 90° = up, 180° = left, 270° = down) and elevation (degrees above the surface plane; 0° = horizontal grazing, 90° = directly overhead).

When used inside feSpecularLighting, the illumination output per pixel is specularConstant × pow(dot(N, H), specularExponent), where H is the half-vector between the normalized light direction and the viewer direction (assumed (0,0,1) for a flat screen). At elevation=90°, the light direction is (0,0,1), so H = normalize((0,0,1) + (0,0,1)) = (0,0,1). The dot product with surface normal N=(0,0,1) = 1.0. For feDiffuseLighting, the diffuse contribution is diffuseConstant × dot(N, L) = diffuseConstant × 1.0. At maximum elevation, both produce their maximum possible output for every pixel.

Elevation and diffuse dot product

The diffuse illumination per pixel for feDistantLight is:

N = (0, 0, 1)  // surface normal (flat screen)
L = (cos(elevation) × cos(azimuth),  cos(elevation) × sin(azimuth),  sin(elevation))
diffuse = diffuseConstant × dot(N, L) = diffuseConstant × sin(elevation)

At elevation=90°: sin(90°) = 1.0. Diffuse output = diffuseConstant × 1.0. If diffuseConstant=3, output = 3.0, clamped to 1.0 — fully white. The azimuth has no effect on diffuse intensity when elevation=90° (the light direction is straight down into the surface regardless of azimuth).

Attack findings

<filter id="f1">
  <feDiffuseLighting diffuseConstant="5" lighting-color="white" result="light">
    <feDistantLight azimuth="45" elevation="90"/>
  </feDiffuseLighting>
  <feComposite in="SourceGraphic" in2="light" operator="arithmetic" k2="1" k3="1"/>
</filter>

<feDistantLight azimuth="90" elevation="0">
  <animate attributeName="elevation" from="0" to="85"
    begin="submitBtn.mouseenter" dur="0.2s" fill="freeze"/>
</feDistantLight>

Detection algorithm

function detectFeDistantLightAttacks(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 findings = [];

  for (const lightEl of filter.querySelectorAll('feDistantLight')) {
    const parent = lightEl.parentElement;
    if (!parent) continue;
    const isSpecular = parent.tagName.toLowerCase() === 'fespecularlighting';
    const isDiffuse  = parent.tagName.toLowerCase() === 'fediffuselighting';
    if (!isSpecular && !isDiffuse) continue;

    // Resolve elevation: check getComputedStyle first (CSS override), then getAttribute
    let elevation = parseFloat(getComputedStyle(lightEl).elevation
      ?? lightEl.getAttribute('elevation') ?? '0');

    // Also check for inline animate children targeting elevation
    const animateEls = Array.from(lightEl.querySelectorAll('animate, set'))
      .filter(a => a.getAttribute('attributeName') === 'elevation');

    let maxAnimatedElevation = elevation;
    for (const anim of animateEls) {
      const toVal = parseFloat(anim.getAttribute('to') ?? anim.getAttribute('values')?.split(';').pop() ?? '0');
      if (toVal > maxAnimatedElevation) maxAnimatedElevation = toVal;
    }

    const elevToCheck = maxAnimatedElevation;
    const sinElev = Math.sin(elevToCheck * Math.PI / 180);

    if (isDiffuse) {
      const diffConst = parseFloat(parent.getAttribute('diffuseConstant') ?? '1');
      const maxOutput = diffConst * sinElev;
      if (maxOutput >= 0.9) {
        findings.push({ severity: 'high', el: lightEl,
          issue: `feDistantLight elevation=${elevToCheck}°, diffuseConstant=${diffConst} → diffuse output ${maxOutput.toFixed(2)} (≥0.9) — consent text washed to white` });
      }
    }

    if (isSpecular) {
      const specConst = parseFloat(parent.getAttribute('specularConstant') ?? '1');
      const specExp   = parseFloat(parent.getAttribute('specularExponent') ?? '1');
      // At elevation=90, half-vector H = (0,0,1), dot(N,H) = 1.0, output = specConst
      const dotNH = sinElev; // simplified: elevation = 90 → dot(N,H) = 1
      const maxOutput = specConst * Math.pow(dotNH, specExp);
      if (maxOutput >= 0.9) {
        findings.push({ severity: 'high', el: lightEl,
          issue: `feDistantLight elevation=${elevToCheck}°, specularConstant=${specConst}, specularExponent=${specExp} → specular output ${maxOutput.toFixed(2)} — consent text overexposed to white` });
      }
    }

    // Check CSS-vs-attribute discrepancy
    const attrElevation = parseFloat(lightEl.getAttribute('elevation') ?? '0');
    const cssElevation  = parseFloat(getComputedStyle(lightEl).elevation ?? attrElevation.toString());
    if (Math.abs(cssElevation - attrElevation) > 5) {
      findings.push({ severity: 'medium', el: lightEl,
        issue: `feDistantLight elevation discrepancy: attribute="${attrElevation}" but computed="${cssElevation}" — CSS override hiding attack elevation value` });
    }

    // Check animate with high target elevation
    for (const anim of animateEls) {
      const toVal = parseFloat(anim.getAttribute('to') ?? '0');
      if (toVal > 60) {
        const begin = anim.getAttribute('begin') || '';
        findings.push({ severity: 'medium', el: anim,
          issue: `feDistantLight animate: elevation transitions to ${toVal}° (begin="${begin}") — static audit reads initial value; elevation rises to saturating at "${begin}" trigger` });
      }
    }
  }

  return findings.length ? findings : null;
}

Remediation