Cookie: document.cookie

I cookie sono piccoli frammenti di dati (massimo ~4 KB ciascuno) che un sito memorizza nel browser e che vengono allegati automaticamente a ogni richiesta inviata alla stessa origine. Proprio quest'ultimo aspetto li distingue dagli altri meccanismi di memorizzazione lato client: i cookie viaggiano verso il server, quindi rappresentano il meccanismo classico per gli identificatori di sessione, i token "ricordami" e le preferenze di lingua o tema che il server deve conoscere. Questa guida spiega come leggere, scrivere ed eliminare i cookie con document.cookie, gli attributi che ne controllano l'ambito e il ciclo di vita, e quando conviene utilizzare un'opzione di memorizzazione diversa.

Come funziona document.cookie

document.cookie è una proprietà ingannevolmente semplice. Leggerla restituisce tutti i cookie del documento corrente come un'unica stringa separata da punti e virgola di coppie name=value. Scriverci imposta un cookie alla volta — e in modo fondamentale, assegnarle un valore non sovrascrive l'intera stringa. Il browser analizza l'assegnazione e unisce quel singolo cookie all'insieme esistente:

// Reading: returns everything as one string
document.cookie; // "theme=dark; lang=en; sessionId=abc123"

// Writing: adds/updates ONE cookie, leaves the rest intact
document.cookie = "username=John";

Gli attributi che si aggiungono (path, expires, Secure, …) sono di sola scrittura — configurano il cookie ma non vengono mai restituiti quando si legge document.cookie. Si ottengono sempre e solo coppie name=value.

Creare un cookie

Per creare un cookie, si assegna una stringa name=value a document.cookie, seguita opzionalmente da attributi separati da ;. Se il valore contiene spazi, punti e virgola o altri caratteri speciali, codificarlo con encodeURIComponent per evitare errori di analisi:

Questo crea un cookie denominato username con il valore John Doe (codificato per gestire lo spazio), che scade l'8 giugno 2025 ed è accessibile in tutto il sito (path=/).

Attributi dei cookie

Gli attributi vengono aggiunti alla stringa di assegnazione e controllano dove viene inviato il cookie e per quanto tempo rimane attivo. I più importanti:

Senza expires o max-age, si ottiene un cookie di sessione che scompare alla chiusura del browser.

Impostare una scadenza

Usare expires per una data assoluta o max-age per una durata relativa in secondi. max-age è generalmente più comodo perché non richiede la formattazione di una data:

Questo cookie userSettings scade 24 ore (86.400 secondi) dopo la sua creazione.

Leggere un cookie specifico

Poiché document.cookie restituisce tutti i cookie in un'unica stringa, ottenere un singolo valore richiede di analizzarla. Una funzione helper robusta aggiunge il prefisso ; alla stringa in modo che la stessa suddivisione funzioni per il primo cookie come per qualsiasi altro:

Se è necessario esaminare ogni cookie, dividere su ; e analizzare ciascuna coppia singolarmente:

Eliminare un cookie

Non esiste un comando "elimina" — si elimina un cookie reimpostandolo con una scadenza nel passato (o max-age=0). L'insidia che inganna tutti: occorre usare lo stesso path e domain con cui il cookie è stato creato, altrimenti il browser lo tratta come un cookie diverso e lascia intatto l'originale.

Impostare expires=Thu, 01 Jan 1970 00:00:00 UTC produce lo stesso effetto per i browser che preferiscono expires a max-age.

Proteggere i cookie

Quando un cookie contiene dati sensibili (soprattutto un token di sessione), gli attributi sono importanti quanto il valore:

• Secure — invia il cookie solo tramite HTTPS, evitando che possa trapelare su una connessione HTTP non cifrata.
• SameSite — controlla se il cookie viene allegato alle richieste cross-site. Lax (il valore predefinito moderno) lo blocca nella maggior parte delle richieste cross-site, mitigando il CSRF; Strict è il più restrittivo; None (che richiede Secure) è destinato ai casi d'uso genuinamente cross-site.
• HttpOnly — nasconde completamente il cookie a JavaScript, proteggendo i token di sessione dai furti tramite XSS. Non può essere impostato da document.cookie; il server deve inviarlo tramite l'intestazione di risposta Set-Cookie. È per questo che i cookie di sessione sono tipicamente gestiti lato server.

document.cookie = "sessionId=abc123; expires=Sat, 08 Jun 2025 12:00:00 UTC; path=/; Secure; SameSite=Lax";

Cookie vs. localStorage

I cookie non sono l'unico archivio lato client e, per la maggior parte dei dati, non sono la scelta migliore. Conviene usare i cookie solo quando il server ha bisogno dei dati a ogni richiesta:

Se si deve solo ricordare qualcosa sul client e il server non lo legge mai, localStorage o sessionStorage è più semplice e capiente; lo Storage API lo tratta in modo approfondito. Poiché i cookie vengono inviati automaticamente con le richieste, interagiscono anche con le regole CORS — vedere le richieste cross-origin con Fetch per inviare credenziali tra origini diverse.

Conclusione

I cookie rimangono il metodo standard per condividere piccoli frammenti di stato con il server — sessioni, autenticazione e preferenze lette dal server. Si scrivono uno alla volta con document.cookie, si circoscrivono con path/domain, se ne controlla la durata con expires/max-age e si mettono in sicurezza con Secure, SameSite e (lato server) HttpOnly. Per dati più voluminosi e solo lato client, è preferibile utilizzare Web Storage.

Esercizio