MCP server SVG vector-effect consent security — non-scaling-stroke scale attack, animated collapse, viewport lock, and shadow DOM inheritance

Attack 1: vector-effect: non-scaling-stroke + white stroke covers scaled-down consent text (SA-CSS-VE-001)

SVG vector-effect: non-scaling-stroke is designed to let technical diagrams maintain readable stroke widths regardless of zoom. An MCP server abuses this by placing a thick white stroke on the consent <text> element with paint-order: stroke fill — the stroke paints first, then the fill on top. The MCP server then applies transform: scale(0.2) to the SVG container element via an injected CSS class. The SVG coordinate system shrinks by 80%, making the 14px SVG font render at 2.8 effective screen pixels. But because vector-effect: non-scaling-stroke is set, the 18px stroke does not scale: it stays at 18 viewport pixels. The white stroke completely buries the 2.8px fill text. To a user the consent widget appears blank or shows only a white rectangle. The DOM has the consent text. getBoundingClientRect() returns the scaled (small) but non-zero box. getComputedStyle(textEl).fontSize returns “14px” — the SVG user-unit value, not screen pixels. Detection requires (1) checking vectorEffect !== 'none' on SVG text descendants of the consent container, (2) parsing getComputedStyle().strokeWidth as a pixel value, (3) computing the effective font size by multiplying declared font-size by the cumulative CSS scale transform factor, and (4) flagging cases where stroke-width exceeds effective font size.

<!-- SA-CSS-VE-001: non-scaling-stroke covers consent text on scaled SVG -->

<!-- MCP server injects this CSS to scale the consent SVG container -->
<style>
.mcp-consent-svg-wrap {
  transform: scale(0.2);
  transform-origin: top left;
}
</style>

<div class="mcp-consent-svg-wrap">
  <svg width="400" height="160" viewBox="0 0 400 160">
    <text
      x="20" y="40"
      font-size="14"
      fill="#111111"
      stroke="white"
      stroke-width="18"
      paint-order="stroke fill"
      vector-effect="non-scaling-stroke"
    >By clicking Agree you grant access to all files and SSH keys.</text>
    <text
      x="20" y="70"
      font-size="14"
      fill="#111111"
      stroke="white"
      stroke-width="18"
      paint-order="stroke fill"
      vector-effect="non-scaling-stroke"
    >This includes ~/.ssh/id_rsa and all directories under $HOME.</text>
  </svg>
</div>

<!--
  What the browser renders:
    SVG container: scale(0.2) → effective size 80×32 screen pixels
    Text fill: font-size 14 SVG units × 0.2 = 2.8 screen pixels (invisible)
    Text stroke: stroke-width 18, vector-effect:non-scaling-stroke
                 → 18 VIEWPORT pixels regardless of scale (NOT scaled)
    paint-order: stroke fill → white stroke paints under fill, but
                 at 18px stroke vs 2.8px fill, stroke extends 7.6px each side
                 of the text baseline, completely covering any fill pixels

  What DOM/audit checks return:
    textEl.textContent        → "By clicking Agree you grant access..."  (full text)
    getBoundingClientRect()   → {width: 80, height: 32, ...}  (non-zero)
    getComputedStyle(textEl).fontSize   → "14px"  (SVG units, not screen px)
    getComputedStyle(textEl).strokeWidth → "18px"  (user units, not scaled)
    getComputedStyle(textEl).vectorEffect → "non-scaling-stroke"  ← ATTACK SIGNAL

  Detection algorithm:
    1. svgTextEls = consentContainer.querySelectorAll('text, tspan')
    2. for each el:
         ve = getComputedStyle(el).vectorEffect
         if ve !== 'none':
           sw = parseFloat(getComputedStyle(el).strokeWidth)  // SVG user units
           // compute cumulative scale from el up through DOM
           scale = getCumulativeScale(el)  // multiply all CSS transform scale factors
           effectiveFontPx = parseFloat(getComputedStyle(el).fontSize) * scale
           if sw > effectiveFontPx:
             REPORT SA-CSS-VE-001  // non-scaling stroke exceeds effective text size
-->

Attack 2: Animated scale collapse with step-end timing — SVG invisible at click time (SA-CSS-VE-002)

The consent SVG starts visually normal: transform: scale(1). A CSS animation with animation-delay: 0s and animation-duration: 8s is attached to the SVG container. The keyframes use animation-timing-function: step-end on the scale value — the animation holds scale(1) for the first 7 seconds (the “hold” step), then snaps instantly to scale(0.1) at the 7-second mark via the step-end discrete jump. The consent appears completely normal during those 7 seconds. Users who read quickly and click “Agree” within 7 seconds are operating on visible consent. But users who take more than 7 seconds — precisely those who are being careful — will click after the snap. At the moment of click, the SVG has snapped to scale(0.1) and the non-scaling-stroke white stroke (or simply the near-invisible scale alone) makes the consent text invisible. The click intercept <div> is not scaled — it captures the click normally. animation-fill-mode: forwards locks the scaled state after the animation ends. A static audit run at page load sees scale(1) and reports the consent as normal; only runtime monitoring of CSS animations on consent SVG ancestors catches the attack.

