Content Security Policy (CSP) Komplett-Guide: Von den Grundlagen bis zur Produktion

CSP ist eine der effektivsten Verteidigungen gegen XSS-Angriffe. Durch die Kontrolle, welche Ressourcen geladen werden dürfen, kann CSP böswillige Code-Injektion verhindern.

Was ist CSP?

CSP ist ein HTTP-Response-Header, der kontrolliert, welche Ressourcen der Browser laden darf.

Wie CSP funktioniert

Der Browser blockiert Ressourcen, die gegen die Richtlinie verstoßen:

Browser receives HTTP response:
  Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com

Browser allows:
  ✅ <script src="/app.js">              (same origin = 'self')
  ✅ <script src="https://cdn.example.com/lib.js">

Browser blocks:
  ❌ <script src="https://evil.com/steal.js">
  ❌ <script>alert('XSS')</script>       (inline = not allowed)

Alle CSP-Direktiven

Quellwerte erklärt

Schrittweise Implementierung

Schritt 1: Report-Only-Modus

Zuerst im Report-Only-Modus bereitstellen:

Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

Schritt 3: Richtlinie erstellen

Richtlinie basierend auf Ergebnissen:

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com;
  frame-ancestors 'self';
  base-uri 'self';
  form-action 'self';
  object-src 'none';
  upgrade-insecure-requests

Häufige Konfigurationen

Strenge Richtlinie

Content-Security-Policy:
  default-src 'none';
  script-src 'self';
  style-src 'self';
  img-src 'self';
  font-src 'self';
  connect-src 'self';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';
  object-src 'none';
  upgrade-insecure-requests

Moderat (typische SPA)

Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'unsafe-inline' 'unsafe-eval';
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: blob: https:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self' https://api.example.com wss://ws.example.com;
  frame-ancestors 'self'

Mit Google Analytics

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://www.googletagmanager.com https://www.google-analytics.com;
  img-src 'self' https://www.google-analytics.com https://www.googletagmanager.com;
  connect-src 'self' https://www.google-analytics.com https://analytics.google.com

Implementierungsmethoden

Nginx

add_header Content-Security-Policy "default-src 'self'; script-src 'self'" always;

Apache

Header set Content-Security-Policy "default-src 'self'; script-src 'self'"

Express.js

// Using helmet middleware (recommended)
const helmet = require('helmet');
app.use(helmet.contentSecurityPolicy({
  directives: {
    defaultSrc: ["'self'"],
    scriptSrc: ["'self'", "https://cdn.example.com"],
    styleSrc: ["'self'", "'unsafe-inline'"],
    imgSrc: ["'self'", "data:", "https:"],
  }
}));

// Or manually
app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy',
    "default-src 'self'; script-src 'self'");
  next();
});

HTML Meta Tag

<meta http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self'">

Häufige Fehler

FAQ