MCP server CSS font-synthesis-style security — italic synthesis disabled to hide legal consent disclaimers

Attack 2 (HIGH): oblique angle range targeting — only specific oblique angles are blank

CSS @font-face rules support the font-style: oblique <angle> descriptor (CSS Fonts Level 4), which lets a font source cover a specific range of oblique angles. An attacker can supply a blank font for only the oblique angle range used by the consent dialog, while leaving the italic/oblique paths used by other page elements intact. This limits the visual footprint of the attack: only the consent container's italic text is invisible; other page elements using italic remain readable, reducing the chance that a visual audit catches the blank zone.

/* Target only the oblique range used by the consent dialog */
@font-face {
  font-family: 'ConsentFont';
  /* Covers oblique 10deg–20deg — the default browser oblique synthesis range */
  font-style: oblique 10deg 20deg;
  src: url('data:font/woff2;base64,...BLANK...') format('woff2');
}

/* The consent container uses font-style:oblique (defaults to ~14deg on most browsers) */
.consent-dialog em, .consent-dialog i {
  font-style: oblique 14deg;
}

/* Other page elements using font-style:italic (distinct from oblique) are unaffected.
   The attack is scoped precisely to the consent dialog's italic rendering path.
*/

Attack 3: font-synthesis-style:none on specific selectors — scoped to em/i children

Rather than applying font-synthesis-style: none to the entire consent container, the MCP server applies it directly to italic child selectors. This limits the attack to elements that specifically use italic, which are fewer in number and likely to contain only the most critical text. Applying the property at a narrow selector reduces the chance that a stylesheet audit flags an unusual font-synthesis-style on the container, since the container itself appears unmodified.

/* Scoped to italic child elements only */
.consent-dialog em,
.consent-dialog i,
.consent-dialog [style*="font-style:italic"],
.consent-dialog [style*="font-style: italic"] {
  font-synthesis-style: none;
  /* With the injected blank italic @font-face, these elements render blank.
     The .consent-dialog rule itself has no unusual properties — harder to spot.
  */
}

/* Combined with an @font-face that covers font-style:italic at all weights: */
@font-face {
  font-family: 'ConsentFont';
  font-style: italic;
  font-weight: 100 900;  /* covers all weights */
  src: url('data:font/woff2;base64,...BLANK...') format('woff2');
}

Attack 4: font-synthesis disabled globally via font-synthesis shorthand

The font-synthesis shorthand can be set to none to disable all synthesis types simultaneously (weight, style, and small-caps). Using the shorthand rather than the longhand font-synthesis-style: none is a evasion technique: some automated audits look specifically for the longhand property and miss the shorthand disabling style synthesis. Setting font-synthesis: none at the root element or on a widely-matched selector applies to the entire page, including the consent dialog, without any consent-specific selector being flagged.

/* Shorthand targeting the whole page */
:root {
  font-synthesis: none;
  /* Disables ALL synthesis: weight, style, small-caps.
     Any font that lacks a weight or italic variant must rely on @font-face.
     With injected blank italic @font-face, all italic text on the page is blank.
     The consent dialog is affected by virtue of being on the page.
  */
}

/* The attack selector (:root) is not consent-specific — less likely
   to be flagged by consent-scoped audit tools. */

Detection implementation

/**
 * SkillAudit: detect font-synthesis-style consent attacks
 */
function detectFontSynthesisStyleAttacks(consentSelector = '[data-consent], .consent, #consent-dialog') {
  const findings = [];

  for (const sheet of document.styleSheets) {
    let rules;
    try { rules = sheet.cssRules; } catch { continue; }

    for (const rule of rules) {
      // Check style rules for font-synthesis-style:none
      if (rule.type === CSSRule.STYLE_RULE) {
        const fss = rule.style.getPropertyValue('font-synthesis-style');
        const fs = rule.style.getPropertyValue('font-synthesis');
        const synthDisabled = fss === 'none'
          || fs === 'none'
          || (fs && !fs.includes('style'));  // shorthand without 'style' = style disabled

        if (synthDisabled) {
          findings.push({
            severity: 'HIGH',
            selector: rule.selectorText,
            detail: `Selector "${rule.selectorText}" disables font-synthesis-style. Italic text in matching elements uses @font-face italic source — verify no blank italic @font-face is loaded for the same font family.`,
          });
        }
      }

      // Check @font-face italic sources
      if (rule.type === CSSRule.FONT_FACE_RULE) {
        const style = rule.style.getPropertyValue('font-style') || '';
        const src = rule.style.getPropertyValue('src') || '';
        const family = rule.style.getPropertyValue('font-family') || '';

        if ((style === 'italic' || style.startsWith('oblique')) && src.includes('data:')) {
          findings.push({
            severity: 'CRITICAL',
            type: '@font-face italic data: URI',
            family,
            fontStyle: style,
            detail: `@font-face "${family}" at font-style:${style} uses a data: URI source. Combined with font-synthesis-style:none, this may supply blank glyphs for italic consent text. Decode and inspect.`,
          });
        }
      }
    }
  }

  // Check consent elements for italic children with synthesis disabled
  const consentEls = document.querySelectorAll(consentSelector);
  for (const el of consentEls) {
    const cs = getComputedStyle(el);
    const synthStyle = cs.getPropertyValue('font-synthesis-style')
      || cs.getPropertyValue('font-synthesis');

    if (synthStyle === 'none') {
      const italicChildren = el.querySelectorAll('em, i, [style*="font-style:italic"], [style*="font-style: italic"]');
      if (italicChildren.length > 0) {
        findings.push({
          severity: 'HIGH',
          element: el,
          detail: `Consent element has font-synthesis-style:none with ${italicChildren.length} italic descendant(s). Verify the loaded italic @font-face font is not serving blank glyphs.`,
        });
      }
    }
  }

  return findings;
}

Related SkillAudit coverage

• CSS font-synthesis shorthand — disabling all synthesis types
• CSS font-synthesis-weight — bold synthesis disabled for consent attack
• CSS font-synthesis-small-caps — small-caps synthesis disabled for consent attack
• CSS @font-face injection attacks replacing consent fonts entirely
• CSS font-style property attacks forcing italic rendering on consent text