Cosa sono i cookie e come lavorare con essi utilizzando JavaScript

? ? ? non proprio… ??? Meglio! Il biscotto ? è uno dei emoji preferiti sul web ed è anche una delle tecnologie più importanti del web.

Diamo un’occhiata a cosa si tratta, vero?

I Fondamenti dei Cookie del Browser

I cookie del browser sono stati introdotti nel web per mantenere informazioni persistenti sull’utente. Il primo caso d’uso era controllare se un utente aveva già visitato il sito web di Netscape.

I cookie sono stringhe che hanno un campo nome, un campo valore e attributi aggiuntivi opzionali. I valori sono stringhe e puoi memorizzare ciò che ritieni migliore per la tua applicazione. Il cookie _ga di Google Analytics è probabilmente uno dei più comuni, di solito appare così:

• Nome: _ga
• Valore: GA1.3.210706468.1583989741
• Dominio: .esempio.com
• Percorso: /
• Scade / Max-Age: 2022-03-12T05:12:53.000Z

I cookie possono memorizzare fino a 4096 byte di dati (questo include nome, valore, dominio, data di scadenza e qualsiasi altra cosa riesci a inserire). Puoi aggiungere un numero limitato di cookie per dominio che varia a seconda del tuo browser.

Come vengono creati i cookie

Ci sono due modi principali per creare i cookie:

• Con HTTP è possibile inviare Set-Cookie nell’intestazione della risposta HTTP. A seconda delle tecnologie che si stanno utilizzando per il server web, è possibile utilizzare strumenti e librerie diverse per gestire gli header dei cookie. Questi strumenti dovrebbero creare risposte HTTP che approssimativamente assomigliano a questo:

HTTP/2.0 200 OK
Content-type: text/html
Set-Cookie: alligator_name=barry
Set-Cookie: tasty_cookie=strawberry
... More http Content

È possibile aggiungere informazioni ai cookie come una data di scadenza e funzionalità di sicurezza come la direttiva Secure e il flag HttpOnly.

Set-Cookie: cookie_name=cookie_value; Expires=Wed, 17 Sep 2021 07:00:00 GMT; Secure; HttpOnly

Il flag HttpOnly significa che i cookie non possono essere letti o modificati dal browser. E Secure significa che il cookie può essere trasferito solo su HTTPS. Questi sono davvero importanti per proteggere la tua applicazione.

• Con Javascript è un po’ più complicato gestire i Cookie. Abbiamo un’interfaccia, document.cookie, che memorizza i nostri cookie e può essere riassegnata. Ad esempio, su un sito in cui è installato Google Analytics e nella console del browser, possiamo fare:

console.log(document.cookie)
// registra qualcosa come "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741"

// Questo segno di uguale non funziona come ti aspetti
document.cookie = "alligator=alligator_cookie_content;"
console.log(document.cookie)
// registra "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; alligator=alligator_cookie_content"
// Nota che il pezzo di codice precedente aggiunge il nuovo cookie che abbiamo creato

// Un'implementazione approssimativa di un'interfaccia cookie potrebbe apparire così:
const createCookie = (name, value) => document.cookie = name + '=' + value + ';'
// Per un aggiornamento reale, dovremmo prima verificare se il cookie esiste
const updateCookie = (name, value) => document.cookie = name + '=' + value + ';'
const deleteCookie = (name) => document.cookie = name + '=; Max-Age=-1;';  

Tipo di Cookie

Cookies di sessione

I cookie di sessione si riferiscono spesso a un tipo di cookie che esiste fino a quando il browser non viene chiuso. Per configurare un cookie di sessione è sufficiente NON specificare alcuna data di scadenza.

Ad esempio, è possibile memorizzare il nome dell’utente nel cookie. Chiunque abbia accesso al cookie avrà accesso al nome dell’utente. Poiché è nel cookie, non è necessario aggiungerlo alle nostre richieste.

Cookie persistente

I cookie persistenti non vengono eliminati dal browser quando l’utente lo chiude. Questi cookie hanno una data di scadenza che è possibile impostare sul server. È possibile impostare un cookie perché scada in un giorno o in dieci anni.

Cookie di terze parti

Possiamo differenziare i cookie che si trovano sullo stesso dominio da quelli che provengono da fornitori di terze parti. L’esempio che abbiamo dato in precedenza con Google Analytics è un esempio di cookie di terze parti. I cookie di terze parti possono essere utilizzati per tracciare le attività degli utenti. Per impostare un cookie di terze parti, è necessario impostare ';domain=thirdpartydomain.com'.

Cookie Max-Age vs Scadenza

I cookie sono di solito temporanei, quindi potresti voler impostare una data di scadenza precisa. Hai due strategie:

• Usa Expires e imposta una data di scadenza fissa. La data utilizza il formato data HTTP: <day-name>, <day> <month> <year> <hour>:<minute>:<second> GMT. Quindi ad esempio se vogliamo che il nostro cookie scada il 17 settembre 2020 possiamo fare così:

const jacksBirthday = new Date(2020, 8, 17);
document.cookie = 'jacksage=27; expires =' + jacksBirthday.toUTCString() + ';';

• L’uso di ‘Max-Age’ non è supportato da tutti i browser. Ma è la soluzione più sicura. Forza il cookie a scadere un certo periodo di tempo (in secondi) dopo che il client lo riceve:

// Scade dopo un giorno
const oneDayToSeconds = 24 * 60 * 60;
document.cookie =  'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';

? Questo è tutto! Spero ora tu abbia una migliore idea di come utilizzare i cookie sul lato client con JavaScript. Se hai domande, chiedici su Twitter. La prossima volta, vedremo come gestire le sessioni con i cookie e Express.js.