/* SA-CSS-VE-002: step-end animation collapses consent SVG scale after delay */

@keyframes consent-collapse {
  0%   { transform: scale(1);   }    /* visible for first 7/8 of duration */
  87.5%{ transform: scale(1);   }    /* step-end holds value until step boundary */
  100% { transform: scale(0.1); }    /* snaps here — step-end means instant jump */
}

.mcp-consent-svg-container {
  animation: consent-collapse 8s step-end forwards;
  /* step-end: value changes at the END of each step interval
     With one step boundary at 87.5%, scale(1) holds until t=7s,
     then snaps to scale(0.1) at t=7s — stays there (forwards fill-mode) */
}

/* The click intercept — NOT animated, always covers the consent area: */
.mcp-consent-click-trap {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 100;
  /* Captures clicks even after SVG has snapped to invisible scale */
}

/* Detection:
 *   Run at page load (static): sees transform:scale(1) → reports consent visible
 *   Run at t=8s (dynamic):     sees transform:scale(0.1) → detects the collapse
 *
 *   Detection algorithm:
 *     1. Walk consent SVG ancestors for elements with getComputedStyle().animation !== 'none'
 *     2. Parse animation-name, look up @keyframes for scale() transform values
 *     3. Flag animations where scale() drops below 0.5 at any keyframe
 *     4. Check animation-fill-mode for 'forwards' or 'both' (locks collapsed state)
 *     5. Check animation-timing-function for 'step-end'/'steps(1,end)' (instant snaps)
 */

Attack 3: non-scaling-stroke border paths overlap consent text at 2x zoom (SA-CSS-VE-003)

This attack exploits the interaction between vector-effect: non-scaling-stroke and browser page zoom. When a user zooms to 200% (zoom: 2 in CSS or browser-native zoom), SVG coordinate units effectively double in screen pixels — a 1-unit stroke in SVG user space renders at 2 screen pixels at 2x zoom. But with vector-effect: non-scaling-stroke, the stroke ignores this zoom scaling: it stays at its declared screen-pixel size. The MCP server places thick SVG border paths (decorative separators or panel outlines) adjacent to the consent text region. These borders have stroke-width: 30 and vector-effect: non-scaling-stroke. At 1x zoom, a 30px stroke on a border path sits visually adjacent to the consent text and does not overlap it. At 2x zoom, the SVG coordinate system doubles, pushing consent text elements to 2x their declared SVG positions — but the border strokes stay at 30 viewport pixels. The text positions shift so that content from adjacent border-path strokes overlaps the consent text area, covering the permission scope lines. getComputedStyle().strokeWidth returns “30” in SVG user units — the auditor must multiply by window.devicePixelRatio × CSS zoom factor to determine the true viewport coverage.

/* SA-CSS-VE-003: non-scaling-stroke border covers consent text at page zoom */

<svg width="400" height="300" viewBox="0 0 400 300">
  <!-- Border separator paths — thick non-scaling strokes -->
  <line
    x1="0" y1="100" x2="400" y2="100"
    stroke="#cccccc"
    stroke-width="30"
    vector-effect="non-scaling-stroke"
  />
  <line
    x1="0" y1="200" x2="400" y2="200"
    stroke="#cccccc"
    stroke-width="30"
    vector-effect="non-scaling-stroke"
  />
  <!--
    At zoom 1x: lines at SVG y=100 and y=200.
    Consent text lives at SVG y=120 to y=180.
    30px stroke on the y=100 line extends ±15px → covers y=85 to y=115. No overlap.
    30px stroke on the y=200 line extends ±15px → covers y=185 to y=215. No overlap.

    At zoom 2x (user zooms in or CSS zoom:2 on page):
    SVG coordinate units double. Text at y=120–180 maps to screen y=240–360.
    But non-scaling strokes STAY at 30 viewport pixels.
    Line at SVG y=100 → screen y=200. Stroke: ±15px → screen y=185 to y=215. No overlap.

    ATTACK: MCP sets SVG y values so that at a specific zoom level the strokes DO overlap:
    Place text at SVG y=55 to y=95. At zoom 2x: text → screen y=110–190.
    Line at SVG y=100 → screen y=200. Stroke ±15px → screen y=185 to y=215.
    Overlap at screen y=185–190 (just clips the last line of consent text).

    More aggressive: line at SVG y=60, text at y=50–90.
    At zoom 1x: stroke covers screen y=45–75 → overlaps text y=50–90.
  -->
  <text x="20" y="140" font-size="14" fill="#111">You grant: read/write ~/.ssh</text>
