MCP server SVG feGaussianBlur stdDeviation consent security

The feGaussianBlur filter primitive applies a Gaussian blur with standard deviation controlled by stdDeviation. The attribute accepts a single value (isotropic blur, same sigma in X and Y) or two values separated by a space (anisotropic blur, independent sigma per axis). The blur is defined as a convolution with a Gaussian kernel: for sigma=s, each output pixel is a weighted average of a neighborhood spanning approximately ±3s pixels in each direction.

SA-CSS-GSD-001: stdDeviation=100 extreme isotropic blur

With stdDeviation="100", the Gaussian kernel radius spans approximately ±300px. For a typical consent panel line of text (glyph height ~16px, glyph width ~8px per character), the glyph area is less than 1% of the blur kernel area. The weighted average of the blur output at any former glyph pixel is dominated by the surrounding white background luminance. For dark text (e.g., #111111, luminance ≈ 0.014), the blur output luminance approaches: L_out ≈ 0.99 × L_white + 0.01 × L_text ≈ 0.99. Resulting contrast ratio against white background: (1 + 0.05) / (0.99 + 0.05) ≈ 1.01:1 — below any legibility threshold. The element remains in the DOM, getBoundingClientRect returns the original dimensions, textContent is intact, and getComputedStyle.color returns the original foreground color.

<filter id="gsd1">
  <feGaussianBlur stdDeviation="100"/>
</filter>
<div style="filter:url(#gsd1)">
  I agree to the terms and conditions. Click here to proceed.
</div>
<!-- sigma=100: blur radius ~300px; dark glyph pixels averaged with white surroundings → near-white output -->

SA-CSS-GSD-002: stdDeviation="100 0" anisotropic horizontal smear

The two-value form stdDeviation="σX σY" applies independent sigma values per axis. With stdDeviation="100 0", the X axis receives extreme blur (sigma=100) while the Y axis receives no blur (sigma=0). The effect: each row of pixels is averaged horizontally across ±300px but not averaged vertically. Individual character glyphs are smeared horizontally into grey bands spanning the full element width. The text is unreadable — no glyph shapes survive — but the output is not near-transparent. Each row value equals the average luminance of that row across the element, which for a row that is mostly background but contains some glyph pixels produces a light-gray value (contrast ≈ 1.2:1 against the background). This attack evades: alpha=0 detection, near-transparent detection, and even some blur-threshold checks that only measure isotropic sigma.

<filter id="gsd2">
  <feGaussianBlur stdDeviation="100 0"/>
</filter>
<!-- σX=100, σY=0: horizontal smear; each glyph column averaged into full-width gray band; unreadable -->

SA-CSS-GSD-003: stdDeviation=0.1 incremental baseline

A near-zero initial stdDeviation="0.1" applies a visually imperceptible blur (sub-pixel radius). This establishes the feGaussianBlur element in the filter chain and avoids "attribute absent" detection. JS then increments stdDeviation from 0.1 toward 100 on each interaction event: hover, focus, keydown, mouseenter. Each increment is small enough to be ambiguous — the transition from 0.1 to 2 is visually slight, from 2 to 10 produces moderate softening, and from 10 to 100 completes the blur-to-white effect. Scanners observing the static initial state see stdDeviation=0.1 and may skip or rate as low severity; the runtime blur progression is only detectable via dynamic analysis.

const fb = document.querySelector("#consentFilter feGaussianBlur");
let sigma = 0.1;
consentEl.addEventListener("mouseover", () => {
  sigma = Math.min(sigma * 5, 100);
  fb.setAttribute("stdDeviation", sigma); // incremental blur on hover
});

SA-CSS-GSD-004: JS mousedown stdDeviation injection (0 → 100)

Initially, the feGaussianBlur uses stdDeviation="0" — an identity transform that renders the consent text fully sharp. On mousedown, the script changes stdDeviation to "100", instantly blurring the text to near-white. The user sees sharp readable consent text until the click begins, at which point the text blurs to illegibility. The click event itself fires on the underlying element (consent text is still the event target due to DOM presence), and the user believes they clicked on visible consent text while the text was actually being obscured at click time.

consentEl.addEventListener("mousedown", () => {
  document.querySelector("#consentFilter feGaussianBlur")
    .setAttribute("stdDeviation", "100"); // blur-to-white at mousedown
});

Attack summary

Defences

• Threshold relative to element size: Flag stdDeviation > max(element_width, element_height) × 0.25. For a 400px-wide panel this triggers at sigma > 100px, which is sufficient for blur-to-white on any typical dark text. Do not use absolute thresholds (e.g., stdDeviation > 10) since small panels can be blurred at lower sigma values.
• Anisotropic detection: Parse both values of two-value stdDeviation. If max(σX, σY) > threshold, flag independently of min(σX, σY). Attackers exploit scanners that average the two values, reducing a "100 0" to apparent sigma=50.
• Simulate blur output contrast: For the detected sigma, construct a representative input (dark text luminance=0.05 on white background 1.0) and compute the Gaussian-weighted average within a window equal to element dimensions. Compare resulting luminance against background to estimate WCAG contrast ratio. Flag if < 4.5:1 for normal text.
• MutationObserver on stdDeviation: SA-CSS-GSD-004 and SA-CSS-GSD-003 change stdDeviation at runtime. Observe the stdDeviation attribute of feGaussianBlur elements on consent ancestor filters. Any post-load change to a value exceeding the threshold is a flag.

SkillAudit findings for this attack surface

← Blog  |  Security Checklist