Frontend Academy · Lezione

Content Security Policy: nonce e hash

Scrivere una CSP rigorosa con nonce per gli script inline, hash per gli snippet noti e report-uri per monitorare le violazioni in produzione

Lezione 3 di 414 passaggi

Content Security Policy: nonce e hash è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Frontend Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Frontend Academy include 4 lezioni in totale.

Riepilogo CSP

La CSP è un header HTTP che definisce cosa il browser può caricare: script, stili, immagini, font, frame e connessioni. È una difesa a più livelli: anche se l'XSS supera i filtri, la CSP spesso blocca il payload.

Anatomia dell'header CSP

Ogni direttiva elenca le origini consentite. 'self' indica la stessa origine. È possibile consentire anche URL specifici.

Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://cdn.example.com;
  style-src 'self' 'unsafe-inline';
  img-src 'self' data: https:;
  connect-src 'self' https://api.example.com;
  font-src 'self' https://fonts.gstatic.com;
  frame-ancestors 'none';
  base-uri 'self';

Direttive comuni

default-src: valore predefinito per tutto. script-src: JavaScript. style-src: CSS. img-src: immagini. connect-src: fetch/XHR/WebSocket. font-src: font. frame-ancestors: chi può incorporare il sito in un iframe (protezione dal clickjacking).

'unsafe-inline': la falla più comune

Molti siti aggiungono 'unsafe-inline' per consentire i tag <script> inline e gli attributi onclick. Questo vanifica lo scopo principale della CSP: i payload XSS possono essere eseguiti inline. Lo sostituisca con nonce o hash.

Nonce: whitelist monouso

Generi un nonce casuale per ogni richiesta. Contrassegni gli script inline legittimi con il nonce. Il browser consente solo gli script con nonce corrispondenti.

// Server (Express middleware):
import crypto from 'crypto';

app.use((req, res, next) => {
  res.locals.nonce = crypto.randomBytes(16).toString('base64');
  res.setHeader('Content-Security-Policy',
    `script-src 'nonce-${res.locals.nonce}' 'strict-dynamic'`
  );
  next();
});

// Template:
<script nonce="<%= nonce %>">window.config = {...};</script>

'strict-dynamic'

Combini il nonce con 'strict-dynamic': gli script attendibili, cioè quelli con il nonce, possono caricare altri script. Non è più necessario elencare l'URL di ogni origine degli script. È la best practice attuale per la CSP.

Hash: whitelist statica

Per gli script inline fissi e noti, ad esempio quando la build genera sempre lo stesso frammento di bootstrap, calcoli il relativo SHA-256 e lo aggiunga come sorgente hash. Non è necessario un nonce per ogni richiesta.

// Hash of: console.log('hi');
Content-Security-Policy: script-src 'sha256-XwCNuB+/RUgPlAACI+yHrUKqUsm4zlpGV/Q8tEUx0Q4='

Hash per gli stili inline

Lo stesso approccio vale per i tag <style> inline: calcoli il relativo hash e lo aggiunga a style-src. È una soluzione migliore di 'unsafe-inline' per i CSS.

Modalità di segnalazione CSP

Utilizzi Content-Security-Policy-Report-Only per testare una policy senza applicarla. Le violazioni vengono segnalate al suo endpoint, ma non bloccano nulla. È ideale per introdurre gradualmente la CSP.

Content-Security-Policy-Report-Only: 
  default-src 'self';
  report-uri /csp-violations

// /csp-violations receives POSTs like:
{
  "csp-report": {
    "document-uri": "https://example.com/",
    "violated-directive": "script-src 'self'",
    "blocked-uri": "https://evil.com/x.js"
  }
}

report-to (moderno)

report-to + Reporting-Endpoints è il sostituto moderno di report-uri. Fornisce gli stessi dati in una struttura più organizzata.

Reporting-Endpoints: csp="/csp-reports"
Content-Security-Policy: script-src 'self'; report-to csp

Integrazioni con i framework

Next.js: imposti la CSP tramite gli header di middleware.ts o next.config.js. Nuxt: utilizzi il modulo nuxt-security. Vite: configuri gli header del server di sviluppo; in produzione, utilizzi la configurazione degli header del proprio host (Vercel, Netlify).

// next.config.js
module.exports = {
  async headers() {
    return [{
      source: '/(.*)',
      headers: [{
        key: 'Content-Security-Policy',
        value: "default-src 'self'; script-src 'self' 'strict-dynamic'"
      }]
    }];
  }
};

Test della CSP

Apra DevTools → Console: le violazioni CSP vengono registrate lì. Utilizzi https://csp-evaluator.withgoogle.com/ per valutare la policy. In produzione inizi con la modalità report-only e applichi la policy dopo aver corretto tutte le violazioni.

Verifica rapida

Perché 'unsafe-inline' nella direttiva script-src è considerato un punto debole della CSP?

Rispondi nella lezione interattiva

Riepilogo: best practice CSP

Imposti l'header Content-Security-Policy con direttive specifiche per ogni tipo di risorsa. Eviti 'unsafe-inline': utilizzi nonce + 'strict-dynamic' oppure hash SHA. Imposti frame-ancestors 'none' (o 'self'). Esegua prima i test in modalità Report-Only. Invii le violazioni a /csp-violations (oppure utilizzi il moderno report-to). I framework supportano la CSP tramite middleware o header configurati.

Gratis per iniziare

Impara HTML con un tutor IA — gratis

Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.

Corsi: 41
Lezioni: 163

Inizia a imparare gratis Visualizza il corso completo

Domande Frequenti

La lezione «Content Security Policy: nonce e hash» è gratuita?

Sì — il testo completo di «Content Security Policy: nonce e hash» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Frontend Academy, passa a CoddyKit PRO. Il corso Frontend Academy include 4 lezioni in totale.

Cosa imparerò in «Content Security Policy: nonce e hash»?

Scrivere una CSP rigorosa con nonce per gli script inline, hash per gli snippet noti e report-uri per monitorare le violazioni in produzione Eserciti Frontend Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Frontend Academy?

Non è richiesta alcuna esperienza precedente. Frontend Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Content Security Policy: nonce e hash»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Frontend Academy?

Sì. Ogni lezione Frontend Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Prevenzione XSS: codifica dell’output e CSP
CSRF: cookie SameSite e token
Content Security Policy: nonce e hash
Flussi OAuth dal frontend

← Torna a Frontend Academy