Content Security Policy for React-apper

Content Security Policy (CSP) er en HTTP-responsheader som forteller nettleseren hvilke innholdskilder som er klarert. Ved å angi nøyaktig hvilke skript, stilark, bilder og skrifter som kan lastes inn, forhindrer CSP at injisert, skadelig innhold kjøres — selv om en XSS-sårbarhet gjør det mulig for angriperen å injisere HTML i siden.

default-src 'self' angir grunnlaget: Alle ressurstyper (skript, stilark, bilder, skrifter og rammer) kan bare lastes inn fra samme opprinnelse. script-src 'self' begrenser skriptlasting til samme opprinnelse og blokkerer skript fra eksterne CDN-er med mindre de er oppført eksplisitt. Disse to direktivene utgjør til sammen grunnlaget for en restriktiv CSP.

eval() konverterer en streng til kjørbar kode under kjøring — akkurat det XSS-payload-er trenger. En CSP med script-src 'self' (uten 'unsafe-eval') blokkerer eval() og relaterte funksjoner som new Function() og setTimeout(string). Dette eliminerer en viktig type kjøring av XSS-payload-er.

'strict-dynamic' i script-src gir tillit til skript som lastes inn av skript som allerede er klarert. Dette muliggjør dynamiske mønstre for skriptlasting som brukes av bundlere, uten at du må hviteliste hver enkelt CDN-URL. Et klarert skript kan laste inn flere skript, og disse arver tilliten.

Hvis applikasjonen trenger et bestemt innebygd skript (for eksempel et initialiseringsskript for analyse), kan du beregne SHA-256-hashen for skriptet og legge til 'sha256-base64hash' i script-src. Bare skript som samsvarer med denne eksakte hashen, får kjøre innebygd. Alle skript som injiseres av en angriper, får en annen hash og blokkeres.

En nonce er en kryptografisk tilfeldig verdi som serveren genererer for hver forespørsel. Serveren legger noncen til både i skripttaggen (<script nonce="abc123">) og i CSP-headeren (script-src 'nonce-abc123'). Bare skript med riktig nonce kjøres. Angripere kan ikke forutsi noncen, og injiserte skript kan derfor ikke bruke den.

CSP støtter rapportering av brudd via report-uri /csp-violation-endpoint eller det nyere direktivet report-to. Når nettleseren blokkerer en ressurs på grunn av CSP, sender den en JSON-rapport til endepunktet. Overvåking av disse rapportene hjelper deg med å identifisere både legitime konfigurasjonsproblemer og aktive angrepsforsøk.

I Next.js legger du til CSP-headere i middleware: Opprett middleware.ts, generer en nonce, angi Content-Security-Policy-headeren, og send noncen videre til siden via en responsheader. Sideoppsettet leser noncen fra headeren og bruker den på alle innebygde skript og style-tagger.

Content-Security-Policy-Report-Only er testmodusen: Nettleseren håndhever ingen regler, men sender bruddsrapporter for alt som ellers ville blitt blokkert. Ta først i bruk Report-Only-modus, rett opp alle brudd, og bytt deretter til den håndhevende Content-Security-Policy-headeren for å unngå å ødelegge applikasjonen.

Når CSP blokkerer en ressurs, viser Chrome DevTools-konsollen en rød feilmelding som identifiserer den blokkerte URL-en og direktivet som ble brutt. Disse meldingene er svært nyttige under utvikling og testing. Hvert brudd må løses enten ved å rette policyen, flytte ressursen til en tillatt kilde eller bruke en nonce/hash.

En praktisk CSP for en 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'. frame-ancestors 'none' forhindrer også clickjacking ved å blokkere at applikasjonen bygges inn i iframes.

CSP er en HTTP-header som angir klarerte innholdskilder. default-src 'self' og script-src 'self' blokkerer eksterne skript og eval. Innebygde skript tillates via hasher eller noncer. 'strict-dynamic' støtter dynamisk lasting av skript. Bruk Content-Security-Policy-Report-Only til testing før håndheving. Next.js implementerer CSP via middleware. DevTools-konsollen viser brudd i sanntid.