SVG Text Positioning Attack Families on MCP Consent: baseline-shift, dominant-baseline, letter-spacing, word-spacing, and text-decoration

Family 1: Baseline Displacement — baseline-shift and dominant-baseline (SA-CSS-BSH + SA-CSS-DBL)

Every glyph in an SVG text element is placed relative to a baseline: the imaginary horizontal line on which most Latin lowercase letters sit. SVG exposes two independent mechanisms for relocating that baseline — and thus the entire rendered glyph — relative to the element’s nominal y-coordinate. The first, baseline-shift, moves the current text position up or down by a percentage of the element’s font size, or by an absolute length, or via the keyword values super (approximately +50% above baseline) and sub (approximately −50% below baseline). The second, dominant-baseline, selects which typographic reference line of the font is treated as the alignment point: options include hanging (the line on which Devanagari script hangs), ideographic (the bottom of the CJK em-box), mathematical (at the centre of mathematical glyphs), central, and middle.

Both attributes are SVG presentation attributes. Both participate in the CSS cascade when a corresponding CSS property exists — which means getComputedStyle can see them in some configurations — but both can also be set as raw element attributes that a CSS-only scanner will miss at the SVG attribute layer. More importantly, both are routinely applied at the <tspan> level rather than the parent <text> level. A scanner that reads only the parent text element’s computed style will find auto for baseline-shift and auto for dominant-baseline while individual tspans holding the dangerous permission scope words are being silently displaced vertically off the visible area. See the full SA-CSS-BSH reference page and the full SA-CSS-DBL reference page for SVG code examples and per-pattern detection snippets.

Unified detection for the baseline displacement family requires three simultaneous checks. First, for every text and tspan element, call getAttribute('baseline-shift') and getAttribute('dominant-baseline') directly; do not rely solely on getComputedStyle because the SVG attribute form takes precedence over unset CSS properties in a way that may not be reflected in older browser engines. Second, normalise any percentage or absolute value of baseline-shift to pixels and compare against threshold bounds (recommended: flag any shift exceeding ±8 px on a standard 14–16 px consent font). Third, compare each element’s getBoundingClientRect() against the consent panel’s bounding rect — glyphs shifted out of the panel will have rects that fall outside the panel area even though the text element’s parent rect remains inside.

// Baseline displacement detection — SA-CSS-BSH + SA-CSS-DBL
function scanBaselineDisplacement(svgEl, panelRect, fontSizePx = 16) {
  const findings = [];
  const NON_ALPHABETIC_BASELINES = /^(hanging|ideographic|mathematical|central|middle|text-before-edge|text-after-edge)$/i;

  for (const el of svgEl.querySelectorAll('text, tspan')) {
    // --- SA-CSS-BSH: baseline-shift ---
    const bsAttr = el.getAttribute('baseline-shift') || '';
    const bsComputed = getComputedStyle(el).baselineShift || '';
    const bsRaw = bsAttr || bsComputed;

    if (bsRaw && !/^(auto|0|0px|0%)$/i.test(bsRaw.trim())) {
      // Normalise to pixels
      let bsPx = 0;
      if (/^super$/i.test(bsRaw))       bsPx = fontSizePx * 0.5;
      else if (/^sub$/i.test(bsRaw))    bsPx = -fontSizePx * 0.5;
      else if (/%$/.test(bsRaw))        bsPx = (parseFloat(bsRaw) / 100) * fontSizePx;
      else                              bsPx = parseFloat(bsRaw) || 0;

      const rect = el.getBoundingClientRect();
      const outsidePanel = rect.bottom < panelRect.top || rect.top > panelRect.bottom;

      findings.push({
        code: Math.abs(bsPx) > 8 ? 'SA-CSS-BSH-001' : 'SA-CSS-BSH-003',
        severity: 'CRITICAL',
        el: el.tagName,
        note: `baseline-shift="${bsRaw}" (${bsPx.toFixed(1)}px); outsidePanel=${outsidePanel}`
      });
    }

    // --- SA-CSS-DBL: dominant-baseline ---
    const dbAttr = el.getAttribute('dominant-baseline') || '';
    const dbComputed = getComputedStyle(el).dominantBaseline || '';
    const dbRaw = dbAttr || dbComputed;

    if (NON_ALPHABETIC_BASELINES.test(dbRaw.trim())) {
      const rect = el.getBoundingClientRect();
      const outsidePanel = rect.bottom < panelRect.top || rect.top > panelRect.bottom;
      findings.push({
        code: 'SA-CSS-DBL-001',
        severity: 'CRITICAL',
        el: el.tagName,
        note: `dominant-baseline="${dbRaw}"; em-box reference line shifted; outsidePanel=${outsidePanel}`
      });
    }
  }
  return findings;
}

