Content Security Policy voor React-apps

Content Security Policy (CSP) is een HTTP-responseheader die de browser vertelt welke bronnen voor inhoud betrouwbaar zijn. Door precies op te geven welke scripts, stijlen, afbeeldingen en lettertypen mogen worden geladen, voorkomt CSP dat geïnjecteerde schadelijke inhoud wordt uitgevoerd — zelfs als een XSS-kwetsbaarheid de aanvaller toestaat HTML in de pagina te injecteren.

default-src 'self' stelt de basis in: alle resourcetypen (scripts, stijlen, afbeeldingen, lettertypen en frames) mogen alleen vanaf dezelfde oorsprong worden geladen. script-src 'self' beperkt het laden van scripts tot dezelfde oorsprong en blokkeert scripts van externe CDN's, tenzij die expliciet zijn vermeld. Samen vormen deze twee richtlijnen de basis van een beperkende CSP.

eval() zet tijdens runtime een tekenreeks om in uitvoerbare code — precies wat XSS-payloads nodig hebben. Een CSP met script-src 'self' (zonder 'unsafe-eval') blokkeert eval() en verwante functies zoals new Function() en setTimeout(string). Hiermee wordt een belangrijke categorie van XSS-payloaduitvoering geëlimineerd.

'strict-dynamic' in script-src vertrouwt scripts die door al vertrouwde scripts worden geladen. Hiermee worden patronen voor het dynamisch laden van scripts mogelijk die bundlers gebruiken, zonder dat je elke CDN-URL op een toelatingslijst hoeft te zetten. Een vertrouwd script kan aanvullende scripts laden en die erven dat vertrouwen.

Als je toepassing een specifiek inline-script nodig heeft, zoals een initialisatiesnippet voor analyse, kun je de SHA-256-hash ervan berekenen en 'sha256-base64hash' toevoegen aan script-src. Alleen scripts die overeenkomen met die exacte hash mogen inline worden uitgevoerd. Elk door een aanvaller geïnjecteerd script heeft een andere hash en wordt geblokkeerd.

Een nonce is een cryptografisch willekeurige waarde die de server voor elk verzoek genereert. De server voegt de nonce zowel toe aan de scripttag (<script nonce="abc123">) als aan de CSP-header (script-src 'nonce-abc123'). Alleen scripts met de juiste nonce worden uitgevoerd. Aanvallers kunnen de nonce niet voorspellen en kunnen die daarom niet gebruiken voor geïnjecteerde scripts.

CSP ondersteunt rapportage van schendingen via report-uri /csp-violation-endpoint of de nieuwere richtlijn report-to. Wanneer de browser een bron vanwege CSP blokkeert, verstuurt die een JSON-rapport naar het eindpunt. Door deze rapporten te controleren, kun je zowel legitieme configuratieproblemen als actieve aanvalspogingen herkennen.

Voeg in Next.js CSP-headers toe in middleware: maak middleware.ts, genereer een nonce, stel de header Content-Security-Policy in en geef de nonce via een responseheader door aan de pagina. De pagina-indeling leest de nonce uit de header en past die toe op alle inline-scripts en stijltags.

Content-Security-Policy-Report-Only is de testmodus: de browser handhaaft niets, maar verstuurt schendingsrapporten voor alles wat zou zijn geblokkeerd. Zet de toepassing eerst in de Report-Only-modus, los alle schendingen op en schakel daarna over op de handhavende header Content-Security-Policy om te voorkomen dat de toepassing niet meer werkt.

Wanneer CSP een bron blokkeert, toont de console van Chrome DevTools een rode foutmelding met de geblokkeerde URL en de overtreden richtlijn. Deze meldingen zijn bijzonder waardevol tijdens ontwikkeling en tests. Elke schending moet worden opgelost door het beleid aan te passen, de bron naar een toegestane locatie te verplaatsen of een nonce/hash te gebruiken.

Een praktische CSP voor een React-SPA: default-src 'self'; script-src 'self' 'strict-dynamic' 'nonce-NONCE'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.yourdomain.com; frame-ancestors 'none'. De richtlijn frame-ancestors 'none' voorkomt ook clickjacking doordat je toepassing niet in iframes kan worden ingesloten.

CSP is een HTTP-header waarin vertrouwde bronnen voor inhoud worden opgegeven. default-src 'self' en script-src 'self' blokkeren externe scripts en eval. Inline-scripts zijn toegestaan via hashes of nonces. 'strict-dynamic' ondersteunt het dynamisch laden van scripts. Gebruik Content-Security-Policy-Report-Only om te testen voordat je handhaving inschakelt. Next.js implementeert CSP via middleware. De DevTools-console toont schendingen in realtime.