Un'introduzione ai cookie

Potresti aver sentito parlare di cookie, ma cosa sono esattamente e cosa possiamo effettivamente fare con loro? In questo tutorial, ci concentreremo sulle basi dei cookie e impareremo le loro funzionalità in varie applicazioni web e ambienti del sito. Impareremo anche come utilizzarli nei nostri progetti PHP e JavaScript, prestando particolare attenzione ai problemi di sicurezza che potrebbero sorgere durante l'utilizzo. Dopo aver letto questo, avrai acquisito le competenze necessarie per implementare i cookie in sicurezza nelle tue applicazioni web.


Passo 1. Capire i cookie

Il primo passo del nostro viaggio è scoprire quali sono effettivamente questi cookie! Anche se hai già lavorato con loro, potresti comunque trovare questa parte abbastanza utile, quindi resta con me!

Astratto

Puoi facilmente pensare ai cookie come file di testo, che vengono salvati sul tuo computer. Su richiesta di un server web, il tuo browser crea tale file. Dopo ciò, il server Web può leggere e scrivere contenuti da e su questo file. Anche se questa sembra una caratteristica pericolosa - dopo tutto, a nessuno piacciono altre persone che scrivono file sul proprio computer, ci sono alcune restrizioni per rendere questo processo il più sicuro possibile.

  • I server Web possono accedere solo ai cookie impostati sul proprio dominio. Questo dominio viene impostato dal browser quando un nuovo cookie viene richiesto dal server Web e può essere solo il dominio o un sottodominio del server Web (il server Web può scegliere un sottodominio se lo desidera). Ciò significa che i cookie impostati da, ad esempio, google.com non possono essere letti da mozilla.com e viceversa.
  • Secondo il protocollo HTTP, i cookie non possono essere maggiori di 4096 byte (4KB) ciascuno.
  • C'è un limite al numero di cookie per dominio. Il numero è diverso per browser, tuttavia, il limite generalmente utilizzato è di venti cookie. Questo per evitare che un singolo dominio esegua il hogging dello spazio su disco del client.
  • C'è un limite al numero totale di cookie sul disco rigido del client. Questo numero differisce anche per browser, ma in genere è limitato a circa trecento cookie. Quando questo numero viene superato, un cookie precedente viene eliminato prima che ne venga creato uno nuovo.

I cookie hanno una data di scadenza. Questa data è impostata in modo che il browser possa cancellare i vecchi cookie quando non sono più necessari dal server web. Se la data di scadenza è vuota, il cookie verrà eliminato quando la connessione con il server viene chiusa. Ciò si verifica quando la finestra o la scheda del sito viene chiusa dall'utente o quando l'utente chiude l'intero browser. Questi cookie, a volte chiamati cookie di sessione, sono principalmente utilizzati per la memorizzazione di impostazioni temporanee.

Tecnico

Scopriamo come sono queste cose a livello tecnico. I cookie vengono trasferiti tramite il protocollo HTTP. Questo è il protocollo utilizzato dai browser per recuperare e inviare file al server. Dopo che un cookie è stato richiesto, viene inviato al server ogni volta che un nuovo elemento nella pagina web viene recuperato dal browser. Di seguito, possiamo vedere uno snippet di un server che richiede un nuovo cookie (questo frammento è una parte di una risposta HTTP).

 Set-Cookie: Name = content data; scade = Ven, 31-Dec-2010 23:59:59 GMT; percorso = /; domain = .example.net

Ora non aver paura, è tutto molto comprensibile!

  • Set-Cookie: è far sapere al browser che il server vorrebbe creare un nuovo cookie.
  • Nome è il nome del cookie. Ogni cookie in un dominio deve avere un nome diverso, quindi il browser può tenere separati tutti i cookie. Dopo il nome arriva il = dati di contenuto dove "dati di contenuto" sono i dati che devono essere contenuti nel cookie. Questi dati possono essere una stringa di testo o un numero e, come detto, possono avere dimensioni fino a 4KB.
  • scade = è il comando per la data di scadenza. La data di scadenza è nel formato "Wdy, DD-Mon-YYYY HH: MM: SS GMT" (Non chiedermi perché è stato definito questo formato ridicolo, perché non lo so neanche. Nessun utente vede mai il data di scadenza, quindi perché sprecare memoria, spazio su disco fisso e larghezza di banda su lunghe date?). Non ti preoccupare però, perché la maggior parte dei linguaggi di programmazione dispone di funzioni facili da utilizzare. Il browser elimina automaticamente i cookie con una data di scadenza nel passato.
  • Il dominio e sentiero richiedono una spiegazione più approfondita. Il dominio è il dominio in cui il cookie sarà attivo. Se il dominio è "ads.google.com", il cookie verrà inviato al server di quel dominio e, se il dominio è "google.com", il cookie verrà inviato a qualsiasi server di uno dei sottodomini di Google, incluso google.com stesso.
  • Il sentiero è il percorso del dominio a cui viene inviato il cookie. Ciò significa che, se il percorso è impostato su "/ images /," e il dominio è impostato su "ads.google.com", il cookie verrà inviato al server solo se il browser richiede un file da "ads.google" .com / images /'. Se il percorso è impostato su "/", il cookie verrà inviato al server indipendentemente dalla posizione del file richiesto sul server.

