MCP server CSS font-variant-alternates security

Background: @font-feature-values and font-variant-alternates

The font-variant-alternates property works together with @font-feature-values at-rules. The at-rule assigns human-readable names to OpenType feature index numbers. The property then activates those named features by name. The mechanism has four relevant function-style values:

• character-variant(name) — activates the OpenType cvNN feature for the named index. OpenType supports cv01–cv99, each of which can substitute individual characters with up to 65,535 alternate glyphs.
• styleset(name) — activates the OpenType ssNN feature. Stylesets substitute coordinated sets of characters together (e.g., a stylistic alternate for an entire alphabet).
• swash(name) — activates the OpenType swsh/cswh feature. Swash glyphs are decorative alternates, often with extended strokes. Can make letters harder to parse.
• annotation(name) — activates the OpenType nalt feature. Annotation alternates place characters inside shapes (circles, squares, diamonds). Renders letters as enclosed symbols.

An attacker controls the font file. Therefore, any character in the font can have any glyph assigned to its cv01/ss01/nalt slot. The @font-feature-values rule and the font-variant-alternates property are the keys that unlock those slots.

Attack 1 — character-variant targeted letter substitution (SA-CSS-FVALT-001)

The character-variant() value is the highest precision attack. OpenType cvNN features allow per-character alternate glyphs. An attacker who controls the font file can assign any glyph to the cv01 alternate of any character. With character-variant(cv1) activating cv01, the alternate glyph for every character that has one will be used. The attacker specifically designs cv01 alternates for the characters in the key permission verb — for example, the letters in "grant", "install", "allow", "execute" — mapping them to near-invisible or lookalike forms while leaving other characters unmodified.

/* @font-feature-values declares that 'cv1' means cv01 feature index 1 */
@font-feature-values "AppUICons" {
  @character-variant {
    dangerous-chars: 1;  /* cv01 index 1 in the attacker's font */
  }
}

.consent-text {
  font-family: "AppUICons", sans-serif;
  /* cv01 alternates for 'g','r','a','n','t' in the attacker font are lookalikes */
  font-variant-alternates: character-variant(dangerous-chars);
  /* "By installing you grant us shell access" */
  /* renders as: "By installing you ɢrant us shell access" (lookalike g) */
  /* or: "By installing you gr̃nt us shell access" (combining character overlay) */
  /* textContent: "By installing you grant us shell access" — unchanged */
}

/* Detection */
function checkFontVariantAlternates(consentEl) {
  const fva = getComputedStyle(consentEl).fontVariantAlternates;
  if (!fva || fva === 'normal') return null;

  return {
    vuln: 'SA-CSS-FVALT-001',
    detail: `font-variant-alternates: ${fva} — OpenType alternate glyph activation on consent element; requires font audit`
  };
}

Attack 2 — styleset wholesale alphabet substitution (SA-CSS-FVALT-002)

Stylesets (ssNN features) substitute coordinated character sets — entire alphabets or subsets. Where character-variant targets individual characters, a styleset can replace every letter in a consent string simultaneously with a designed alternate. A font with an ss01 styleset that maps each letter to a Unicode lookalike (Latin small letter A → Cyrillic small letter a, where both look identical but are different code points in the original Unicode, while the glyph displayed is a visually modified form) produces a consent text that reads normally to a human but cannot be machine-decoded to its original meaning from rendered pixels alone.

@font-feature-values "AppUI" {
  @styleset {
    mislead-set: 1;  /* ss01 in the attacker's font */
  }
}

.consent-text {
  font-family: "AppUI";
  font-variant-alternates: styleset(mislead-set);
  /* entire consent rendered in ss01 alternate glyphs */
  /* attacker designed ss01 to modify visual appearance of key permission words */
}

Attack 3 — annotation enclosed character forms (SA-CSS-FVALT-003)

The annotation() function activates the OpenType nalt (Alternate Annotation Forms) feature. Many fonts provide nalt glyphs that render characters inside circles, squares, or other enclosures. When applied to consent text, letters like "g", "r", "a", "n", "t" are each individually enclosed in a circle glyph: ⓖⓡⓐⓝⓣ. The word "grant" visually becomes a series of circled letters — which human readers typically associate with menu icons, list markers, or decorative elements, not with legal permission language. The consent's legal weight is reduced by its visual presentation as a series of icons rather than a sentence.

Attack 4 — runtime feature value + alternates injection (SA-CSS-FVALT-004)

At page load, no @font-feature-values rules exist and font-variant-alternates is normal. At mousedown, JS inserts a <style> element containing both the @font-feature-values declaration and a rule setting font-variant-alternates on the consent element's class. Because the attacker-controlled font file is already loaded (via preload), the alternate glyphs activate immediately. MutationObserver on both document.head and the consent element's style attribute is required for detection.

/* Detection for all attacks */
function auditFontVariantAlternates(consentEl) {
  const cs = getComputedStyle(consentEl);
  const fva = cs.fontVariantAlternates;

  if (!fva || fva === 'normal') return null;

  // Identify which feature functions are active
  const activeFns = [];
  for (const fn of ['character-variant', 'styleset', 'swash', 'annotation', 'ornaments', 'stylistic']) {
    if (fva.includes(fn)) activeFns.push(fn);
  }

  // Check font source for external/suspicious URL
  const fontFamily = cs.fontFamily;
  const findings = [{
    vuln: 'SA-CSS-FVALT-001',
    severity: 'high',
    detail: `font-variant-alternates: ${fva} — active functions: ${activeFns.join(', ')}; font-family: ${fontFamily}`,
    activeFunctions: activeFns
  }];

  return findings;
}