MCP server SVG filter region x/y/width/height consent security

The SVG <filter> element's x, y, width, and height attributes define the filter region — the bounding box within which the filter is applied. These attributes are distinct from the filter primitive chain: they determine which pixels enter and exit the filter pipeline. The SVG specification defines specific behavior at boundary conditions: a zero-area region produces transparent output. This boundary condition, combined with the ability to set precise sub-region coverage and extreme expanded regions, creates four distinct consent attack surfaces that are independent of the filter primitive chain contents.

SA-CSS-FRG-001: Zero-area filter region (width=0 or height=0)

Setting width="0" or height="0" on the <filter> element invokes the SVG spec zero-area rule: the filter output is transparent black. The entire consent element becomes transparent. This is the most minimal filter-region attack — it requires no filter primitive chain at all. An empty filter body (<filter id="f"></filter>) with width="0" or height="0" achieves complete transparency. The element retains its layout, DOM presence, textContent, event handlers, and BCR. Because the filter element itself appears to have no primitives, analysis focused on primitive-chain attacks misses this entirely.

<!-- CRITICAL: empty filter chain + zero width = transparent consent element -->
<filter id="frg1" x="-10%" y="-10%" width="0%" height="120%">
  <!-- no primitives needed: width=0 makes output transparent per SVG spec -->
</filter>
<div style="filter: url(#frg1)">
  I consent to the above terms of service.
  <!-- Fully transparent. Element present. textContent intact. BCR unchanged. -->
</div>

SA-CSS-FRG-002: Partial coverage — filter only applied to sub-region

With x="50%" y="50%" width="50%" height="50%", the filter region is the bottom-right quadrant of the element bounding box. SVG spec behavior for pixels outside the filter region: they are rendered using the SourceGraphic (unfiltered passthrough). If the consent text is laid out with the main content in the top portion (typical for a single-line or two-line button), the top half renders normally while the bottom-right quadrant is processed by the filter chain. A white-out filter chain applied only to the bottom-right quadrant produces a split rendering: the top-left half visible (shows "I agree" or similar), the bottom-right half white-out. On a white-background MCP client, the bottom-right quadrant is invisible regardless — so the partial filter appears to produce a "normal" rendering while potentially hiding legally significant content that appears in the filtered sub-region.

<filter id="frg2" x="50%" y="50%" width="50%" height="50%"
        filterUnits="objectBoundingBox">
  <feFlood flood-color="white" flood-opacity="1"/>
</filter>
<!-- Pixels in top-left 75% of element: unfiltered (SourceGraphic passthrough) -->
<!-- Pixels in bottom-right 25%: processed by feFlood → white → invisible on white bg -->

SA-CSS-FRG-003: Massively expanded region for displacement capture

The default filter region is x="-10%" y="-10%" width="120%" height="120%" — a 10% margin around the element bounding box. For feDisplacementMap attacks with large scale values (e.g., scale=500), displaced pixels can move up to ±250px from their original positions. If the displacement moves pixels outside the default filter region, those pixels are clipped and lost (they do not appear at the displaced location). An attacker who uses an expanded filter region (x="-5000%" y="-5000%" width="10100%" height="10100%") ensures that all displaced pixels, regardless of displacement magnitude, remain within the filter region and can be captured or composited by later primitives. This is a setup primitive for large-scale displacement attacks, not an attack on its own, but its presence in a consent element filter should trigger investigation of the full displacement chain.

<!-- Expanded region: enables off-element displacement capture -->
<filter id="frg3" x="-5000%" y="-5000%"
        width="10100%" height="10100%"
        filterUnits="objectBoundingBox">
  <feTurbulence baseFrequency="0.01" numOctaves="1" seed="7" result="noise"/>
  <feDisplacementMap in="SourceGraphic" in2="noise" scale="500"
    xChannelSelector="R" yChannelSelector="G"/>
  <!-- Without expanded region: displaced pixels outside -10%/+120% are clipped -->
  <!-- With expanded region: all displaced pixels retained → text moved far off position -->
</filter>

SA-CSS-FRG-004: JS mousedown filter region shrink (width 120% → 0%)

Initial state: the filter has width="120%" — normal filter region, any filter primitives applied normally (or an empty chain that passes through the source). Consent text is visible. On mousedown, the script sets width to "0%" on the filter element. The SVG zero-area rule immediately makes the entire consent element transparent. This attack requires no changes to the filter primitive chain — the attacker modifies only the filter's region dimensions. Because the initial state has a normal-looking filter region and a benign (or empty) primitive chain, static analysis of the initial DOM produces no findings.

consentEl.addEventListener("mousedown", () => {
  const filterEl = document.getElementById("consentFilter");
  filterEl.setAttribute("width", "0%"); // zero-area rule → transparent output
  // No primitive changes needed — region shrink alone triggers spec behavior
});

Attack summary

Defences

• Check filter region dimensions on consent ancestor filters: For each <filter> referenced by a consent element or its ancestors, read the width and height attributes. If either resolves to 0 (or a value less than 1%), flag SA-CSS-FRG-001-class attack. Convert percentage values using the filterUnits coordinate system before comparison.
• Flag sub-region filters on consent elements: If the filter region covers less than 80% of the element bounding box (x > 10%, y > 10%, width < 90%, or height < 90%), flag for partial coverage analysis. Determine which portion of the element's consent content falls within the filtered sub-region and evaluate the filter chain output for that sub-region.
• Flag extremely large filter regions: Filter regions with width or height exceeding 500% indicate setup for large-scale displacement. Increase scrutiny of the filter primitive chain for feDisplacementMap with large scale values.
• MutationObserver on filter width and height: SA-CSS-FRG-004 changes only the filter element's width attribute. Observe width and height attribute mutations on <filter> elements referenced by consent ancestor elements.

SkillAudit findings for this attack surface

← Blog  |  Security Checklist