Content-Security-Policy (CSP): cos'è e come aggiungerla
Content-Security-Policy (CSP) è un header di risposta HTTP che indica al browser da quali origini può caricare ed eseguire script, stili e altri contenuti. Una buona CSP è una delle difese più forti contro il cross-site scripting (XSS).
Che cos'è
La CSP è una allowlist applicata dal browser. Quando il tuo server invia un header Content-Security-Policy, il browser si rifiuta di caricare o eseguire qualsiasi cosa che la policy non consenta esplicitamente: script inline, domini di terze parti, eval() e così via.
Una policy è un elenco di direttive. Ad esempio, script-src 'self' significa "esegui solo JavaScript servito dalla mia stessa origine", mentre object-src 'none' blocca completamente i plugin legacy.
Perché è importante
Senza CSP, qualsiasi bug di HTML injection o XSS permette a un malintenzionato di eseguire JavaScript arbitrario nei browser dei tuoi utenti: rubare sessioni, riscrivere la pagina o esfiltrare dati.
Una CSP debole è quasi peggio di nessuna. 'unsafe-inline' riabilita gli script inline su cui contano i malintenzionati e un'origine con wildcard come script-src * lascia caricare script da qualsiasi parte, vanificandone lo scopo.
Come risolverlo
Imposta l'header in next.config.js così che si applichi a ogni risposta. Parti rigoroso e allenta solo dove serve.
// 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 }] }];
},
};Se hai bisogno di script inline, genera un nonce per ogni richiesta e aggiungilo sia al tag script sia alla policy (script-src 'self' 'nonce-<value>') invece di usare 'unsafe-inline'.
base-uri 'none', frame-ancestors 'none' e object-src 'none' chiudono elusioni comuni (iniezione di tag base, clickjacking e incorporamento di plugin) e sono valori predefiniti sicuri per la maggior parte delle app.
FAQ
Una CSP rallenta il mio sito?
No. La CSP è solo un header che il browser valuta; non aggiunge latenza misurabile. Il costo reale è il lavoro di ingegneria per rimuovere gli script inline.
Qual è la differenza tra Content-Security-Policy e X-Frame-Options?
X-Frame-Options controlla solo l'incorniciamento (clickjacking). La direttiva frame-ancestors della CSP la sostituisce e la CSP governa anche script, stili, immagini e altro.
La tua app è interessata?
AppSafe controlla questo e decine di altri problemi in un'unica scansione gratuita.
Scansiona la mia app gratis