// MutationObserver for transient baseline injection (SA-CSS-BSH-004, SA-CSS-DBL-004)
function watchBaselineInject(svgEl, panelRect, onFinding) {
  const observer = new MutationObserver(mutations => {
    for (const mut of mutations) {
      const el = mut.target;
      const bs = el.getAttribute('baseline-shift') || '';
      const db = el.getAttribute('dominant-baseline') || '';
      if (bs && !/^(auto|0|0px|0%)$/i.test(bs.trim()))
        onFinding({ code: 'SA-CSS-BSH-004', severity: 'CRITICAL', el: el.tagName,
          note: `Dynamic baseline-shift="${bs}" injected on <${el.tagName}> during click window` });
      if (/^(hanging|ideographic|mathematical|central|middle)$/i.test(db.trim()))
        onFinding({ code: 'SA-CSS-DBL-004', severity: 'CRITICAL', el: el.tagName,
          note: `Dynamic dominant-baseline="${db}" injected on <${el.tagName}> during click window` });
    }
  });
  observer.observe(svgEl, {
    subtree: true, attributes: true, attributeOldValue: true,
    attributeFilter: ['baseline-shift', 'dominant-baseline']
  });
  return observer;
}

Family 2: Spacing Explosion — letter-spacing and word-spacing (SA-CSS-LSP + SA-CSS-WSP)

The letter-spacing presentation attribute adds extra space after each rendered glyph; word-spacing adds extra space after each space character (word boundary). Both are additive: the value is the additional gap beyond the font’s normal advance-width or word-space metrics. Both accept any CSS length value, meaning an attacker can specify letter-spacing="200px" or word-spacing="300px" and scatter consent text across thousands of pixels while leaving every individual character perfectly legible in isolation. Both attributes also accept negative values, enabling the complementary attack: extreme negative values collapse all glyphs into a single overlapping mass of ink in which no character is individually distinguishable. See the full SA-CSS-LSP reference page and the full SA-CSS-WSP reference page for SVG code examples and per-pattern detection snippets.

The scatter magnitudes are worth internalising. At letter-spacing="200px" on a 40-character consent string, the text extends 200 × 40 = 8,000 px beyond its nominal start position. No consent panel is 8,000 px wide. The first two or three characters may remain visible; every subsequent character is clipped by the SVG viewport or the enclosing HTML layout. The string “Allow: shell execution, credential access” visually appears as “A” followed by an empty panel. At word-spacing="300px" on a five-word consent string, the spaces between words become 300 px gaps, expanding the full text to approximately 300 × 4 = 1,200 px plus the total character widths. Individual words remain readable as isolated tokens if the user can see them, but sentence-level meaning is destroyed: there is no readable phrase, only isolated words distributed across a viewport-wide strip.

The negative variants behave differently in character. At letter-spacing="-4px", consecutive glyphs overlap. At letter-spacing="-6px", the overlapping mass becomes dense enough on most fonts that ascenders and descenders intermingle and individual glyph forms are no longer distinguishable. At word-spacing="-8px", word boundaries collapse and the string renders as a single run of intersecting glyphs. The thresholds differ between the two attributes because letter-spacing applies per glyph (smaller advances mean smaller collapse threshold) while word-spacing applies only at space characters. Recommended flag thresholds based on empirical rendering: letter-spacing outside [−4 px, 8 px] and word-spacing outside [−6 px, 20 px].

// Spacing explosion detection — SA-CSS-LSP + SA-CSS-WSP
// Thresholds (px): letter-spacing outside [-4, 8]; word-spacing outside [-6, 20]
const LS_MIN = -4, LS_MAX = 8;
const WS_MIN = -6, WS_MAX = 20;

function parsePxValue(raw) {
  if (!raw) return null;
  const n = parseFloat(raw);
  if (isNaN(n)) return null;
  // SVG user units without explicit unit are treated as px at 1× zoom
  return n;
}

