Alle Guides
Schweregrad HochSecurity-Header

Content-Security-Policy (CSP): was sie ist und wie du eine hinzufügst

Content-Security-Policy (CSP) ist ein HTTP-Response-Header, der dem Browser mitteilt, welche Quellen für Skripte, Styles und andere Inhalte geladen und ausgeführt werden dürfen. Eine gute CSP ist eine der stärksten Abwehrmaßnahmen gegen Cross-Site Scripting (XSS).

Was es ist

CSP ist eine vom Browser durchgesetzte Allowlist. Wenn dein Server einen Content-Security-Policy-Header sendet, weigert sich der Browser, alles zu laden oder auszuführen, was die Policy nicht ausdrücklich erlaubt — Inline-Skripte, Drittanbieter-Domains, eval() usw.

Eine Policy ist eine Liste von Direktiven. Zum Beispiel bedeutet script-src 'self' „führe nur JavaScript aus, das von meinem eigenen Origin ausgeliefert wird“, während object-src 'none' Legacy-Plugins vollständig blockiert.

Warum es wichtig ist

Ohne CSP kann jeder HTML-Injection- oder XSS-Bug einem Angreifer erlauben, beliebiges JavaScript in den Browsern deiner Nutzer auszuführen — Sitzungen stehlen, die Seite umschreiben oder Daten exfiltrieren.

Eine schwache CSP ist fast so schlecht wie gar keine. 'unsafe-inline' erlaubt wieder die Inline-Skripte, auf die Angreifer bauen, und eine Wildcard-Quelle wie script-src * lässt Skripte von überall laden und verfehlt so den Zweck.

So behebst du es

Füge eine Basis-Policy in Next.js hinzu

Setze den Header in next.config.js, damit er für jede Antwort gilt. Beginne strikt und lockere nur dort, wo es nötig ist.

// next.config.js
const csp = [
  "default-src 'self'",
  "script-src 'self'",
  "style-src 'self' 'unsafe-inline'",
  "img-src 'self' data:",
  "base-uri 'none'",
  "frame-ancestors 'none'",
  "object-src 'none'",
].join("; ");

module.exports = {
  async headers() {
    return [{ source: "/:path*", headers: [{ key: "Content-Security-Policy", value: csp }] }];
  },
};
Ersetze unsafe-inline durch Nonces

Wenn du Inline-Skripte brauchst, generiere ein Nonce pro Anfrage und füge es sowohl dem Script-Tag als auch der Policy hinzu (script-src 'self' 'nonce-<value>'), statt 'unsafe-inline' zu verwenden.

Setze immer die Härtungs-Direktiven

base-uri 'none', frame-ancestors 'none' und object-src 'none' schließen häufige Umgehungen (Base-Tag-Injection, Clickjacking und Plugin-Einbettung) und sind für die meisten Apps sichere Standardwerte.

FAQ

Verlangsamt eine CSP meine Website?

Nein. CSP ist nur ein Header, den der Browser auswertet; sie fügt keine messbare Latenz hinzu. Der eigentliche Aufwand ist die Entwicklungsarbeit, Inline-Skripte zu entfernen.

Was ist der Unterschied zwischen Content-Security-Policy und X-Frame-Options?

X-Frame-Options steuert nur das Framing (Clickjacking). Die frame-ancestors-Direktive der CSP ersetzt es, und CSP regelt zusätzlich Skripte, Styles, Bilder und mehr.

Ist deine App betroffen?

AppSafe prüft dies und Dutzende weitere Probleme in einem kostenlosen Scan.

Meine App gratis scannen

Verwandte Guides

HTTP Strict Transport Security (HSTS) erklärt

Erzwinge, dass jede Verbindung HTTPS nutzt — sogar die erste.

Die Cookie-Flags Secure, HttpOnly und SameSite

Drei Flags, die verhindern, dass Session-Cookies gestohlen werden.

Warum deine Website eine Weiterleitung von HTTP zu HTTPS braucht

Lass die unsichere Tür nicht offen.