Vue Academy · Lezione

Protezione CSRF nelle SPA Vue

Cookie SameSite, token CSRF in Axios, pattern del double submit cookie.

Protezione CSRF nelle SPA Vue è una lezione Vue 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 Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.

Che cos'è il CSRF

Il Cross-Site Request Forgery induce il browser di un utente autenticato a inviare al sito una richiesta indesiderata che modifica lo stato, utilizzando i cookie che il browser invia automaticamente. L'attaccante non può leggere le risposte, ma può causare effetti collaterali come trasferimenti o eliminazioni.

Perché i cookie lo rendono possibile

Se l'autenticazione si basa su un cookie di sessione, il browser lo allega a ogni richiesta verso il dominio, comprese quelle avviate da un sito dannoso. Senza una difesa aggiuntiva, il server non può distinguere una richiesta contraffatta da una legittima.

L'attributo cookie SameSite

Impostare SameSite sul cookie indica al browser quando inviarlo tra siti diversi. SameSite=Strict impedisce l'invio del cookie per qualsiasi richiesta tra siti diversi, bloccando direttamente la maggior parte degli attacchi CSRF.

Set-Cookie: session=...; SameSite=Strict; Secure; HttpOnly

Strict e Lax a confronto

Strict è l'opzione più sicura, ma può disconnettere gli utenti quando arrivano da link esterni. Lax invia il cookie solo durante le navigazioni GET di primo livello, offrendo un compromesso comune.

Il pattern del token sincronizzatore

Una difesa a più livelli aggiunge un token CSRF che l'attaccante non può conoscere. Il server emette un token e il client deve restituirlo nelle richieste che modificano lo stato.

Cookie con doppio invio

Un approccio comune nelle SPA: il server imposta il token CSRF in un cookie leggibile, non HttpOnly. Il client lo legge e lo invia nuovamente in un'intestazione. Il server verifica che i due valori corrispondano.

Set-Cookie: XSRF-TOKEN=abc123; SameSite=Strict; Secure

Leggere il token dal cookie

Legga il valore del cookie CSRF con una piccola funzione di supporto nella sua app Vue.

function getCookie(name) {
  const match = document.cookie.match(
    new RegExp("(^| )" + name + "=([^;]+)")
  );
  return match ? decodeURIComponent(match[2]) : null;
}
const token = getCookie("XSRF-TOKEN");

Impostare l'intestazione nelle richieste

Invii il token in un'intestazione personalizzata come X-CSRF-Token in ogni richiesta che modifica lo stato (POST, PUT, PATCH, DELETE).

await fetch("/api/transfer", {
  method: "POST",
  headers: { "X-CSRF-Token": token },
  body: JSON.stringify(payload)
});

Intestazioni predefinite di Axios

Con Axios può impostare una volta l'intestazione come valore predefinito, così ogni richiesta la include automaticamente.

import axios from "axios";

axios.defaults.headers.common["X-CSRF-Token"] = getCookie("XSRF-TOKEN");

Supporto xsrf integrato in Axios

Axios può eseguire automaticamente questa operazione: configuri i nomi del cookie e dell'intestazione e sarà Axios a leggere il cookie e impostare l'intestazione.

const api = axios.create({
  xsrfCookieName: "XSRF-TOKEN",
  xsrfHeaderName: "X-CSRF-Token",
  withCredentials: true
});

Perché un'intestazione personalizzata è utile

I browser impediscono ai siti cross-origin di impostare intestazioni personalizzate senza un preflight CORS superato con successo. Richiedendo X-CSRF-Token, una richiesta contraffatta proveniente da un altro sito non può includerlo e il server la rifiuta.

Verifica rapida

Quale attributo del cookie attenua più direttamente il CSRF da solo?

Riepilogo

Il CSRF sfrutta i cookie inviati automaticamente per contraffare richieste che modificano lo stato. Imposti SameSite=Strict sui cookie di autenticazione come difesa principale e aggiunga un token CSRF: lo legga da un cookie e lo invii in ogni richiesta mutante tramite un'intestazione X-CSRF-Token, configurata una volta come valore predefinito di Axios o tramite le opzioni xsrf integrate di Axios.

Domande Frequenti

La lezione «Protezione CSRF nelle SPA Vue» è gratuita?

Sì — il testo completo di «Protezione CSRF nelle SPA Vue» è 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 Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.

Cosa imparerò in «Protezione CSRF nelle SPA Vue»?

Cookie SameSite, token CSRF in Axios, pattern del double submit cookie. Eserciti Vue 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 Vue Academy?

Non è richiesta alcuna esperienza precedente. Vue 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 «Protezione CSRF nelle SPA Vue»?

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 Vue Academy?

Sì. Ogni lezione Vue 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

← Torna a Vue Academy