Come impostare i cookie nel browser?

È possibile impostare i cookie nel browser in diversi modi.

1. Attraverso l'intestazione HTTP Set-Cookie dal server. Questo è il metodo principale per impostare i cookie, che avviene lato server. Il server invia al browser l'intestazione Set-Cookie, che istruisce il browser a salvare una coppia chiave-valore specifica.

   Esempio di risposta HTTP dal server:

   HTTP/1.1 200 OK
   Content-Type: text/html
   Set-Cookie: username=johndoe; Expires=Thu, 21 Dec 2023 12:00:00 GMT; Path=/; Secure; HttpOnly
   Set-Cookie: settings=theme=dark&lang=en; Path=/
   

   Parametri dell'intestazione Set-Cookie:

   • name=value: Nome e valore del cookie. Parametro obbligatorio.
   • Expires=<date>: Data e ora di scadenza del cookie. Se non specificato, il cookie è di sessione e viene eliminato alla chiusura del browser. Formato data - RFC 1123.
   • Max-Age=<seconds>: Durata massima del cookie in secondi. Ha priorità su Expires.
   • Domain=<domain>: Dominio per cui il cookie è disponibile. Di default, il dominio corrente (ma non sottodomini).
   • Path=<path>: Percorso sul server per cui il cookie è disponibile. Di default, il percorso radice /.
   • Secure: Flag che indica che il cookie deve essere inviato solo tramite HTTPS.
   • HttpOnly: Flag che indica che il cookie non è accessibile tramite JavaScript tramite document.cookie. Protegge dagli attacchi XSS.
   • SameSite=<mode>: Gestisce l'invio del cookie nelle richieste cross-site. Valori possibili: Strict, Lax (di default), None.

2. Attraverso JavaScript lato client. Con l'oggetto document.cookie si può leggere, scrivere e eliminare i cookie.

   Scrittura del cookie:

   // Impostare un cookie semplice
   document.cookie = "username=johndoe";
   
   // Impostare un cookie con expires, path, secure e SameSite=Lax
   const expiryDate = new Date();
   expiryDate.setTime(expiryDate.getTime() + (30 * 24 * 60 * 60 * 1000)); // 30 giorni
   document.cookie = `token=abcdef123456; expires=${expiryDate.toUTCString()}; path=/; secure; SameSite=Lax`;
   

   Lettura dei cookie:

   // document.cookie restituisce una stringa di tutti i cookie disponibili in formato "key1=value1; key2=value2; ..."
   console.log(document.cookie);
   

   Eliminazione del cookie: Per eliminare un cookie, bisogna impostarlo con una data di scadenza nel passato.

   document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; // Impostare expires nel passato
   

   È importante specificare gli stessi parametri path e domain (se sono stati impostati) di quelli usati al momento della creazione. SameSite deve anche corrispondere per una corretta eliminazione.

3. Con librerie JavaScript di terze parti. Esistono librerie che semplificano il lavoro con i cookie (ad esempio, js-cookie). Offrono un'API più comoda per impostare, ottenere e eliminare i cookie.

   Esempio con js-cookie:

   // Inclusione della libreria
   // <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.1/dist/js.cookie.min.js"></script>
   
   // Impostare un cookie
   Cookies.set('username', 'johndoe');
   
   // Impostare un cookie con opzioni
   Cookies.set('token', 'abcdef123456', { expires: 30, path: '/', secure: true, sameSite: 'Lax' }); // expires in giorni
   
   // Ottenere i cookie
   const username = Cookies.get('username'); // Restituisce 'johndoe' o undefined
   const allCookies = Cookies.get(); // Restituisce un oggetto con tutti i cookie
   
   // Eliminare i cookie
   Cookies.remove('username');
   Cookies.remove('token', { path: '/' }); // Specificare il path se è stato impostato al momento della creazione