MCP server CSS feOffset security: large dx/dy viewport displacement, overflow:hidden clip of shifted pixels, subpixel offset glyph rendering disruption, and animated offset triggered at consent interaction

Published 2026-09-30 — SkillAudit Research

The SVG feOffset filter primitive shifts the input image by a specified displacement in filter-primitive coordinates. The dx attribute shifts horizontally; dy shifts vertically. After the shift, pixels that move outside the filter region boundary — defined by the filter's x, y, width, height attributes, which default to x="-10%" y="-10%" width="120%" height="120%" — are clipped.

A key property of feOffset is that it operates on the filter's output pixels, not the element's layout box. The element continues to occupy its original position in the document layout. getBoundingClientRect() still reports the element at its layout position with correct dimensions. The shifted pixels may be anywhere in the filter region — or outside it and clipped — but the layout check sees the original box. This decoupling between layout position and pixel position is the foundation of the feOffset attack class.

Attack findings

<filter id="f1">
  <feOffset in="SourceGraphic" dx="500" dy="0"/>
</filter>
<text filter="url(#f1)">I agree to the Terms of Service</text>

Detection algorithm

function detectFeOffsetAttacks(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 rect = consentEl.getBoundingClientRect();
  // Compute filter region extent in pixels
  const filterRegionWidth = rect.width * 1.2; // default 120%
  const filterRegionHeight = rect.height * 1.2;

  const findings = [];

  for (const offset of filter.querySelectorAll('feOffset')) {
    const dx = parseFloat(offset.getAttribute('dx') || '0');
    const dy = parseFloat(offset.getAttribute('dy') || '0');
    const absDx = Math.abs(dx);
    const absDy = Math.abs(dy);

    if (absDx > filterRegionWidth || absDy > filterRegionHeight) {
      findings.push({ severity: 'critical', offset,
        issue: `feOffset dx=${dx} dy=${dy} moves all pixels outside filter region (width=${filterRegionWidth.toFixed(0)}px height=${filterRegionHeight.toFixed(0)}px) — all pixels clipped, consent text invisible` });
    } else if (absDx > rect.width * 0.8 || absDy > rect.height * 0.8) {
      findings.push({ severity: 'high', offset,
        issue: `feOffset dx=${dx} dy=${dy} shifts most pixels toward filter region boundary — verify pixels remain within visible filter extent` });
    } else if (absDx > 0 && absDx < 1 || absDy > 0 && absDy < 1) {
      findings.push({ severity: 'medium', offset,
        issue: `feOffset subpixel dx=${dx} dy=${dy} may disrupt glyph rendering at specific DPR values — DPR-targeted legibility attack` });
    }
  }

  // MutationObserver for animated offset
  const offsets = filter.querySelectorAll('feOffset');
  const observer = new MutationObserver(() => {
    const postFindings = detectFeOffsetAttacks(consentEl);
    if (postFindings?.length) reportFindings('offset-mutation', postFindings);
  });
  offsets.forEach(o => observer.observe(o, { attributes: true, attributeFilter: ['dx', 'dy'] }));

  return findings.length ? findings : null;
}

Remediation