HTTP CSP font-src Directive

Die Content-Security-Policy font-src Direktive kontrolliert erlaubte Quellen für Web Fonts die über CSS @font-face geladen werden. Sie verhindert unerwünschtes Font-Loading das für Browser-Fingerprinting, Data-Exfiltration oder Performance-Degradation genutzt werden könnte.

Typ

CSP Fetch-Direktive

Syntax

Die Direktive akzeptiert eine Whitelist vertrauenswürdiger Font-Quellen.

http 
Content-Security-Policy: font-src 'self'
Content-Security-Policy: font-src 'self' https://fonts.googleapis.com data:

Direktiven

Die font-src Direktive verwendet Standard-CSP-Quellausdrücke zur Kontrolle erlaubter Font-Ressourcen.

'none'
Verbietet alle externen Fonts. Verwendet system fonts oder inline data-URLs.
'self'
Erlaubt Fonts nur vom gleichen Origin. Standard für self-hosted Font-Lösungen.
https://fonts.googleapis.com
Domain-Whitelisting. Erlaubt Fonts von spezifischen CDN-Providern wie Google Fonts oder Adobe Fonts.
data:
Erlaubt Fonts als Data-URLs. Nützlich für base64-encoded Fonts im CSS zur Performance-Optimierung.
https:
Erlaubt alle HTTPS-Font-Quellen. Erzwingt Verschlüsselung ohne Domain-Einschränkung.

Beispiele

Nachfolgend finden Sie praktische Anwendungsbeispiele für die font-src Direktive.

Beispiel 1 Google Fonts Integration

http 
HTTP/1.1 200 OK
Content-Security-Policy: font-src 'self' https://fonts.gstatic.com; style-src 'self' https://fonts.googleapis.com

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">
  <!-- Erlaubt durch style-src -->
</head>
<style>
@font-face {
  font-family: 'Roboto';
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2);
  /* Erlaubt durch font-src */
}
</style>
</html>

Beispiel 2 Self-Hosted Fonts mit Data-URL Fallback

http 
Content-Security-Policy: font-src 'self' data:; default-src 'self'

<style>
@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2'),
       url('data:font/woff2;base64,d09GMgABAAAAAA...') format('woff2');
  /* Beide erlaubt: self und data: */
}
</style>

Beispiel 3 Strikte Policy ohne externe Fonts

http 
Content-Security-Policy: font-src 'self'; default-src 'self'

<style>
@font-face {
  font-family: 'External';
  src: url('https://cdn.example.com/font.woff2');
  /* Blockiert: externe Domain */
}

body {
  font-family: 'External', system-ui, sans-serif;
  /* Fallback zu system-ui */
}
</style>

Browser blockiert das externe Font-Loading und verwendet system fonts als Fallback.

Font Loading Security Flow

CSP font-src verhindert unbefugtes Font-Loading

Vorteile für die Systemarchitektur

  • Fingerprinting-Prävention: Verhindert Font-basiertes Browser-Fingerprinting durch Kontrolle erlaubter Font-Quellen
  • Data-Exfiltration-Schutz: Blockiert bösartige Fonts die sensible Daten über URL-Parameter beim Font-Request exfiltrieren könnten
  • Performance-Kontrolle: Limitiert Font-Loading auf vertrauenswürdige schnelle CDNs zur Vermeidung von Render-Blocking durch langsame Fonts

Spezifikation

Content Security Policy Level 3 – W3C Working Draft https://www.w3.org/TR/CSP3/#directive-font-src

Weitere Spezifikationen

CSP default-src Directive, Cross-Origin-Resource-Policy Header