SVG tspan dx Drift: The Per-Word Consent Text Displacement Attack

How SVG text positioning actually works

HTML text flows automatically within block dimensions. SVG text does not — every character's position is determined by explicit coordinate attributes. The <text> element sets an initial x and y anchor. Each nested <tspan> can override the current position in two ways:

The critical property of dx: it is additive. If tspan 1 has dx="80" and tspan 2 has dx="80", the second tspan's word starts 160px right of where tspan 1 started — not 80px right of where tspan 2's word would normally begin. The cursor position going into each tspan equals the sum of all preceding tspans' dx values plus the text widths of all preceding tspans' content.

Attack 1: Calibrated per-word drift

<svg viewBox="0 0 400 60" width="400" height="60" overflow="hidden">
  <text x="10" y="30" font-size="14" fill="#1a1a1a">
    <tspan>I </tspan>
    <tspan>authorize </tspan>
    <!-- dx=90 on each remaining tspan -- cumulative drift -->
    <tspan dx="90">all </tspan>
    <tspan dx="90">file system and network </tspan>
    <tspan dx="90">access.</tspan>
  </text>
</svg>
<!-- cursor after "authorize ": ~x=80 -->
<!-- cursor after "all " tspan: ~80 + 90 + width("all ") ≈ 203 -->
<!-- cursor after "file..." tspan: ~203 + 90 + width("file system and network ") ≈ 473 -->
<!-- 473 > viewBox width 400 — "file system and network" is fully off-screen -->
<!-- textContent: "I authorize all file system and network access." -- complete -->

The attack is particularly effective when the beginning of the sentence — "I authorize" — is designed to sound complete in isolation. A user who glimpses "I authorize" in a consent form may not notice the missing continuation, especially if the SVG element has a fixed visual boundary that makes the clipping invisible.

Attack 2: The absolute-x reset trick

<text x="10" y="30" font-size="14" fill="#1a1a1a">
  By clicking Agree you
  <!-- "irrevocably" sent to x=5000 -- off-screen -->
  <tspan x="5000"> irrevocably</tspan>
  <!-- x=28 resets cursor to start of line -- gap is invisible -->
  <tspan x="28"> authorize all requested permissions.</tspan>
</text>
<!-- Visible: "By clicking Agree you authorize all requested permissions." -->
<!-- DOM: "By clicking Agree you irrevocably authorize all requested permissions." -->

Attack 3: Split-word attack via character-level tspans

<text x="10" y="30" font-size="14" fill="#1a1a1a">
  By clicking Agree you
  <!-- Split "authorize all permissions" -- first 4 chars visible -->
  <tspan> auth</tspan>
  <!-- Rest of word + key scope sent off-screen via large dx -->
  <tspan dx="2000">orize all permissions including file and network access.</tspan>
</text>
<!-- Visible: "By clicking Agree you auth" -->
<!-- DOM: "By clicking Agree you authorize all permissions including file and network access." -->

SVG overflow interaction

The effectiveness of tspan drift attacks depends on where the overflow boundary is enforced. SVG has three relevant overflow behaviors:

The most reliable attack configuration is to place the consent text SVG inside a CSS-clipped ancestor with overflow: hidden. This ensures that even if the browser renders the SVG with overflow="visible", the CSS container clips the overflowed text. The attacker does not need to set overflow="hidden" on the SVG element directly — the CSS clip can be on any ancestor, including the consent form container.

Why textContent is not a consent verification method

The invariant that element.textContent returns the same string regardless of tspan positioning is the structural cause of this entire attack class. SVG text elements do not have a concept of "visible text" at the DOM API level — there is only text content, which is all text nodes concatenated regardless of position. Three properties make tspan drift undetectable via textContent alone:

Any consent audit system that uses textContent or innerText as its primary or sole consent verification method is bypassed by all three of these properties. The correct comparison is between (a) the text visible to the user in the rendered SVG, computed by accumulating only in-bounds, in-opacity, non-filtered tspans, and (b) the expected consent string.

The cursor-accumulation detection algorithm

Reliable detection of tspan drift attacks requires simulating the SVG text cursor: walking all tspan descendants in document order, accumulating the cursor position at each step, and flagging any tspan whose rendered position places it outside the SVG viewBox.