Nel prossimo passaggio, esamineremo come queste proprietà possono essere utilizzate nei linguaggi di programmazione.


Passaggio 2. Come creare e leggere i cookie

I cookie possono essere creati in molti modi, ma, per gli scopi di questo tutorial, ci concentreremo su PHP e JavaScript.

PHP

La cosa più importante da ricordare, quando crei un cookie in PHP, è che devi impostare tutti i cookie prima di inviare qualsiasi dato al browser. Questo significa che dovresti sempre inizializza nuovi cookie prima qualsiasi uscita. Ciò include i comandi echo () o print () e il comando o tag. Certo, ci sono alcune eccezioni, ma questa è una regola generale.

 ... // tutto il contenuto ecc. Va qui?>

Questo dovrebbe sembrare familiare, ad eccezione di $ garantire e $ HttpOnly. Il 'sicuro' è forzare il cookie a essere inviato solo se è stata stabilita una connessione HTTPS, se impostata su true, e dovrebbe normalmente essere impostata su false. 'Httponly' rende il cookie disponibile solo attraverso il protocollo HTTP, il che significa che i linguaggi lato client, come JavaScript e VBscript, non possono accedere al cookie. Questo aiuta a prevenire cose brutte, come Cross Site Scripting, e dovrebbe essere impostato su true se non si ha intenzione di modificare i cookie lato client con una lingua come JavaScript. Inoltre, per evitare equivoci, "httponly" non significa che i cookie non possono essere inviati su HTTPS, perché possono ancora, in effetti. Tuttavia, tieni presente che lo snippet precedente può essere reso abbastanza piccolo (e dovrebbe essere):

 

Grande! Ora possiamo creare i cookie, ma dobbiamo essere in grado di leggerli. Fortunatamente per noi, PHP rende questo molto facile una volta che un cookie è già stato creato. In PHP, esiste una variabile d'ambiente chiamata $ _COOKIE [], che può essere utilizzata per estrarre il valore del cookie. Per utilizzarlo basta inserire il nome del cookie all'interno delle parentesi [] in questo modo:

 

Questa variabile ambientale può essere utilizzata come qualsiasi altra. Proprio come $ _GET [] e $ _POST [], può essere trattato direttamente come una variabile normale (una volta che hai controllato se il cookie esiste effettivamente di corso) se vuoi.

Se si desidera modificare la data di scadenza, il percorso o il dominio, è necessario sovrascrivere un cookie esistente con setcookie () utilizzando lo stesso nome del cookie originale. Se si modifica la data di scadenza per essere nel passato (time () - 30 * 60 per esempio), il cookie verrà eliminato.

JavaScript

I cookie possono essere letti e scritti anche sul lato client. Anche se JavaScript non offre una buona soluzione per leggere e scrivere i cookie, è possibile e ampiamente utilizzato. JavaScript utilizza l'oggetto document.cookie per la manipolazione dei cookie, come mostrato nel seguente snippet:

 // get current date var expiredate = new Date (); // aumenta la data di 5 ore expiredate.setHours (expiredate.getHours () + 5); document.cookie = 'cookiename = cookievalue; expires = "+ expiredate.toUTCString () +" percorso = / esempio /; domain = test.envato.com ';

Come avrai notato, questa sintassi è abbastanza simile alla notazione del protocollo HTTP. Questo ha il vantaggio di essere più in controllo, ma introduce anche alcuni potenziali problemi. Di seguito è il snippet per leggere un cookie.

 var cookieName = 'testcookiename'; var textArray = document.cookie.split (';'); // metti tutte le parti della stringa in una matrice per (var i = 0; i < textArray.length; i++) // loop though all string pieces var textPiece = textArray[i]; //contains 1 string piece //filter beginning spaces while(textPiece(0)==") textPiece = textPiece.substring(1,textPiece.length); //if the textpiece contains our cookies name if (textPiece.indexOf(cookieName)== 0) //return whats after the cookies name return textPiece.substring(cookieName.length,c.length);  

