CSRF: cookie SameSite e token
Capire come il Cross-Site Request Forgery sfrutta i cookie, usare SameSite=Strict/Lax per prevenirlo e aggiungere token synchronizer per una protezione aggiuntiva
CSRF: cookie SameSite e token è una lezione Frontend Academy gratuita su CoddyKit. Questa è la lezione 2 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.
Che cos'è il CSRF
Falsificazione di richieste cross-site: un attaccante induce il browser di un utente autenticato a inviare una richiesta al suo sito. Il browser allega i cookie dell'utente e il server considera la richiesta legittima e proveniente dall'utente.
Un attacco CSRF classico
L'utente ha effettuato l'accesso a bank.com. Visita evil.com. evil.com invia un modulo nascosto a bank.com/transfer con il numero di conto dell'attaccante. Il browser invia automaticamente il cookie di sessione di bank.com. Il server trasferisce il denaro.
Il problema della fiducia
Il CSRF funziona perché i browser includono automaticamente i cookie nelle richieste cross-origin. Senza protezioni aggiuntive, il server non può capire che la richiesta proviene da un sito malevolo.
Cookie SameSite: la soluzione moderna
L'attributo cookie SameSite controlla quando i cookie vengono inviati nelle richieste cross-origin. Strict: non viene mai inviato cross-origin. Lax (predefinito in Chrome): viene inviato solo durante la navigazione GET di livello principale. None: viene sempre inviato (deve essere presente anche Secure).
Set-Cookie: session=abc; HttpOnly; Secure; SameSite=LaxSameSite=Lax come impostazione predefinita
Chrome imposta per impostazione predefinita tutti i cookie su Lax se non viene specificato SameSite. Questo blocca la maggior parte degli attacchi CSRF, ma è comunque opportuno specificarlo esplicitamente.
SameSite=Strict per la massima sicurezza
Utilizzi Strict per i cookie più sensibili (sessioni di amministrazione, transazioni bancarie). Svantaggio: l'utente risulta disconnesso quando arriva tramite un link da un altro sito.
Token CSRF (pattern synchroniser)
Per supportare i browser meno recenti o aumentare la sicurezza, utilizzi token CSRF. Il server genera un token casuale, lo incorpora nella pagina e lo richiede in ogni richiesta che modifica lo stato.
// Server embeds token in HTML or sets it as a non-HttpOnly cookie:
<meta name="csrf-token" content="a1b2c3...">
// Client reads token and sends in header:
const token = document.querySelector('meta[name=csrf-token]').content;
fetch('/transfer', {
method: 'POST',
headers: { 'X-CSRF-Token': token },
body: JSON.stringify({ amount: 100 })
});
// Server verifies the X-CSRF-Token header matches the user's sessionCookie double-submit
Il server imposta un cookie CSRF (non-HttpOnly, in modo che JavaScript possa leggerlo). Il client lo legge e invia il valore in un header. Il server verifica che il cookie corrisponda all'header. Un attaccante non può leggere il cookie cross-origin e quindi non può replicare l'header.
Perché funziona
evil.com dell'attaccante non può leggere i cookie di bank.com (Same-Origin Policy). Di conseguenza non può impostare l'header X-CSRF-Token. La richiesta non supera il controllo del token sul server.
CSRF nelle SPA con token Bearer
Se esegue l'autenticazione con Authorization: Bearer <jwt> memorizzato in memoria (non in un cookie), il CSRF non si applica: i browser non inviano automaticamente gli header. Compromesso: maggiore vulnerabilità all'XSS, perché i token accessibili a JavaScript possono essere rubati.
Il trucco dell'header personalizzato
Per le API che accettano solo JSON con un header personalizzato (ad esempio X-Requested-With), i browser inviano una richiesta OPTIONS di preflight e non includono i cookie nel preflight. Questo blocca di fatto il CSRF basato su moduli semplici.
Endpoint idempotenti e con mutazioni
Il CSRF riguarda soprattutto le richieste che modificano lo stato (POST, PUT, DELETE). Gli endpoint GET dovrebbero essere idempotenti, cioè non produrre effetti collaterali, in modo che una richiesta GET contraffatta non possa causare danni.
Verifica rapida
Quale valore del cookie SameSite impedisce per impostazione predefinita l'invio dei cookie nella maggior parte delle richieste cross-site nei browser moderni?
Riepilogo: prevenzione del CSRF
Imposti SameSite=Lax (o Strict) sui cookie di sessione: blocca la maggior parte degli attacchi CSRF. Aggiunga HttpOnly e Secure. Utilizzi token CSRF (synchroniser o cookie double-submit) per una protezione aggiuntiva. I token Bearer negli header evitano il CSRF, ma aumentano il rischio di XSS. Il trucco dell'header personalizzato forza il preflight. Renda idempotenti le richieste GET.
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
Domande Frequenti
La lezione «CSRF: cookie SameSite e token» è gratuita?
Sì — il testo completo di «CSRF: cookie SameSite e token» è 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 «CSRF: cookie SameSite e token»?
Capire come il Cross-Site Request Forgery sfrutta i cookie, usare SameSite=Strict/Lax per prevenirlo e aggiungere token synchronizer per una protezione aggiuntiva 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 2 di 4.
Quanto tempo richiede la lezione «CSRF: cookie SameSite e token»?
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