MCP server CSS stroke-dasharray security: SVG consent text invisibility, character masking, and stroke-opacity attacks

Published 2026-09-26 — SkillAudit Research

CSS stroke-dasharray defines a pattern of dashes and gaps for the stroke of SVG shape outlines and text. On SVG <text> and <tspan> elements, the stroke outlines each character glyph. With a standard fill color and no stroke, characters are filled but not outlined. With fill: transparent (or fill: none) and a stroke, characters are only rendered as outlines. With fill: transparent and a stroke-dasharray that produces no visible dash, the text element occupies space and has DOM content but renders zero visible pixels.

MCP servers that render consent dialogs as SVG (a pattern used for custom-styled dialogs in WebGL contexts, canvas overlays, and SVG-based UI toolkits) can exploit this property to make consent text invisible, mask specific characters, or apply stroke patterns that obscure text in less obvious ways. The attack is invisible to DOM-content audits, which confirm the text node contains the expected consent string without verifying that the string renders visibly.

Attack findings

<svg width="400" height="200">
  <text x="10" y="30"
    style="fill: transparent;
           stroke: #333;
           stroke-dasharray: 0, 9999;">
    By clicking Accept, you agree to the above terms.
  </text>
</svg>

<!-- Checks:
  textContent: "By clicking Accept, you agree to the above terms." ✓ (correct)
  getBoundingClientRect(): { width: 380, height: 20 } ✓ (positive)
  display: block (SVG element default) ✓
  visibility: visible ✓
  Rendered pixels: 0 (fill:transparent + stroke:0-dash) ✗ INVISIBLE -->

<text style="
  fill: rgba(0,0,0,0.15);      /* very faint fill — barely visible */
  stroke: rgba(0,0,0,0.15);
  stroke-width: 0.5;
  stroke-dasharray: 8, 8;      /* 8px dash, 8px gap */
  font-size: 14px;              /* average char width ~8px at 14px */
">
  By clicking Accept, you agree to binding arbitration.
</text>

<!-- At 14px font size, average ASCII character width ≈ 7-9px.
  stroke-dasharray: 8, 8 repeats every 16px.
  Roughly alternating characters fall in dash vs gap phase.
  Visual result: fragmented, partially legible text.
  "binding arbitration" may read as "bnig arirto" — key terms removed.
  textContent check: full string present → PASS (incorrect) -->

<svg>
  <text y="20" style="font-size:14px">
    Permission list header: This skill requests:
  </text>
  <text y="40"
    style="fill: #333;
           stroke: #fff;          /* same as background */
           stroke-width: 20px;
           stroke-opacity: 0;">  /* invisible but occupies paint space */
    By clicking Accept, you agree to the above terms.
  </text>
</svg>

<!-- The consent text renders normally (fill:#333).
  The 20px stroke is stroke-opacity:0 — invisible.
  But in SVG painting order, this zero-opacity stroke covers
  ±10px around every character of the consent text.
  If positioned to overlap the header line (y=20 vs y=40 with large font),
  the invisible stroke band can obscure the header text visually.
  The header text element still exists in the DOM. -->

<!-- pathLength scales the coordinate system for dasharray -->
<text pathLength="100"
  style="fill: transparent;
         stroke: #333;
         stroke-width: 1;
         /* dash: 50-unit gap (first half = invisible), then 50-unit dash (second half) */
         stroke-dasharray: 0 50, 50 0;">
  By clicking Accept, you agree to binding arbitration in Delaware.
</text>

<!-- With pathLength=100:
  First half of path (chars: "By clicking Accept, you agree to") → gap → invisible
  Second half (chars: "binding arbitration in Delaware") → dash → visible
  Result: users see only "binding arbitration in Delaware" without the
  "By clicking Accept, you agree to" introduction establishing consent.
  textContent check: full string → PASS (attack invisible to DOM checks) -->

Detection

function checkStrokeDasharray(svgRoot) {
  const textEls = svgRoot.querySelectorAll('text, tspan');
  const findings = [];

  for (const el of textEls) {
    if (!el.textContent.trim()) continue;

    const cs = getComputedStyle(el);
    const fill   = cs.fill   || '';
    const stroke = cs.stroke || '';
    const sda    = cs.strokeDasharray || '';
    const sOp    = parseFloat(cs.strokeOpacity || '1');
    const fOp    = parseFloat(cs.fillOpacity   || '1');
    const sw     = parseFloat(cs.strokeWidth   || '1');

    const fillInvisible  = fill  === 'none' || fill  === 'transparent' ||
                           fill  === 'rgba(0, 0, 0, 0)' || fOp === 0;
    const strokeInvisible = stroke === 'none' || stroke === 'transparent' ||
                            stroke === 'rgba(0, 0, 0, 0)' || sOp === 0;

    /* Both fill and stroke invisible → zero rendered pixels */
    if (fillInvisible && strokeInvisible) {
      findings.push({ severity: 'high', el, issue: 'SVG text: fill and stroke both transparent — zero rendered pixels, consent text invisible' });
      continue;
    }

    /* Dasharray with fill-invisible → check if dasharray produces any dash */
    if (fillInvisible && sda && sda !== 'none') {
      const parts = sda.split(/[\s,]+/).map(Number).filter(n => !isNaN(n));
      const dashLengths = parts.filter((_, i) => i % 2 === 0);
      const allZero = dashLengths.every(d => d === 0);
      if (allZero) {
        findings.push({ severity: 'high', el, issue: `SVG text: fill:transparent + stroke-dasharray with all-zero dashes — no rendered stroke; text invisible` });
      } else if (parts.length >= 2) {
        /* Check if alternating pattern could mask characters */
        const avgGap = parts.filter((_, i) => i % 2 === 1).reduce((a, b) => a + b, 0) /
                       parts.filter((_, i) => i % 2 === 1).length;
        if (avgGap >= 4) {
          findings.push({ severity: 'medium', el, issue: `SVG text: fill:transparent + stroke-dasharray with ${avgGap.toFixed(0)}px gaps — may mask alternating characters at typical font sizes` });
        }
      }
    }

    /* Large invisible stroke width overpainting adjacent content */
    if (sw > 10 && sOp === 0) {
      findings.push({ severity: 'medium', el, issue: `SVG text: stroke-opacity:0 + stroke-width:${sw}px — invisible ${sw}px stroke band may overpaint adjacent SVG content` });
    }
  }

  return findings.length ? findings : null;
}

Remediation