Cos’è una Content Security Policy?
Una Content Security Policy, o CSP, è un header di risposta che elenca da dove una pagina può caricare script, stili, font, immagini e frame. Tutto ciò che non è nell’elenco viene bloccato.
Il suo compito principale è fermare il cross-site scripting. Se un attaccante riesce a inserire uno script nella pagina, il browser si rifiuta comunque di eseguirlo, perché non è nell’elenco. Quindi una buona policy rende innocui molti bug pericolosi.
Passo 1: parti rigoroso
Inizia con la policy utile più rigorosa. Nel file .htaccess su Apache aggiungi una riga che consente solo i file del tuo sito:
Header always set Content-Security-Policy "default-src 'self'"Poi ricarica la pagina. Si apre ancora, ma alcune parti possono rompersi. Nella nostra demo è sparito un banner di spedizione gratuita aggiunto da un piccolo script in linea, e il font del titolo è cambiato. È previsto, perché ora la policy li blocca.
Passo 2: leggi la console
Apri gli strumenti per sviluppatori del browser e guarda la console. Ogni file bloccato compare lì con la regola che l’ha bloccato. Nella nostra demo la policy ha bloccato il foglio di stile di Google Fonts e lo script in linea.
Questo elenco è la tua lista di cose da fare. Scorrilo riga per riga e chiediti ogni volta: mi serve davvero? Se no, toglilo dalla pagina invece di consentirlo.
Passo 3: consenti solo il necessario
Ora aggiungi eccezioni precise. Per Google Fonts consenti gli stili da fonts.googleapis.com e i file dei font da fonts.gstatic.com:
Header always set Content-Security-Policy "default-src 'self'; style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"Script in linea: usa un hash
Per un piccolo script in linea aggiungi il suo hash a script-src. L’hash consente quello script esatto e nient’altro. Inoltre la console di Chrome mostra l’hash nel messaggio di errore. Copialo nella policy:
script-src 'self' 'sha256-AbC123...='
Se lo script cambia spesso, un nonce è più semplice: il server aggiunge un nuovo valore casuale alla policy e a ogni tag script a ogni richiesta. In questo modo la policy resta rigorosa.
Prova prima con Report-Only
Su un sito online non attivare mai una nuova policy senza prova. Invece inviala come Content-Security-Policy-Report-Only. Così il browser segnala ogni problema nella console ma non blocca nulla, e i visitatori non vedono mai una pagina rotta.
Header always set Content-Security-Policy-Report-Only "default-src 'self'"Visita ogni tipo di pagina per qualche giorno: home, articoli, cassa e moduli. Quando la console resta pulita, rinomina l’header nella vera Content-Security-Policy.
Esempi pronti
Ogni sito è diverso, quindi usali come punto di partenza. Poi controllali con la console.
Un semplice sito statico
default-src 'self'; img-src 'self' data:; object-src 'none'; base-uri 'self'; frame-ancestors 'self'Un sito con Google Analytics
default-src 'self'; script-src 'self' https://www.googletagmanager.com; connect-src 'self' https://www.google-analytics.com; img-src 'self' https://www.google-analytics.comDirettive utili in ogni policy
object-src 'none' blocca i vecchi plugin, base-uri 'self' ferma un falso link di base e frame-ancestors 'self' impedisce ad altri siti di inquadrare le tue pagine. Non rompono quasi mai nulla.
Come controllare la tua policy
Per prima cosa controlla gli header online con il nostro HTTP Header Checker gratuito. Mostra la policy esatta che ricevono i visitatori e segnala le parti mancanti o deboli.
Poi apri le pagine più importanti con la console aperta. Se non vedi errori CSP rossi, la policy va bene per il sito. Infine ricontrolla dopo ogni nuovo plugin, widget o codice di tracciamento, perché ognuno può chiedere la sua eccezione.
Errori comuni
- Aggiungere
'unsafe-inline'per far sparire gli errori. Lascia passare anche gli script iniettati, proprio ciò che la policy deve fermare. - Usare un carattere jolly come
https:in script-src, che consente script da qualsiasi sito. - Attivare una nuova policy senza provarla prima in Report-Only.
- Inviare due policy diverse da server e plugin; il browser le applica entrambe, quindi vince la regola più rigorosa.
- Dimenticare di aggiornare la policy dopo un nuovo servizio.
In breve: parti rigoroso, leggi la console, consenti host e hash precisi e prova in Report-Only. Per ogni direttiva nel dettaglio leggi la guida MDN su CSP.
Domande e risposte
Cos’è una Content Security Policy?
Un header di risposta che dice al browser da quali fonti una pagina può caricare script, stili, font e altri file. Tutto il resto viene bloccato.
Perché il sito si rompe dopo aver aggiunto una CSP?
Perché la policy blocca i file che non sono nel suo elenco. Quindi apri la console, leggi ogni elemento bloccato e consenti solo ciò che serve davvero.
Cos’è Content-Security-Policy-Report-Only?
Una versione di prova dell’header. Il browser segnala ogni problema senza bloccare nulla, così regoli la policy senza rischi.
Devo usare unsafe-inline?
No, perché consente ogni script in linea, anche quelli iniettati. Invece usa un hash o un nonce per i pochi script che ti servono.
Come consento uno script in linea?
Aggiungi il suo hash sha256 a script-src. Infatti la console di Chrome mostra l’hash nell’errore, quindi puoi copiarlo.
Che differenza c’è tra hash e nonce?
Un hash corrisponde a uno script esatto. Invece un nonce è un valore casuale che cambia a ogni richiesta e sta nella policy e nel tag script.
Come consento Google Fonts in una CSP?
Consenti fonts.googleapis.com in style-src e fonts.gstatic.com in font-src.
Una CSP aiuta la SEO?
Non direttamente. Tuttavia protegge visitatori e sito, e così mantiene le pagine sicure e affidabili.
Posso mettere una CSP in un tag meta?
Sì, con un tag meta http-equiv, tuttavia alcune direttive come frame-ancestors funzionano solo nel vero header.
Come aggiungo una CSP su Nginx?
Usa add_header Content-Security-Policy "..." always; nel blocco server, poi ricarica Nginx.
WordPress funziona con una CSP rigorosa?
Spesso sì nella parte pubblica, ma molti plugin aggiungono script in linea. Quindi prova in Report-Only e aggiungi hash o nonce dove serve.
Cosa fa default-src?
È la regola di riserva per ogni tipo di file senza direttiva propria, come script-src o img-src.
Cos’è frame-ancestors?
Una direttiva che dice quali siti possono mostrare la tua pagina in un frame. Con 'self' impedisci quindi agli altri di inquadrarla, e così blocchi il clickjacking.
Posso avere due header CSP?
Il browser li applica entrambi e un file deve superarli tutti e due. Perciò la pagina diventa spesso più rigorosa del previsto; tienine uno.
Perché la console mostra errori CSP delle estensioni?
Perché alcune estensioni inseriscono script e generano avvisi. Quindi prova in una finestra privata.
Come consento immagini da un altro dominio?
Aggiungi quel dominio a img-src, per esempio img-src 'self' https://images.example.com.
Cosa fa object-src 'none'?
Blocca i vecchi contenuti dei plugin come Flash. I siti moderni non ne hanno mai bisogno, perciò bloccarlo è sicuro.
Una CSP basta contro lo XSS?
È un livello in più robusto, tuttavia devi comunque fare l’escape dell’output e validare l’input sul server.
Come controllo la mia CSP?
Per prima cosa usa il nostro HTTP Header Checker gratuito per vedere l’header online, poi visita le pagine principali con la console aperta.
Il SEO Checker controlla la CSP?
Sì. Il nostro SEO Checker mostra se l’header viene inviato e porta a questa guida quando manca.