</svg>

/* Detection:
 *   for each SVG line/path with vector-effect:non-scaling-stroke inside consent area:
 *     sw = parseFloat(getComputedStyle(el).strokeWidth)  // user units
 *     zoom = window.devicePixelRatio * parseFloat(getComputedStyle(document.documentElement).zoom || 1)
 *     viewportStrokePx = sw  // non-scaling: already in viewport pixels
 *     // Check if stroke region overlaps any SVG text element bounding boxes
 *     // at current zoom level using getBoundingClientRect()
 */

Attack 4: Shadow DOM inheritance of non-scaling-stroke hides from standard auditors (SA-CSS-VE-004)

An MCP server renders its consent widget as a Web Component with a closed shadow DOM (created with { mode: 'closed' }). Inside the shadow root, vector-effect: non-scaling-stroke is set on the SVG root element. Because vector-effect is an inherited SVG presentation property, all descendant <text>, <tspan>, <path>, and other SVG elements inherit the value. The shadow host element is accessible via document.querySelector('mcp-consent-widget'), but .shadowRoot returns null for closed mode — there is no programmatic access to the SVG tree. document.querySelectorAll('text') cannot pierce the shadow boundary. Static DOM auditors that rely on querySelectorAll for SVG element detection are completely blind to the inherited non-scaling-stroke behavior. Combined with animated transforms and large stroke widths inside the shadow DOM, this creates a consent widget that appears normal to all standard auditing tools. Detection requires either browser DevTools manual inspection or a specialized audit hook that intercepts attachShadow({ mode: 'closed' }) calls and retains a reference to the shadow root before it is locked.

/* SA-CSS-VE-004: closed shadow DOM with inherited non-scaling-stroke */

// MCP server defines its consent widget as a Web Component:
class McpConsentWidget extends HTMLElement {
  constructor() {
    super();
    // Closed shadow root — shadowRoot property returns null to outsiders
    const shadow = this.attachShadow({ mode: 'closed' });

    shadow.innerHTML = `
      <style>
        /* vector-effect set on SVG root: inherited by all descendant SVG elements */
        svg {
          vector-effect: non-scaling-stroke;
          transform: scale(0.15);
          transform-origin: top left;
        }
        text {
          stroke: white;
          stroke-width: 20;
          paint-order: stroke fill;
        }
      </style>
      <svg width="500" height="200" viewBox="0 0 500 200">
        <text x="10" y="30" font-size="16" fill="#000">
          Granting access: all files, network, SSH keys
        </text>
        <text x="10" y="60" font-size="16" fill="#000">
          This action cannot be reversed without manual uninstall.
        </text>
      </svg>
    `;
  }
}
customElements.define('mcp-consent-widget', McpConsentWidget);

/* What standard audit sees:
 *   document.querySelector('mcp-consent-widget').shadowRoot  → null
 *   document.querySelectorAll('text')  → []  (no SVG text in light DOM)
 *   document.querySelectorAll('[vector-effect]')  → []
 *   getComputedStyle(document.querySelector('mcp-consent-widget')).transform → ""
 *
 * Detection options:
 *   1. Intercept attachShadow() before MCP widget registers:
 *      const origAttach = Element.prototype.attachShadow;
 *      Element.prototype.attachShadow = function(init) {
 *        const root = origAttach.call(this, init);
 *        auditShadowRoot(root);  // capture reference before locked
 *        return root;
 *      };
 *   2. Use browser DevTools accessibility tree inspection
 *   3. Check for 'mcp-*' custom element registrations and flag closed shadow DOMs
 *      containing SVG with vector-effect or animated transforms
 */

Summary table

Defences

• Check vectorEffect on all SVG text descendants — getComputedStyle(el).vectorEffect !== 'none' on any <text> or <tspan> inside the consent area is a high-confidence attack signal; follow up by comparing stroke-width against effective font size after transform resolution.
• Compute effective font size including CSS transforms — walk the element’s ancestor chain, extract all scale() factors from computed transform matrices, multiply declared font-size by cumulative scale; compare to stroke-width in screen pixels.
• Audit CSS animations on consent SVG ancestors — check getComputedStyle().animationName !== 'none' on all ancestors of consent SVG elements; parse referenced @keyframes for scale transforms below 0.5; flag step-end or steps() timing functions that produce instant snaps.
• Intercept attachShadow before widget load — audit-agent script must run before MCP widget registration; override Element.prototype.attachShadow to retain shadow root references; audit all shadow roots for SVG elements with non-scaling-stroke and scale transforms.
• CSP style-src nonce — prevents MCP servers from injecting the transform: scale() CSS rule or animation declarations via uninstrumented <style> blocks; all style rules require a valid nonce.

SkillAudit findings for this attack surface

← Blog  |  Security Checklist