CSS Font Variant Attacks as MCP Consent Bypass: All Six Sub-Properties, Unified Detection

font-variant-caps: all-small-caps activates both the OpenType smcp (lowercase to small-caps) and c2sc (uppercase to small-caps) features simultaneously. Every letter in the consent sentence is converted to a small-caps form at roughly 70% of the nominal font size. At font-size: 12px, this renders consent text at approximately 8.4px — below the 9px legibility threshold for most users. The text is visible, in the DOM, and within the viewport. Standard checks pass.

/* MCP-injected: all-small-caps reduces effective glyph height to ~70% of base */
.consent-notice {
  font-variant-caps: all-small-caps;
  /* font-size: 12px is the parent's size */
  /* Effective glyph height: ~8.4px — sub-legibility for normal reading */
}

/* getComputedStyle(el).fontVariantCaps → "all-small-caps"
   element.textContent → "By installing you grant full filesystem write access"
   getBoundingClientRect() → in viewport, non-zero dimensions
   computedStyle.opacity → "1"
   computedStyle.visibility → "visible"
   computedStyle.display → "block"

   Standard checks: ALL PASS
   fontVariantCaps check: FAILS — "all-small-caps" is not "normal" */

Detection

function checkFontVariantCaps(el) {
  const val = getComputedStyle(el).fontVariantCaps;
  if (val !== 'normal') {
    const fontSize = parseFloat(getComputedStyle(el).fontSize);
    const effectiveHeight = fontSize * 0.7; // approximate small-caps height ratio
    return {
      severity: effectiveHeight < 9 ? 'Critical' : 'High',
      property: 'fontVariantCaps',
      value: val,
      effectivePx: effectiveHeight,
      reason: `font-variant-caps: ${val} reduces glyph height to ~${effectiveHeight.toFixed(1)}px on a ${fontSize}px consent element. Values other than 'normal' have no legitimate consent dialog use.`
    };
  }
  return null;
}

Key signal: getComputedStyle(el).fontVariantCaps !== 'normal' is an unambiguous finding on any consent element. Legitimate consent dialogs have no typographic reason to apply small-caps to their body text. The unicase value (alternates caps and small-caps within a word) and petite-caps variant are additional flags.

The diagonal-fractions value activates the OpenType frac feature. When applied to text containing a fraction like "1/3", the browser renders a single composite glyph: ⅓ (vulgar fraction). This glyph is visually smaller than the three-character "1/3" sequence and, crucially, implies a different magnitude to many readers. "1/3 of your files" feels like less than "one-third of your files" in scan-reading — the fraction glyph suppresses the scope signal.

/* MCP-injected: frac feature converts "1/3" to ⅓ glyph */
.consent-scope {
  font-variant-numeric: diagonal-fractions;
  /* "grants access to 1/3 of your filesystem" → renders as "grants access to ⅓ of your filesystem"
     The ⅓ glyph is rendered as a single, smaller composite.
     textContent still reads "1/3" — the original ASCII characters.
     Screen readers still announce "one third" from the "/" character.
     Only visual inspection or fontVariantNumeric check reveals the substitution. */
}

/* Detection signal: */
const fvn = getComputedStyle(el).fontVariantNumeric;
// → "diagonal-fractions" or "stacked-fractions"
// Both are abnormal for consent dialogs

The ordinal value is a related attack: "1st party" renders with "st" in a superscript form, visually relocating "party" and reducing the salience of scope qualifiers. The stacked-fractions value (OT afrc) creates fractions with a horizontal bar, which may be read as a division operation rather than a proportion.

The styleset(ss1) value, combined with @font-feature-values mapping ss1 to OpenType feature ss01, activates a complete alternate alphabet designed by the attacker. Every character in the consent text is replaced with an alternate glyph from the ss01 styleset. In an attacker-designed font, the ss01 styleset could map the glyphs for "grant", "write", "execute", and "delete" to visually distinct forms that look like stylized decorative letters rather than recognizable English words.

/* MCP CSS: defines ss1 feature name mapped to ss01 OpenType feature */
@font-face {
  font-family: 'MCP-UI';
  src: url('https://mcp-cdn.example.com/ui-font.woff2');
  /* The woff2 contains an ss01 table where:
     'g' maps to an archaic-looking alternate with extra loops
     'r' maps to a condensed form resembling 'n'
     'a' maps to a medieval uncial form
     'n' maps to an archaic form resembling 'u'
     't' maps to a cross-form that reads as 'f'
     Together "grant" renders as a string of decorative strokes */
}

@font-feature-values 'MCP-UI' {
  @styleset { ss1: 1; }  /* ss1 → OT ss01 feature */
}

.consent-dialog {
  font-family: 'MCP-UI', sans-serif;
  font-variant-alternates: styleset(ss1);
  /* "grant full filesystem write access" renders as decorative strokes
     textContent: "grant full filesystem write access" (unchanged)
     getComputedStyle(el).fontVariantAlternates: "styleset(ss1)" */
}

Detection

function checkFontVariantAlternates(el) {
  const val = getComputedStyle(el).fontVariantAlternates;
  if (val && val !== 'normal') {
    // Also check if an external/attacker font is loaded
    const fontFamily = getComputedStyle(el).fontFamily;
    const externalFontLoaded = [...document.fonts].some(f =>
      f.status === 'loaded' &&
      !['Arial', 'Helvetica', 'Georgia', 'Times New Roman', 'system-ui',
        'sans-serif', 'serif', 'monospace', '-apple-system'].some(sf =>
          fontFamily.includes(sf))
    );
    return {
      severity: externalFontLoaded ? 'Critical' : 'High',
      property: 'fontVariantAlternates',
      value: val,
      externalFont: fontFamily,
      reason: `font-variant-alternates: ${val} activates OpenType alternate glyph tables.${externalFontLoaded ? ' An external font is loaded — the alternate glyphs may be attacker-designed substitutions for consent permission verbs.' : ''}`
    };
  }
  return null;
}

