MCP server CSS fePointLight security: word-level x/y coordinate targeting, low-z steep-angle saturation, cursor-tracking animation, and multi-source consent word array

Published 2026-10-01 — SkillAudit Research

The SVG fePointLight element defines a point light source at a specific position in the coordinate space of the filter region. It must appear as a child of feSpecularLighting or feDiffuseLighting. The light position parameters — x, y, and z — determine where the light originates in the filter's user-space coordinate system. The x and y coordinates map to the horizontal and vertical position within the filter region; z represents the elevation above the surface (in the same coordinate units). The light direction vector at any pixel is computed as the normalized vector from the surface pixel to the light position.

For feSpecularLighting, the output at each pixel depends on the specular reflection formula: output = specularColor × specularConstant × pow(dot(N, H), specularExponent), where H is the half-vector between the surface normal and the light direction. At the pixel directly beneath the light source (where the light direction vector is straight down into the surface, H ≈ surface normal), the dot product approaches 1.0, and with high specularConstant, the output saturates to white.

Light direction and hotspot geometry

The light direction vector L at pixel (px, py) from a fePointLight at (lx, ly, lz) is (lx-px, ly-py, lz) / ||(lx-px, ly-py, lz)||. The specular contribution peaks where L ≈ H (the surface normal for a flat surface is (0,0,1)). For a flat surface, the peak illumination radius scales with lz: small z means a narrow, steep hotspot; large z means a broad, low-intensity illumination. A fePointLight at z=10 with the element at width=200px produces a hotspot radius of approximately 10–15px — sufficient to cover a single word.

Attack findings

<!-- Targeting word at pixel (142, 18) within the consent element's filter region -->
<filter id="f1">
  <feSpecularLighting specularConstant="15" specularExponent="64" lighting-color="white">
    <fePointLight x="142" y="18" z="12"/>
  </feSpecularLighting>
  <feComposite in="SourceGraphic" in2="result1" operator="arithmetic"
    k1="0" k2="1" k3="1" k4="-0.02"/>
</filter>

// Runs at button.mouseenter, before user completes click:
const wordRect = getWordRange('agree').getBoundingClientRect();
const filterEl = document.querySelector('#f1 fePointLight');
filterEl.setAttribute('x', wordRect.left - consentRect.left + wordRect.width/2);
filterEl.setAttribute('y', wordRect.top  - consentRect.top  + wordRect.height/2);

Detection algorithm

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

  for (const specEl of filter.querySelectorAll('feSpecularLighting, feDiffuseLighting')) {
    const specConst = parseFloat(specEl.getAttribute('specularConstant') ?? '1');
    const specExp   = parseFloat(specEl.getAttribute('specularExponent') ?? '1');
    const diffConst = parseFloat(specEl.getAttribute('diffuseConstant') ?? '1');
    const isSpecular = specEl.tagName.toLowerCase() === 'fespecularlighting';

    for (const light of specEl.querySelectorAll('fePointLight')) {
      const lx = parseFloat(light.getAttribute('x') ?? '0');
      const ly = parseFloat(light.getAttribute('y') ?? '0');
      const lz = parseFloat(light.getAttribute('z') ?? '100');

      // Compute hotspot radius (approx): at what pixel distance d does
      // the illumination drop below saturation threshold?
      // For specular: output ≈ specConst × (lz / sqrt(d²+lz²))^specExp
      // Saturates to white when specConst × (lz/sqrt(d²+lz²))^specExp >= 1
      const maxContrib = isSpecular ? specConst * Math.pow(1, specExp) : diffConst;
      if (maxContrib >= 1.0) {
        // Find hotspot radius
        let hotspotR = 0;
        for (let d = 0; d <= 200; d++) {
          const cosTheta = lz / Math.sqrt(d*d + lz*lz);
          const contrib = isSpecular
            ? specConst * Math.pow(cosTheta, specExp)
            : diffConst * cosTheta;
          if (contrib < 1.0) { hotspotR = d; break; }
        }

        // Check if hotspot center is within the consent element's filter region
        const elW = consentRect.width;
        const elH = consentRect.height;
        if (lx >= 0 && lx <= elW && ly >= 0 && ly <= elH) {
          findings.push({
            severity: hotspotR < 30 ? 'high' : 'medium',
            el: light,
            issue: `fePointLight at (${lx},${ly},${lz}) within consent element region; saturation hotspot radius ~${hotspotR}px — covers ${hotspotR < 30 ? 'single word' : 'multiple words'}; aggregate contrast may pass while targeted words are erased`
          });
        }
      }

      // Flag position very close to zero (targeting a specific word vs. general illumination)
      if (lz < 20 && lx > 0 && ly > 0) {
        findings.push({
          severity: 'medium',
          el: light,
          issue: `fePointLight z="${lz}" — very low elevation creates narrow hotspot (~${lz}px radius); check x/y position relative to consent element word layout`
        });
      }
    }
  }

  return findings.length ? findings : null;
}

Remediation