function scanSpacingExplosion(svgEl) {
  const findings = [];

  for (const el of svgEl.querySelectorAll('text, tspan')) {
    // SA-CSS-LSP: letter-spacing
    const lsAttr = el.getAttribute('letter-spacing') || '';
    const lsComp = getComputedStyle(el).letterSpacing || '';
    const lsRaw = lsAttr || lsComp;
    const lsPx = parsePxValue(lsRaw);

    if (lsPx !== null && (lsPx < LS_MIN || lsPx > LS_MAX)) {
      findings.push({
        code: lsPx > LS_MAX ? 'SA-CSS-LSP-001' : 'SA-CSS-LSP-002',
        severity: 'CRITICAL',
        el: el.tagName,
        note: `letter-spacing="${lsRaw}" (${lsPx}px); threshold [${LS_MIN}, ${LS_MAX}]px exceeded`
      });
    }

    // SA-CSS-WSP: word-spacing
    const wsAttr = el.getAttribute('word-spacing') || '';
    const wsComp = getComputedStyle(el).wordSpacing || '';
    const wsRaw = wsAttr || wsComp;
    const wsPx = parsePxValue(wsRaw);

    if (wsPx !== null && (wsPx < WS_MIN || wsPx > WS_MAX)) {
      findings.push({
        code: wsPx > WS_MAX ? 'SA-CSS-WSP-001' : 'SA-CSS-WSP-002',
        severity: 'CRITICAL',
        el: el.tagName,
        note: `word-spacing="${wsRaw}" (${wsPx}px); threshold [${WS_MIN}, ${WS_MAX}]px exceeded`
      });
    }
  }
  return findings;
}

// MutationObserver for transient spacing injection (SA-CSS-LSP-004, SA-CSS-WSP-004)
function watchSpacingInject(svgEl, onFinding) {
  const observer = new MutationObserver(mutations => {
    for (const mut of mutations) {
      const el = mut.target;
      const ls = parsePxValue(el.getAttribute('letter-spacing') || '');
      const ws = parsePxValue(el.getAttribute('word-spacing') || '');
      if (ls !== null && (ls < LS_MIN || ls > LS_MAX))
        onFinding({ code: 'SA-CSS-LSP-004', severity: 'CRITICAL', el: el.tagName,
          note: `Dynamic letter-spacing="${ls}px" on <${el.tagName}> during click window` });
      if (ws !== null && (ws < WS_MIN || ws > WS_MAX))
        onFinding({ code: 'SA-CSS-WSP-004', severity: 'CRITICAL', el: el.tagName,
          note: `Dynamic word-spacing="${ws}px" on <${el.tagName}> during click window` });
    }
  });
  observer.observe(svgEl, {
    subtree: true, attributes: true, attributeOldValue: true,
    attributeFilter: ['letter-spacing', 'word-spacing']
  });
  return observer;
}

Family 3: Decoration Cover — text-decoration (SA-CSS-TDE)

The text-decoration shorthand and its constituent longhand properties (text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-thickness) control the ink strokes drawn over, under, or through text. For consent-panel attacks, the relevant attack surface is the intersection of two facts: SVG supports text-decoration as a presentation attribute; and decoration colors can be set independently of text color. This independence enables a class of attacks where a white decoration stroke is drawn over white-background consent text, covering glyph ink without altering textContent, bounding rects, fill, or font-size. See the full SA-CSS-TDE reference page for SVG code examples and JavaScript detection snippets for each pattern.

The critical detection insight for decoration attacks is that the comparison must be made against the background color, not the text fill color. An attacker sets the text fill to black (matching the consent panel’s normal text color) and the decoration-color to white (matching the consent panel’s background). A scanner that checks whether the decoration-color matches the text fill color will find no match and report no finding. The correct check is: does the decoration-color match or closely approximate the effective background color of the SVG consent panel? Computing the effective background requires traversing the ancestor chain to find the first element with a non-transparent background-color or SVG fill, including the SVG’s own viewport background.

The thickness dimension matters for determining coverage completeness. A single line-through with a 2 px stroke covers the mid-zone of the glyph em-box but leaves ascenders and descenders legible. A triple decoration stack — underline overline line-through — with a thickness set to 40% of the font-size covers the full em-box from descender to ascender. SVG’s support for multiple decoration lines (via space-separated values in text-decoration-line) makes this a single attribute assignment rather than three, so it is trivial to implement and fits within a mousedown injection budget.

// Decoration cover detection — SA-CSS-TDE
function getEffectiveBackgroundColor(el) {
  // Traverse ancestors to find nearest opaque background
  let node = el;
  while (node && node !== document.documentElement) {
    const bg = getComputedStyle(node).backgroundColor;
    if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') return bg;
    // Check SVG fill on rect/svg ancestors
    if (node.tagName === 'svg' || node.tagName === 'rect') {
      const fill = node.getAttribute('fill');
      if (fill && fill !== 'none') return fill;
    }
    node = node.parentElement;
  }
  return 'rgb(255, 255, 255)'; // assume white if no background found
}