Lo so, lo so; questo è un dolore. Fortunatamente per voi ragazzi, sto postando alcune funzioni pre-scritte qui sotto (potreste voler creare le vostre funzioni per scopi di apprendimento, e dovreste farlo!).

 function writeCookie (cookieName, cookieValue, expireHours, path, domain) var date = new Date (); date.setHours (date.getHours + expireHours); document.cookie = cookieName + '=' + cookieValue + '; scade = "+ data +"; percorso = "+ percorso +"; domain = "+ domain; funzione readCookie (cookieName) var textArray = document.cookie.split ("; '); per (var i = 0; i < textArray.length; i++) var textPiece = textArray[i]; while(textPiece(0)==") textPiece = textPiece.substring(1,textPiece.length); if (textPiece.indexOf(cookieName)== 0) return textPiece.substring(cookieName.length,c.length);  

Tieni presente che questi snippet non contengono alcun controllo degli errori.


Passaggio 3. Cosa fare con i cookie

Lo sapevate? -
I cookie sono stati inventati da Netscape, che voleva usarli per creare un carrello della spesa per un negozio online. Grazie ai cookie le persone sono state in grado di conservare gli oggetti nel carrello, anche dopo essere stati disconnessi dal negozio.

Oggigiorno, usiamo i cookie per quasi tutti gli scopi a cui puoi pensare. Puoi usarli per salvare le impostazioni dell'utente come nome, lingua, posizione o dimensioni dello schermo. Ciò può migliorare la qualità del servizio che si desidera fornire per un cliente, poiché è possibile ottimizzare il servizio per un cliente e ricordare questa ottimizzazione in futuro. Ad esempio, potresti salvare la lingua preferita del cliente su un cookie e, successivamente, mostrare il contenuto del tuo sito nella lingua preferita ogni volta che il client visita il tuo sito.

Certo, ci sono molte altre cose divertenti da fare con i cookie di questo! Nel prossimo passaggio, ti mostrerò un esempio di un frammento di codice interessante.


Passaggio 4. Scrittura di materiale interessante

Finalmente! Ora possiamo iniziare a scrivere un codice fantastico! Di seguito è riportato uno snippet bonus, che utilizza i cookie per creare un meccanismo di relogin.

Snippet di accesso "Ricordami"

Prima di iniziare, questo snippet contiene un codice MySQL. Se non hai familiarità con MySQL, non farti prendere dal panico. Anche se questo frammento di codice è un po 'difficile, dovrebbe essere comprensibile con un po' di conoscenza base di PHP e cookie.

Per creare un'implementazione "ricordami", dobbiamo avere alcune cose. In primo luogo, abbiamo bisogno di una tabella di database contenente un nome utente, una password e un campo di identificazione. In secondo luogo, abbiamo bisogno di una stringa o di un numero univoco per identificare i client in modo sicuro attraverso i cookie (questa è l'identificazione nella tabella del database). In questo frammento, utilizzeremo un digest SHA-1, che è solo una stringa, come identificatore. Se usato correttamente, garantisce un'eccellente sicurezza.

La maggior parte delle persone inserisce semplicemente un nome utente e una password nel cookie e lo invia automaticamente al server. Questo dovrebbe essere evitato in ogni momento! I cookie vengono generalmente inviati attraverso una connessione non sicura, quindi il contenuto potrebbe essere facilmente visto da eventuali potenziali aggressori.

 nome utente; // qui dovresti impostare un nuovo digest per il prossimo relogin usando il codice sopra! echo 'Accesso effettuato con successo'. $ username;  else // digest non esisteva (o sono stati trovati più degli stessi digest, ma non succederà) echo "non è riuscito ad accedere!"; ?>

Usando un digest come abbiamo fatto, le possibilità di ottenere due dello stesso digest sono minime. Un digest è una stringa di quaranta caratteri, che, in teoria, dovrebbe sempre fornire un'uscita casuale completa se l'input è cambiato. In pratica, è necessario aggiungere un limite di tempo nel codice serveride, in modo che il digest non sia valido dopo X minuti. Questo impedisce agli aggressori di copiare i cookie di qualcuno e utilizzarli per accedere.


Passaggio 5. Best practice

Abbiamo quasi raggiunto la fine di questo tutorial. Per concludere vorrei riassumere alcune buone pratiche:

  • Non inserire mai dati sensibili in un cookie. Un cliente potrebbe navigare su un computer pubblico, quindi non lasciare alcuna informazione personale.
  • Mai fidarsi dei dati provenienti dai cookie. Filtra sempre le stringhe e i numeri! Un utente malintenzionato può scrivere dati dannosi sul cookie per fare qualcosa che tu non vuoi che il tuo servizio faccia.
  • Prova a stimare per quanto tempo il cookie deve essere valido e imposta la data di scadenza di conseguenza. Non vuoi inciampare sul computer del cliente con vecchi cookie che scadono in cento anni.
  • Impostare sempre la sicurezza e httponly per soddisfare le richieste della propria applicazione. Se la tua applicazione non modifica i cookie con JavaScript, abilita httponly. Se hai sempre una connessione HTTPS, abilita la sicurezza. Ciò migliora l'integrità e la riservatezza dei dati.

Conclusione

Spero che tu abbia imparato un po 'dal tutorial di Nettuts + di oggi. Se avete domande, sentitevi liberi di lasciare un commento o salutate su Twitter.