MCP server CSS feSpotLight security: narrow cone word targeting, pointsAtX/Y calibration, specularFocus beam hardening, and animated beam rotation across consent text

Published 2026-10-01 — SkillAudit Research

The SVG feSpotLight element defines a spotlight: a light source at a fixed (x, y, z) position that illuminates pixels within a cone defined by the pointsAt direction and the limitingConeAngle. The cone's axis runs from the light source position to the pointsAtX, pointsAtY, pointsAtZ target point. Only pixels whose direction from the source falls within the half-angle specified by limitingConeAngle receive any illumination — pixels outside the cone receive zero contribution from this light source.

The illumination falloff within the cone follows a cosine power law: spot = pow(dot(-L, S), specularFocus), where L is the light direction vector at the pixel and S is the normalized cone axis direction. High specularFocus values produce a sharper beam edge; specularFocus=0 produces uniform illumination across the entire cone. The spotlight contribution is then multiplied by the standard specular or diffuse formula.

Spotlight cone geometry

For a feSpotLight at position (lx, ly, lz=200) pointing at (px, py, pz=0), the cone axis direction is normalize((px-lx, py-ly, pz-lz)). A pixel at (qx, qy, 0) is illuminated only if the angle between the direction from the source to the pixel and the cone axis is less than limitingConeAngle. For a light at z=200 pointing at a word center 200 units above the element plane, a limitingConeAngle=8° produces an illuminated circle of radius approximately 200 × tan(8°) ≈ 28px — sufficient to cover a single word but not the adjacent words.

Attack findings

<!-- word "agree" at layout position x=142, y=18 within filter region -->
<filter id="f1">
  <feSpecularLighting specularConstant="20" specularExponent="32"
      lighting-color="white" result="spec">
    <feSpotLight x="142" y="-200" z="200"
      pointsAtX="142" pointsAtY="18" pointsAtZ="0"
      limitingConeAngle="8" specularFocus="4"/>
  </feSpecularLighting>
  <feComposite in="SourceGraphic" in2="spec" operator="arithmetic"
    k2="1" k3="1" k4="0"/>
</filter>

<feSpotLight x="142" y="-200" z="200" limitingConeAngle="8"
    pointsAtX="-500" pointsAtY="18" pointsAtZ="0">
  <animate attributeName="pointsAtX" from="-500" to="87"
    begin="submitBtn.mouseenter" dur="0s" fill="freeze"/>
</feSpotLight>

Detection algorithm

function detectFeSpotLightAttacks(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 consentRect = consentEl.getBoundingClientRect();
  const elW = consentRect.width;
  const elH = consentRect.height;
  const findings = [];

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

    const lx  = parseFloat(lightEl.getAttribute('x')  ?? '0');
    const ly  = parseFloat(lightEl.getAttribute('y')  ?? '0');
    const lz  = parseFloat(lightEl.getAttribute('z')  ?? '100');

    // Resolve pointsAt — check animate children too
    let pAtX = parseFloat(lightEl.getAttribute('pointsAtX') ?? '0');
    let pAtY = parseFloat(lightEl.getAttribute('pointsAtY') ?? '0');

    const pAtXAnims = Array.from(lightEl.querySelectorAll('animate,set'))
      .filter(a => a.getAttribute('attributeName') === 'pointsAtX');
    const pAtYAnims = Array.from(lightEl.querySelectorAll('animate,set'))
      .filter(a => a.getAttribute('attributeName') === 'pointsAtY');

    // Check if animated pointsAt values fall within consent element
    for (const anim of [...pAtXAnims, ...pAtYAnims]) {
      const toVal = parseFloat(anim.getAttribute('to') ?? '');
      const begin = anim.getAttribute('begin') || '';
      const isInteraction = /click|mouseenter|mousedown|focus/.test(begin);
      if (!isNaN(toVal) && isInteraction) {
        const animAttr = anim.getAttribute('attributeName');
        findings.push({ severity: 'medium', el: anim,
          issue: `feSpotLight animate: ${animAttr} transitions to ${toVal} (begin="${begin}") — spotlight beam moves to consent element region at user interaction; static audit reads initial off-screen value` });
      }
    }

    const coneAngle = parseFloat(lightEl.getAttribute('limitingConeAngle') ?? '90');
    const focus     = parseFloat(lightEl.getAttribute('specularFocus') ?? lightEl.getAttribute('focus') ?? '1');

    // Compute beam radius at the element plane (z=0)
    const dist = Math.sqrt((pAtX-lx)**2 + (pAtY-ly)**2 + lz**2);
    const beamRadiusAtPlane = dist * Math.tan(coneAngle * Math.PI / 180);

    // Check if beam center (pointsAt) is within consent element filter region
    const inElX = pAtX >= 0 && pAtX <= elW;
    const inElY = pAtY >= 0 && pAtY <= elH;

    if (inElX && inElY) {
      const specConst = parseFloat(parent.getAttribute('specularConstant') ?? '1');
      const specExp   = parseFloat(parent.getAttribute('specularExponent') ?? '1');
      const maxOutput = isSpecular ? specConst : parseFloat(parent.getAttribute('diffuseConstant') ?? '1');

      if (maxOutput >= 1.0) {
        findings.push({
          severity: coneAngle < 20 ? 'high' : 'medium',
          el: lightEl,
          issue: `feSpotLight pointsAt=(${pAtX},${pAtY}) within consent element region; coneAngle=${coneAngle}° → beam radius ~${beamRadiusAtPlane.toFixed(0)}px; maxOutput=${maxOutput.toFixed(1)} — ${coneAngle < 20 ? 'word-level' : 'broad'} saturation attack`
        });
      }
    }
  }

  return findings.length ? findings : null;
}

Remediation