Content Security Policy per le app React

La Content Security Policy (CSP) è un header di risposta HTTP che comunica al browser quali origini dei contenuti sono attendibili. Dichiarando esattamente quali script, stili, immagini e font possono essere caricati, CSP impedisce l'esecuzione di contenuti dannosi iniettati, anche se una vulnerabilità XSS consente all'aggressore di inserire HTML nella pagina.

default-src 'self' imposta la regola di base: tutti i tipi di risorsa (script, stili, immagini, font e frame) possono essere caricati solo dalla stessa origine. script-src 'self' restringe il caricamento degli script alla stessa origine, bloccando gli script provenienti da CDN esterne a meno che non siano elencati esplicitamente. Insieme, queste due direttive costituiscono la base di una CSP restrittiva.

eval() converte una stringa in codice eseguibile durante l'esecuzione: è esattamente ciò di cui hanno bisogno i payload XSS. Una CSP con script-src 'self' (senza 'unsafe-eval') blocca eval() e funzioni correlate come new Function() e setTimeout(string). In questo modo elimina una classe importante di esecuzione di payload XSS.

'strict-dynamic' in script-src concede fiducia agli script caricati da script già considerati attendibili. Questo consente i pattern di caricamento dinamico degli script utilizzati dai bundler senza dover inserire nella whitelist ogni URL CDN. Uno script attendibile può caricare altri script, che ereditano tale attendibilità.

Se la sua applicazione richiede uno specifico script inline (ad esempio uno snippet di inizializzazione per l'analisi), può calcolarne l'hash SHA-256 e aggiungere 'sha256-base64hash' a script-src. Solo gli script con esattamente quell'hash possono essere eseguiti inline. Qualsiasi script iniettato dall'aggressore avrà un hash diverso e verrà bloccato.

Un nonce è un valore crittograficamente casuale generato dal server per ogni richiesta. Il server aggiunge il nonce sia al tag script (<script nonce="abc123">) sia all'header CSP (script-src 'nonce-abc123'). Vengono eseguiti solo gli script che riportano il nonce corretto. Gli aggressori non possono prevedere il nonce, quindi gli script iniettati non possono utilizzarlo.

CSP supporta la segnalazione delle violazioni tramite report-uri /csp-violation-endpoint o tramite la direttiva più recente report-to. Quando il browser blocca una risorsa a causa di CSP, invia un report JSON all'endpoint. Il monitoraggio di questi report aiuta a identificare sia i problemi di configurazione legittimi sia i tentativi di attacco in corso.

In Next.js, aggiunga gli header CSP nel middleware: crei middleware.ts, generi un nonce, imposti l'header Content-Security-Policy e passi il nonce alla pagina tramite un header di risposta. Il layout della pagina legge il nonce dall'header e lo applica a tutti gli script inline e ai tag di stile.

Content-Security-Policy-Report-Only è la modalità di test: il browser non applica alcun blocco, ma invia report delle violazioni per tutto ciò che sarebbe stato bloccato. Esegua prima il deployment in modalità Report-Only, risolva tutte le violazioni e poi passi all'header Content-Security-Policy che applica i blocchi, così da evitare di interrompere il funzionamento dell'applicazione.

Quando CSP blocca una risorsa, la console di Chrome DevTools mostra un messaggio di errore rosso che identifica l'URL bloccato e la direttiva violata. Questi messaggi sono preziosi durante lo sviluppo e i test. Ogni violazione deve essere risolta correggendo la policy, spostando la risorsa in un'origine consentita oppure utilizzando un nonce o un hash.

Una CSP pratica per una SPA React: 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'. Anche frame-ancestors 'none' impedisce il clickjacking, bloccando l'inserimento dell'applicazione in iframe.

Che cosa impedisce script-src 'self' in una Content Security Policy?

CSP è un header HTTP che dichiara le origini attendibili dei contenuti. default-src 'self' e script-src 'self' bloccano gli script esterni e eval. Gli script inline possono essere autorizzati tramite hash o nonce. 'strict-dynamic' supporta il caricamento dinamico degli script. Utilizzi Content-Security-Policy-Report-Only per eseguire i test prima di applicare i blocchi. Next.js implementa CSP tramite il middleware. La console di DevTools mostra le violazioni in tempo reale.