Cosa sono i cookie e come usarli con JavaScript

Introduzione

I cookie del browser sono stati introdotti nel web per mantenere informazioni persistenti sull'utente. Il primo caso d'uso è stato quello di verificare 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 opzionali aggiuntivi. I valori sono stringhe e puoi memorizzare tutto ciò che ritieni sia meglio per la tua applicazione. Google Analytics _ga è probabilmente il one of || the cookie più comune in circolazione, di solito ha questo aspetto:

• Name: _ga
• Value: GA1.3.210706468.1583989741
• Domain: .example.com
• Path: /
• Expires / 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 tu possa inserire lì). Puoi aggiungere un numero limitato di cookie per dominio che cambia a seconda del browser.

Come vengono creati i cookie

Esistono due modi principali per creare i cookie:

• Con HTTP puoi inviare Set-Cookie con la tua intestazione di risposta HTTP. A seconda delle tecnologie che stai utilizzando per il tuo server web; puoi utilizzare diversi strumenti e librerie per gestire le intestazioni dei cookie. Questi strumenti dovrebbero creare risposte HTTP che saranno più o meno simili a questa:

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

Puoi aggiungere informazioni ai tuoi cookie come una data di scadenza expiration date e funzioni 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 molto importanti per proteggere la tua applicazione.

• Con Javascriptè è 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, nella console per sviluppatori, possiamo fare:

console.log(document.cookie)
// logs something like "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741"

// This equal sign does not work as you expect
document.cookie = "alligator=alligator_cookie_content;"
console.log(document.cookie)
// logs "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; alligator=alligator_cookie_content"
// Notice that the previous piece of code appends the new cookie we created

// A rough implementation of a cookie interface could look like this:
const createCookie = (name, value) => document.cookie = name + '=' + value + ';'
// For a real update we would first check if the cookie exists
const updateCookie = (name, value) => document.cookie = name + '=' + value + ';'
const deleteCookie = (name) => document.cookie = name + '=; Max-Age=-1;';

Tipi di cookie

Session cookies (Cookie di sessione)

I cookie di sessione si riferiscono spesso a un tipo di cookie che esiste fino alla chiusura del browser. Per impostare un cookie di sessione è sufficiente NON specificare alcuna data di scadenza.

Ad esempio, puoi memorizzare il nome dell'utente nel cookie. Chi ha accesso al cookie avrà accesso al nome dell'utente. Dato che è nel cookie non abbiamo bisogno di aggiungerlo alle nostre richieste.

Session cookies è un'espressione confusionaria. I cookie di sessione si riferiscono anche ai cookie che utilizzi per gestire le sessioni. I cookie che vengono eliminati alla chiusura del browser non sono gli unici cookie che puoi utilizzare per la gestione della sessione.

Persistent cookie (Cookie persistente)

I cookie persistenti non vengono cancellati dal browser quando l'utente lo chiude. Questi cookie hanno una data di scadenza che puoi impostare nel tuo server. È possibile impostare un cookie in modo che scada tra un giorno o dieci anni.

Third-party cookie (Cookie di terze parti)

Possiamo distinguere i cookie che si trovano sullo stesso dominio dai cookie che provengono da fornitori di terze parti. L'esempio che abbiamo fornito in precedenza con Google Analytics è un esempio di un 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, devi impostare ';domain=thirdpartydomain.com'.

Cookie Max-Age vs Expire

I cookie sono generalmente 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 della 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:

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

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

// Expires after one day
const oneDayToSeconds = 24 * 60 * 60;
document.cookie =  'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';

Conclusione

In questo tutorial abbiamo spiegato cosa sono i cookie e come usarli con JavaScript.