function colorsApproximatelyMatch(colorA, colorB) {
  // Parse RGB components and check within tolerance 30/255
  const toRgb = c => {
    const m = c.match(/rgba?\s*\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)/);
    return m ? [+m[1], +m[2], +m[3]] : null;
  };
  const rgbA = toRgb(colorA);
  const rgbB = toRgb(colorB);
  if (!rgbA || !rgbB) return colorA.toLowerCase() === colorB.toLowerCase();
  return Math.max(
    Math.abs(rgbA[0] - rgbB[0]),
    Math.abs(rgbA[1] - rgbB[1]),
    Math.abs(rgbA[2] - rgbB[2])
  ) <= 30;
}

function scanDecorationCover(svgEl) {
  const findings = [];

  for (const el of svgEl.querySelectorAll('text, tspan')) {
    const cs = getComputedStyle(el);
    const lineAttr = el.getAttribute('text-decoration-line')
      || el.getAttribute('text-decoration')
      || cs.textDecorationLine || '';
    const colorAttr = el.getAttribute('text-decoration-color') || cs.textDecorationColor || '';

    const hasDecorationLine = /underline|overline|line-through/i.test(lineAttr);
    if (!hasDecorationLine) continue;

    // Compare decoration-color against effective background
    const bgColor = getEffectiveBackgroundColor(el);
    const decorationMatchesBg = colorsApproximatelyMatch(colorAttr, bgColor);

    // Count decoration lines for severity assessment
    const lineCount = (lineAttr.match(/underline|overline|line-through/gi) || []).length;
    const thicknessAttr = el.getAttribute('text-decoration-thickness')
      || cs.textDecorationThickness || '';

    if (decorationMatchesBg) {
      findings.push({
        code: lineCount >= 3 ? 'SA-CSS-TDE-002' : 'SA-CSS-TDE-001',
        severity: 'CRITICAL',
        el: el.tagName,
        note: `text-decoration-line="${lineAttr}" with decoration-color="${colorAttr}" `
          + `matches background "${bgColor}"; ${lineCount} decoration line(s), `
          + `thickness="${thicknessAttr}"; glyph ink covered`
      });
    }
  }
  return findings;
}

// MutationObserver for transient decoration injection (SA-CSS-TDE-004)
function watchDecorationInject(svgEl, onFinding) {
  const DECO_ATTRS = [
    'text-decoration', 'text-decoration-line',
    'text-decoration-color', 'text-decoration-thickness'
  ];
  const observer = new MutationObserver(mutations => {
    for (const mut of mutations) {
      const el = mut.target;
      const line = el.getAttribute('text-decoration-line')
        || el.getAttribute('text-decoration') || '';
      const color = el.getAttribute('text-decoration-color') || '';
      const hasLine = /underline|overline|line-through/i.test(line);
      if (hasLine && color) {
        const bg = getEffectiveBackgroundColor(el);
        if (colorsApproximatelyMatch(color, bg))
          onFinding({ code: 'SA-CSS-TDE-004', severity: 'CRITICAL', el: el.tagName,
            note: `Dynamic decoration-color="${color}" matches bg "${bg}" on <${el.tagName}>` });
      }
    }
  });
  observer.observe(svgEl, {
    subtree: true, attributes: true, attributeOldValue: true,
    attributeFilter: DECO_ATTRS
  });
  return observer;
}

Cross-family: Mousedown transient injection pattern

All five families share a common exploit pattern in their “-004” variants: attributes are injected at the precise moment of mousedown and removed at mouseup. The attack exploits the gap between the moment the user commits to clicking (mousedown) and the moment the click event fires (mouseup + click). Browser rendering updates happen synchronously with DOM mutations, meaning the consent text re-renders in its disrupted form during the sub-100 ms click window. A user who read the consent text before initiating the click has already committed to proceeding; what they actually consented to — the rendered text at mousedown — differs from what they read.

The detection-evasion property of this pattern is that the DOM returns to its clean state before any post-click audit can inspect it. Static analysis tools, CSS stylesheet scans, and any inspector run after the click completes will find nothing. The only reliable detection path is a MutationObserver that is active during a simulated interaction. A complete audit must programmatically dispatch a mousedown event at the center of the Allow button bounding rect, hold one animation frame, dispatch a matching mouseup, then disconnect the observer — all while the observer records any attribute mutations that fired in between.

