0Pricing
Frontend Academy · Lektion

Content Security Policy: Nonce und Hash

Schreiben Sie eine strikte CSP mit Nonces für Inline-Skripte, Hashes für bekannte Snippets und report-uri zur Überwachung von Verstößen in der Produktion.

Content Security Policy: Nonce und Hash ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

CSP-Zusammenfassung

CSP ist ein HTTP-Header, der festlegt, was der Browser laden darf — Skripte, Styles, Bilder, Schriftarten, Frames und Verbindungen. Als zusätzlicher Schutz greift CSP selbst dann häufig, wenn XSS Ihre Filter passiert: Die Payload wird blockiert.

Aufbau des CSP-Headers

Jede Direktive listet zulässige Quellen auf. 'self' bedeutet gleiche Herkunft. Auch bestimmte URLs können erlaubt werden.

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

Häufige Direktiven

default-src: Fallback für alles. script-src: JavaScript. style-src: CSS. img-src: Bilder. connect-src: fetch/XHR/WebSocket. font-src: Schriftarten. frame-ancestors: Wer Ihre Seite per iframe einbinden darf (Schutz vor Clickjacking).

'unsafe-inline' — die häufige Lücke

Viele Websites fügen 'unsafe-inline' hinzu, um Inline-<script>-Tags und onclick-Attribute zu erlauben. Dadurch wird der Hauptzweck von CSP ausgehebelt — XSS-Payloads können inline ausgeführt werden. Ersetzen Sie es durch Nonces oder Hashes.

Nonces — Positivliste für eine Verwendung

Erzeugen Sie für jede Anfrage ein zufälliges Nonce. Kennzeichnen Sie legitime Inline-Skripte mit diesem Nonce. Der Browser lässt nur Skripte mit passenden Nonces zu.

// Server (Express middleware):
import crypto from 'crypto';

app.use((req, res, next) => {
  res.locals.nonce = crypto.randomBytes(16).toString('base64');
  res.setHeader('Content-Security-Policy',
    `script-src 'nonce-${res.locals.nonce}' 'strict-dynamic'`
  );
  next();
});

// Template:
<script nonce="<%= nonce %>">window.config = {...};</script>

'strict-dynamic'

Kombinieren Sie das Nonce mit 'strict-dynamic': Vertrauenswürdige Skripte (also solche mit dem Nonce) dürfen zusätzliche Skripte laden. Dadurch müssen nicht mehr die URLs aller Skriptquellen aufgelistet werden. Das ist die aktuelle Best Practice für CSP.

Hashes — statische Positivliste

Bei bekannten, unveränderlichen Inline-Skripten (z. B. wenn Ihr Build immer dasselbe Bootstrap-Snippet erzeugt) berechnen Sie den SHA-256-Hash und fügen ihn als Hash-Quelle hinzu. Ein Nonce pro Anfrage ist dann nicht erforderlich.

// Hash of: console.log('hi');
Content-Security-Policy: script-src 'sha256-XwCNuB+/RUgPlAACI+yHrUKqUsm4zlpGV/Q8tEUx0Q4='

Hashes für Inline-Styles

Dasselbe Verfahren gilt für Inline-<style>-Tags: Berechnen Sie deren Hash und fügen Sie ihn zu style-src hinzu. Das ist für CSS besser als 'unsafe-inline'.

CSP-Report-Modus

Verwenden Sie Content-Security-Policy-Report-Only, um eine Richtlinie zu testen, ohne sie durchzusetzen. Verstöße werden an Ihren Endpunkt gemeldet, blockieren aber nichts. Das eignet sich hervorragend, um CSP schrittweise einzuführen.

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

// /csp-violations receives POSTs like:
{
  "csp-report": {
    "document-uri": "https://example.com/",
    "violated-directive": "script-src 'self'",
    "blocked-uri": "https://evil.com/x.js"
  }
}

report-to (modern)

report-to + Reporting-Endpoints ist der moderne Ersatz für report-uri. Es werden dieselben Daten strukturierter übertragen.

Reporting-Endpoints: csp="/csp-reports"
Content-Security-Policy: script-src 'self'; report-to csp

Integration in Frameworks

Next.js: Legen Sie CSP über middleware.ts oder die Header in next.config.js fest. Nuxt: Verwenden Sie das Modul nuxt-security. Vite: Konfigurieren Sie die Header des Entwicklungsservers; in der Produktion erfolgt dies über die Header-Konfiguration Ihres Hosts (Vercel, Netlify).

// next.config.js
module.exports = {
  async headers() {
    return [{
      source: '/(.*)',
      headers: [{
        key: 'Content-Security-Policy',
        value: "default-src 'self'; script-src 'self' 'strict-dynamic'"
      }]
    }];
  }
};

CSP testen

Öffnen Sie die DevTools → Konsole: Dort werden CSP-Verstöße protokolliert. Verwenden Sie https://csp-evaluator.withgoogle.com/, um Ihre Richtlinie bewerten zu lassen. Verwenden Sie in der Produktion zunächst den Report-Only-Modus und setzen Sie die Richtlinie erst nach der Behebung aller Verstöße durch.

Kurztest

Warum gilt 'unsafe-inline' in einer script-src-Direktive als Schwachstelle von CSP?

Zusammenfassung: Best Practices für CSP

Setzen Sie den Content-Security-Policy-Header mit Direktiven für die jeweiligen Ressourcentypen. Vermeiden Sie 'unsafe-inline' — verwenden Sie Nonces + 'strict-dynamic' oder SHA-Hashes. Setzen Sie frame-ancestors 'none' (oder 'self'). Testen Sie zuerst im Report-Only-Modus. Senden Sie Verstöße an /csp-violations (oder verwenden Sie das moderne report-to). Frameworks unterstützen CSP über Middleware oder Header-Konfigurationen.

Häufig gestellte Fragen

Ist die Lektion „Content Security Policy: Nonce und Hash“ kostenlos?

Ja — der vollständige Text von „Content Security Policy: Nonce und Hash“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Content Security Policy: Nonce und Hash“?

Schreiben Sie eine strikte CSP mit Nonces für Inline-Skripte, Hashes für bekannte Snippets und report-uri zur Überwachung von Verstößen in der Produktion. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Content Security Policy: Nonce und Hash“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. XSS-Schutz: Ausgabekodierung und CSP
  2. CSRF: SameSite-Cookies und Tokens
  3. Content Security Policy: Nonce und Hash
  4. OAuth-Flows im Frontend
← Zurück zu Frontend Academy