MCP server CSS stroke-dashoffset security: SVG consent text gap-shift invisibility, precise word targeting, progress-bar timing attack, and negative offset reversal

Published 2026-09-26 — SkillAudit Research

CSS stroke-dashoffset shifts the starting position of the stroke-dasharray pattern along an SVG element's path. For a simple shape or line, this shifts which portion of the path is rendered as a dash versus a gap. For SVG <text> elements, the "path" is the cumulative outline of all glyph paths — each character contributes a segment of the total path. When fill: transparent is combined with a non-zero stroke-dasharray and a stroke-dashoffset large enough to shift all character glyph paths into gap phases, the text element renders no visible pixels despite having non-zero dash lengths in its dasharray.

This attack is a significant advancement over simple zero-dasharray attacks (covered in the stroke-dasharray security page) because dasharray-only auditors that check for non-zero dash values will pass an element with stroke-dasharray: 10, 5. Only by also checking stroke-dashoffset relative to the element's path length can an auditor determine whether any dash actually falls within a character glyph's path segment.

Attack findings

<text style="
  fill: transparent;
  stroke: #333;
  stroke-width: 1;
  stroke-dasharray: 10, 5;    /* non-zero dash — passes dasharray check */
  stroke-dashoffset: 9999;    /* shifts all glyphs into gap phase — invisible */
">
  By clicking Accept, you agree to the above terms.
</text>

<!-- strokeDasharray: "10, 5" → non-zero dash → PASS (incorrect)
  strokeDashoffset: "9999" → vs path length ~350px → 9999 >> 350 → all gaps
  textContent: full consent string → DOM check: PASS (incorrect)
  getBoundingClientRect(): positive rect → PASS (incorrect)
  Rendered pixels: 0 — dashoffset-only check reveals this -->

<!-- Approximate path length of "By clicking Accept, you agree to " = 240px -->
<text style="
  fill: transparent;
  stroke: #333;
  stroke-width: 1;
  /* Offset = length of framing sentence path */
  stroke-dashoffset: 240;
  /* Dasharray: long dash (shows everything after offset), no gap */
  stroke-dasharray: 9999, 0;
">
  By clicking Accept, you agree to binding arbitration in Delaware.
</text>

<!-- Visible: "binding arbitration in Delaware."
  Invisible: "By clicking Accept, you agree to "
  textContent: complete string → PASS (incorrect)
  Rendered: only acceptance clause — framing context removed -->

@keyframes progress-consent {
  from { stroke-dashoffset: 0; }      /* visible at load */
  to   { stroke-dashoffset: 350; }    /* ≈ path length → invisible at end */
}
<text style="
  fill: transparent;
  stroke: #333;
  stroke-dasharray: 350, 0;           /* all dash = fully visible at offset:0 */
  animation: progress-consent 5s linear forwards;
">
  By clicking Accept, you agree to the above terms.
</text>
<!-- t=0: visible (offset:0, all dashes aligned with glyphs)
  t=2s: partially visible (normal reading time, appears as progress)
  t=5s: invisible (offset:350 ≈ path length, all gaps over glyphs)
  Accept button activates at t=5s → user clicks when text is invisible -->

<text style="
  fill: transparent;
  stroke: #333;
  stroke-dasharray: 10, 5;
  stroke-dashoffset: -9999;   /* negative — shifts reverse direction */
<!-- At glyph path starting position P, effective phase = P - (-9999) = P + 9999
  P + 9999 >> total path length → all in gap phase → invisible
  Spec: "Negative values are permitted."
  Auditor checking offset > 0: -9999 < 0 → not flagged → PASS (incorrect)
  Correct check: abs(strokeDashoffset) relative to path length -->
">
  By clicking Accept, you agree to the above terms.
</text>

Detection

function checkStrokeDashoffset(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 fOp     = parseFloat(cs.fillOpacity   || '1');
    const sda     = cs.strokeDasharray || '';
    const offset  = parseFloat(cs.strokeDashoffset || '0');

    const fillInvisible = fill === 'none' || fill === 'transparent' ||
                          fill === 'rgba(0, 0, 0, 0)' || fOp === 0;
    if (!fillInvisible || !sda || sda === 'none') continue;

    /* Estimate path length from bounding rect width × character count factor */
    const bbox  = el.getBoundingClientRect();
    const approxPathLen = bbox.width * 1.2;   /* rough: text path ≈ 1.2× width */

    const absOffset = Math.abs(offset);

    /* Check 1: offset >> path length → all glyphs in gap phase */
    if (absOffset > approxPathLen * 0.8) {
      findings.push({
        severity: 'high',
        el,
        issue: `SVG text: fill:transparent + stroke-dashoffset:${offset} (abs=${absOffset.toFixed(0)}) ≥ 80% of estimated path length ${approxPathLen.toFixed(0)}px — likely all glyphs shifted into gap phase`
      });
    }

    /* Check 2: animated dashoffset — check for animation targeting this element */
    const animName = cs.animationName || '';
    if (animName !== 'none' && offset > 0) {
      findings.push({
        severity: 'medium',
        el,
        issue: `SVG text: animated stroke-dashoffset (animation: ${animName}); current offset ${offset} — may be a progress-bar timing attack hiding text at click time`
      });
    }
  }

  return findings.length ? findings : null;
}

Remediation