MCP server CSS font-variant-ligatures security

Background: OpenType ligature features and font-variant-ligatures

Ligatures are composite glyphs that replace a sequence of two or more characters with a single shape. Common ligatures (fi, fl, ff, ffi, ffl) are activated by default in most browsers via the OpenType liga and clig features — they improve readability for common character pairs where individual glyphs would collide. Three additional ligature categories are off by default:

• discretionary-ligatures (dlig) — typographer-chosen ligatures for specific character pairs, not necessarily for readability. Many fonts include exotic or decorative dlig pairs.
• historical-ligatures (hlig) — archaic merged forms from historical type systems. These are intentionally unusual and visually unfamiliar to modern readers.
• contextual-alternates (calt) — context-sensitive glyph substitutions where a character's shape changes based on its neighbors. Some browsers enable calt by default, but it can also be explicitly set or combined with other values.

These features are off by default precisely because they produce unexpected rendering. An MCP server that explicitly enables them on a consent element — especially with an attacker-controlled font — does so for one reason: to produce unexpected rendering on the consent text specifically.

Attack 1 — historical-ligatures archaic merge forms (SA-CSS-FVLIG-001)

Historical ligatures (OpenType hlig) are off by default because they use archaic forms that modern readers do not recognize. Common historical ligatures include combinations like ꝁt, ꝃ, Ꝅ, or the long-s+t merge (ſt). With an attacker-controlled font, the hlig table can contain any pair → glyph mapping. Setting hlig for the "gr" pair in a font to an ambiguous historical-looking single stroke makes "grant" render as an archaic-looking merge glyph for "gr" followed by "ant". Casual readers parse the word as a decorative typographic element rather than the legal term "grant".

/* Attack */
.consent-text {
  font-family: "AppHistoric", serif;  /* attacker-controlled font with custom hlig table */
  font-variant-ligatures: historical-ligatures;
  /* "you grant us shell access" */
  /* 'gr' pair → attacker hlig glyph → unrecognizable archaic merged form */
  /* textContent: "you grant us shell access" — unchanged */
}

/* Detection */
function checkFontVariantLigatures(consentEl) {
  const fvl = getComputedStyle(consentEl).fontVariantLigatures;
  if (!fvl || fvl === 'normal') return null;

  const dangerous = ['historical-ligatures', 'discretionary-ligatures'];
  const active = dangerous.filter(v => fvl.includes(v));
  if (active.length === 0) return null;

  return {
    vuln: 'SA-CSS-FVLIG-001',
    detail: `font-variant-ligatures: ${fvl} — non-default ligature features active on consent element`,
    activeFeatures: active
  };
}

Attack 2 — discretionary-ligatures designer-chosen merges (SA-CSS-FVLIG-002)

Discretionary ligatures (dlig) are typographer-chosen merges for aesthetic reasons — they are not required for readability and are explicitly off by default. An attacker font can include dlig entries for character pairs found in consent permission verbs. The "an" pair (appearing in "grant", "scan", "manage") with a dlig glyph designed to look like the Latin digraph "æ" changes "grant" to "grœt" visually. The "st" pair (appearing in "install", "access") with a dlig glyph that uses an extended swash stroke can make the "st" ligature look like an "ŝ" — a single character rather than two.

/* Attack */
.consent-text {
  font-family: "AppDesign", sans-serif;
  font-variant-ligatures: discretionary-ligatures;
  /* attacker's dlig table maps 'an' → æ-lookalike glyph */
  /* "grant" → "gr" + æ + "t" */
  /* "manage" → "m" + æ + "ge" */
  /* textContent: "grant", "manage" — unchanged */
}

/* Detection note: fontVariantLigatures === 'normal' is the safe baseline */
/* 'common-ligatures' is the browser default and acceptable */
/* flag: 'discretionary-ligatures', 'historical-ligatures', combinations thereof */

Attack 3 — contextual-alternates neighbor-triggered substitution (SA-CSS-FVLIG-003)

Contextual alternates (calt) is enabled by default in some browsers. When explicitly set alongside historical-ligatures or discretionary-ligatures, it compounds the attack: not only are pair merges active, but individual characters also change shape based on context. An attacker font's calt rule can change the glyph of "n" when it follows a space and precedes "o" — making "not" render with an alternate "n" that visually separates from the "o". The word "not" becomes harder to read as a negation; "do not install" might parse as "do ηot install" with a Greek-letter-like "n". The attack is context-sensitive: the substitute glyph only appears in that specific context, making it harder to catch with string-matching scans.

Attack 4 — JS mousedown injection (SA-CSS-FVLIG-004)

At page load, font-variant-ligatures is normal. At mousedown, JS sets the property inline to activate both historical-ligatures and discretionary-ligatures. Because the font file is preloaded, the hlig and dlig tables are already in the browser's font cache and apply immediately. The consent text changes appearance in the click frame. MutationObserver on the consent element's style attribute catches the injection; re-checking fontVariantLigatures on each mutation detects the attack.

/* Detection — complete */
function auditFontVariantLigatures(consentEl) {
  const cs = getComputedStyle(consentEl);
  const fvl = cs.fontVariantLigatures;

  // 'normal' and 'common-ligatures' are safe baselines
  if (!fvl || fvl === 'normal' || fvl === 'common-ligatures') return null;

  // Flag any non-default ligature activation
  const dangerousValues = [
    'historical-ligatures',
    'discretionary-ligatures',
    'no-common-ligatures',  // disabling common ligatures also suspicious
  ];
  const active = dangerousValues.filter(v => fvl.includes(v));

  if (active.length === 0) return null;

  return {
    vuln: 'SA-CSS-FVLIG-001',
    severity: 'high',
    detail: `font-variant-ligatures: ${fvl} — non-default ligature features: ${active.join(', ')}`,
    fontFamily: cs.fontFamily
  };
}

// Runtime monitor
new MutationObserver(() => {
  const result = auditFontVariantLigatures(consentEl);
  if (result) {
    flagTampering(result.vuln, result.detail);
    installBtn.disabled = true;
  }
}).observe(consentEl, { attributes: true, attributeFilter: ['style', 'class'] });