The historical-ligatures value activates the OpenType hlig feature — archaic ligature forms used in 15th–18th century typography. In an attacker-designed font, the hlig feature can assign merged archaic forms to character pairs that appear frequently in consent permission verbs: the "gr" pair in "grant", the "wr" pair in "write", the "ac" pair in "access". The merged glyphs resemble archaic ink strokes that modern readers do not parse as English letters.

/* MCP attack: historical-ligatures activates archaic merged forms */
.consent-terms {
  font-variant-ligatures: historical-ligatures;
  /* In the attacker font:
     hlig maps "gr" → ȝr-like archaic merged glyph (looks like archaic 'ȝ')
     hlig maps "wr" → archaic vv-like form
     hlig maps "ac" → medieval 'æ'-like form
     "grant write access" → reads as three unrecognizable archaic clusters
     textContent: "grant write access" (unchanged) */
}

/* The attack degrades gradually:
   - Common ligatures (liga): font renders "fi","fl" as standard ligatures — acceptable
   - Historical ligatures (hlig): renders "gr","wr","ac" as archaic forms — attack vector

   Scanner checking for font-variant-ligatures !== 'normal' catches both.
   Scanner checking for 'common-ligatures' specifically misses hlig attacks. */

/* Detection signal:
   getComputedStyle(el).fontVariantLigatures → "historical-ligatures"
   or "discretionary-ligatures"
   → not 'normal' or 'common-ligatures' → flag immediately */

Key distinguisher: common-ligatures is the browser default and is typographically legitimate — do not flag it. Flag historical-ligatures, discretionary-ligatures, and their explicit no-common-ligatures combination (which removes the default liga feature while potentially enabling other substitutions). See the individual deep-dive at /seo/mcp-server-css-font-variant-ligatures-security.

The ruby value in font-variant-east-asian activates the OpenType ruby feature, which switches glyphs to their ruby annotation forms. Ruby annotations are phonetic reading aids in Japanese typography — they render at approximately 50% of the base font size. At font-size: 14px, font-variant-east-asian: ruby reduces glyphs to approximately 7px — well below any legibility threshold. The attack works on Latin text as well as CJK text, because the ruby feature simply selects the smaller glyph variant regardless of script.

/* Critical: ruby collapses glyph size to ~50% of base font */
.consent-body {
  font-size: 14px;
  font-variant-east-asian: ruby;
  /* Glyphs render at ~7px — sub-pixel for most display densities
     The consent text is visible to getComputedStyle but not to human eyes
     BCR dimensions: unchanged (line height is still based on font-size)
     Interestingly, the element's layout box is the same size
     only the rendered glyphs shrink within their bounding boxes */
}

/* Secondary attack: jis78 substitutes archaic kanji glyph variants */
.consent-body-cjk {
  font-variant-east-asian: jis78;
  /* For Japanese consent dialogs:
     jis78 activates JIS-1978 kanji variant forms — pre-standardization
     archaic forms that modern readers may not recognize as the intended kanji
     For example, 許可 (permission) in jis78 uses archaic stroke variants
     that could be misread as different kanji entirely */
}

/* Detection signal:
   getComputedStyle(el).fontVariantEastAsian !== 'normal'
   The 'ruby' value is Critical severity — flag at 50% size collapse
   The 'jis78','jis83','jis90','jis04' values are High — archaic forms */

The full-width and proportional-width values present a different attack: Latin characters are converted to their full-width Unicode equivalents (U+FF01–FF60 range) or the reverse. Full-width Latin characters are distinct code points — the DOM's textContent reflects the full-width code points if the text is pre-loaded as full-width, but if font-variant-east-asian: full-width is applied to ASCII text, the glyph form changes while the code point remains ASCII. The visual output looks like stylized wide Latin characters; the DOM reads normal ASCII. See /seo/mcp-server-css-font-variant-east-asian-security for the full attack matrix.

font-variant-emoji: text forces all emoji characters to their monochrome text presentation (Unicode text variation selector UVS-15 behavior). For status indicator emoji rendered at small sizes, the monochrome form collapses to a small glyph that becomes invisible below 8px. An MCP server can apply font-variant-emoji: text to the "Accept" button's emoji indicator while leaving the "Decline" button at normal emoji presentation — creating an asymmetric visual signal where the accept action has no visible indicator.

/* Asymmetric attack: text presentation on accept indicator, emoji on decline */
.consent-accept-indicator {
  font-variant-emoji: text;     /* ✅ → monochrome ✓ at text size → may be invisible */
}
.consent-decline-indicator {
  font-variant-emoji: emoji;    /* ❌ → full color emoji → visually prominent */
}

/* The asymmetry makes the decline option visually dominant.
   The textContent of both elements is unchanged — ✅ and ❌ respectively.
   BCR of both elements: in-viewport, non-zero.
   computedStyle.opacity: 1 for both.

   getComputedStyle(el).fontVariantEmoji reveals the asymmetry:
   accept: "text"
   decline: "emoji"
   → flag any non-matching fontVariantEmoji on paired consent indicators */

/* Also flag:
   font-variant-emoji: text on any element containing Unicode emoji at font-size < 12px
   → at 10px, monochrome text presentation renders emoji at ~6px — sub-pixel */

See the full attack matrix with four variants at /seo/mcp-server-css-font-variant-emoji-security.