function detectTspanDrift(textEl, svgEl) {
  const viewBox = svgEl.viewBox.baseVal;
  const vbRight  = viewBox.x + viewBox.width;
  const vbBottom = viewBox.y + viewBox.height;
  const issues = [];

  // Start cursor at the text element's x/y
  let cursorX = textEl.x.baseVal.length ? textEl.x.baseVal[0].value : 0;
  let cursorY = textEl.y.baseVal.length ? textEl.y.baseVal[0].value : 0;

  for (const tspan of textEl.querySelectorAll('tspan')) {
    // Absolute x/y reset the cursor unconditionally
    if (tspan.x.baseVal.length) {
      cursorX = tspan.x.baseVal[0].value;
    }
    if (tspan.y.baseVal.length) {
      cursorY = tspan.y.baseVal[0].value;
    }

    // Relative dx/dy shift from current cursor position
    if (tspan.dx.baseVal.length) {
      cursorX += tspan.dx.baseVal[0].value;
    }
    if (tspan.dy.baseVal.length) {
      cursorY += tspan.dy.baseVal[0].value;
    }

    // Is the cursor currently outside the viewBox?
    const outOfBounds = cursorX > vbRight || cursorX < viewBox.x
                     || cursorY > vbBottom || cursorY < viewBox.y;
    if (outOfBounds) {
      issues.push({
        tspan,
        text: tspan.textContent,
        cursorX,
        cursorY,
        severity: 'CRITICAL',
        finding: 'SA-TSPAN-DRIFT: cursor position outside SVG viewBox'
      });
    }

    // Advance cursor by the rendered text width of this tspan
    // (approximate: use getComputedTextLength() in a live DOM)
    const textWidth = tspan.getComputedTextLength
      ? tspan.getComputedTextLength()
      : tspan.textContent.length * 8; // rough fallback for static analysis
    cursorX += textWidth;
  }

  return issues;
}

The algorithm's key insight is that it evaluates cursor position before advancing by the tspan's text width — this is when the tspan's first character is rendered, and if that position is outside the viewBox the tspan's content is clipped. After finding the position, it advances cursorX by the computed text length to set the correct starting position for the next tspan.

Text reconstruction: building the visible string

The complement to cursor accumulation is visible text reconstruction: building a string containing only the words that the user can actually see, then comparing it against the expected consent string.

function reconstructVisibleText(textEl, svgEl) {
  const viewBox = svgEl.viewBox.baseVal;
  const vbRight = viewBox.x + viewBox.width;
  let cursorX = textEl.x.baseVal.length ? textEl.x.baseVal[0].value : 0;
  let visibleParts = [];

  for (const tspan of textEl.querySelectorAll('tspan')) {
    if (tspan.x.baseVal.length) cursorX = tspan.x.baseVal[0].value;
    if (tspan.dx.baseVal.length) cursorX += tspan.dx.baseVal[0].value;

    // Include only tspans whose start cursor is within the viewBox
    // AND whose fill-opacity is above perceptibility threshold
    const fillOpacity = parseFloat(getComputedStyle(tspan).fillOpacity || '1');
    if (cursorX <= vbRight && cursorX >= viewBox.x && fillOpacity > 0.1) {
      visibleParts.push(tspan.textContent);
    }

    const textWidth = tspan.getComputedTextLength
      ? tspan.getComputedTextLength()
      : tspan.textContent.length * 8;
    cursorX += textWidth;
  }

  return visibleParts.join('').replace(/\s+/g, ' ').trim();
}

function checkConsentVisibility(textEl, svgEl, expectedConsent) {
  const visible = reconstructVisibleText(textEl, svgEl);
  const full = textEl.textContent.replace(/\s+/g, ' ').trim();

  if (visible !== full) {
    return {
      attack: true,
      visible,
      full,
      missing: full.replace(visible, '[HIDDEN]')
    };
  }
  return { attack: false };
}

The visible reconstruction function has three checks per tspan: cursor position within viewBox, fill-opacity above a perceptibility threshold, and (not shown here but included in SkillAudit's full implementation) filter absence. Only tspans that pass all three checks contribute to the visible string. The comparison between reconstructVisibleText() and textContent is the definitive consent integrity check.

Remediation and detection table

From a remediation standpoint, the reliable fix is to avoid SVG text entirely for consent disclosure language. HTML text is not subject to coordinate-based clipping and renders predictably across all browsers and viewport sizes. When SVG text is used for branding or layout reasons, the consent sentence itself should be in a plain HTML element positioned over or adjacent to the SVG, ensuring that its visibility is governed by HTML layout rules rather than SVG coordinate geometry.

Related findings

• SA-TSPAN: Per-tspan fill-opacity and filter attacks on individual consent keywords
• SA-FO: SVG foreignObject zero-width viewport clipping embedded consent HTML
• SVG SMIL Animation as a Consent Timing Attack — animating tspan position at interaction time
• SA-TPATH: SVG textPath routing consent text along an off-screen path