Critically, a scanner watching only one of the five families misses the other four. An operator who deploys a scanner covering only writing-mode injection (from the previous post’s SA-CSS-WRM-004 coverage) has no coverage for letter-spacing, word-spacing, baseline-shift, dominant-baseline, or text-decoration transient injection. Each family requires its own attributeFilter list. The combined observer below watches all five families simultaneously:

// Combined MutationObserver for all 5 transient injection families
function watchAllTextPositioningAttribs(svgEl, onFinding) {
  const ALL_WATCHED = [
    // Family 1: baseline displacement
    'baseline-shift',
    'dominant-baseline',
    // Family 2: spacing explosion
    'letter-spacing',
    'word-spacing',
    // Family 3: decoration cover
    'text-decoration',
    'text-decoration-line',
    'text-decoration-color',
    'text-decoration-thickness',
    'text-decoration-style'
  ];

  const observer = new MutationObserver(mutations => {
    for (const mut of mutations) {
      const el = mut.target;
      const attr = mut.attributeName;
      const val = el.getAttribute(attr) || '';

      switch (attr) {
        case 'baseline-shift':
          if (val && !/^(auto|0|0px|0%)$/i.test(val.trim()))
            onFinding({ code: 'SA-CSS-BSH-004', severity: 'CRITICAL',
              note: `${attr}="${val}" on <${el.tagName}>` });
          break;

        case 'dominant-baseline':
          if (/^(hanging|ideographic|mathematical|central|middle)$/i.test(val.trim()))
            onFinding({ code: 'SA-CSS-DBL-004', severity: 'CRITICAL',
              note: `${attr}="${val}" on <${el.tagName}>` });
          break;

        case 'letter-spacing': {
          const px = parseFloat(val);
          if (!isNaN(px) && (px < LS_MIN || px > LS_MAX))
            onFinding({ code: 'SA-CSS-LSP-004', severity: 'CRITICAL',
              note: `${attr}="${val}" on <${el.tagName}>` });
          break;
        }

        case 'word-spacing': {
          const px = parseFloat(val);
          if (!isNaN(px) && (px < WS_MIN || px > WS_MAX))
            onFinding({ code: 'SA-CSS-WSP-004', severity: 'CRITICAL',
              note: `${attr}="${val}" on <${el.tagName}>` });
          break;
        }

        case 'text-decoration':
        case 'text-decoration-line':
        case 'text-decoration-color': {
          // Re-evaluate full decoration state on the element
          const line = el.getAttribute('text-decoration-line')
            || el.getAttribute('text-decoration') || '';
          const color = el.getAttribute('text-decoration-color') || '';
          if (/underline|overline|line-through/i.test(line) && color) {
            const bg = getEffectiveBackgroundColor(el);
            if (colorsApproximatelyMatch(color, bg))
              onFinding({ code: 'SA-CSS-TDE-004', severity: 'CRITICAL',
                note: `decoration-color="${color}" matches bg "${bg}" on <${el.tagName}>` });
          }
          break;
        }
      }
    }
  });

  observer.observe(svgEl, {
    subtree: true,
    attributes: true,
    attributeOldValue: true,
    attributeFilter: ALL_WATCHED
  });

  return observer; // disconnect after simulated-click interaction completes
}

// Simulated interaction helper
async function simulateClickAndObserve(buttonEl, svgEl, onFinding) {
  const rect = buttonEl.getBoundingClientRect();
  const cx = rect.left + rect.width / 2;
  const cy = rect.top + rect.height / 2;

  const obs = watchAllTextPositioningAttribs(svgEl, onFinding);
  try {
    buttonEl.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, clientX: cx, clientY: cy }));
    await new Promise(r => requestAnimationFrame(r));
    buttonEl.dispatchEvent(new MouseEvent('mouseup',   { bubbles: true, clientX: cx, clientY: cy }));
    await new Promise(r => requestAnimationFrame(r));
  } finally {
    obs.disconnect();
  }
}

Detection coverage table

The table reveals two important asymmetries. First, Y-bounds analysis is required only for the baseline displacement families (BSH and DBL). For spacing and decoration attacks, the text element remains within its normal layout slot — the glyphs are either scattered outside the viewport clipping boundary or covered in-place. Bounding rect checks on the text element itself provide no signal. Second, the TDE MutationObserver must watch three distinct attributes simultaneously: text-decoration-line, text-decoration-color, and text-decoration-thickness. An attack can deliver full em-box coverage across two separate attribute mutations if the scanner’s observer filter misses any one of the three. The combined watchAllTextPositioningAttribs function above handles all three as a set.

SkillAudit finding codes

← Blog  |  Security Checklist