Cookies. Tecnologie - Classe Quarta cookies

Transcript

1 Cookies Rev Digitale 1.3 del 06/12/2018 Il protocollo HTTP è un protocollo stateless, ovvero dopo ogni richiesta di una pagina da parte del browser, il server dimentica l identità del mittente. La soluzione a questo problema consiste nell utilizzo dei, ovvero dei biscotti che il server può intingere nel client per salvare piccole informazioni. Il meccanismo dei consente ad un browser di memorizzare piccole parti di informazioni sul computer client in modo che possano poi essere riutilizzate per le richieste successive. Questo meccanismo permette di distinguere i diversi client che consultano la stessa pagina web. Sulla base dei ricevuti, il server è in grado di riconoscere un browser che ha già inviato richieste precedenti. Notare che questo meccanismo, da solo, non è sufficiente per identificare l utente. Lo stesso utente potrebbe infatti collegarsi oggi da una certa postazione domani da una postazione differente. Il cookie viene normalmente creato dal server, che deve inserirlo manualmente all interno dell intestazione della http response ed inviarlo al client insieme alla pagina richiesta. Il client, ricevuta la pagina, provvede automaticamente a leggere il cookie e a memorizzarlo all interno dell oggetto document.cookie, suddividendoli per dominio. Quando poi il browser richiede una nuova pagina (o un servizio ajax) al server di quel dominio, provvede automaticamente ad inviare al server tutti i relativi a quel dominio, inserendoli all interno della header della http request. Il server dovrà andarli a leggere manualmente. Lettura e scrittura dei lato server devono sempre essere eseguiti manualmente, cioè tramite apposite istruzioni. Tecnicamente un cookie consiste in un collezione di variabili in formato chiave valore ed è caratterizzato da un tempo di vita (impostato al momento della creazione ed eventualmente aggiornato in corrispondenza di successive richieste) che indica il tempo di vita del cookie sul computer client. Se non si assegna una scadenza al cookie (oppure si assegna expire=0) il cookie viene mantenuto nella memoria del browser per l intera sessione corrente, ma viene rimosso in corrispondenza della chiusura del browser stesso. Se si assegna invece una specifica scadenza, il browser, in corrispondenza della chiusura, provvede a salvare il cookie su disco. Quando viene riaperto, il browser provvede automaticamente a leggere tutti i cookie validi memorizzati sul file (rimuovendo automaticamente quelli scaduti) inviandoli al Server in tutte le successive richieste. Gestione dei Cookies lato client con Java Script In javascript lato client i vengono memorizzati all interno dell oggetto document.cookie in un formato che sembra essere una normale stringa, ma che in realtà non è così. Anche impostando tutti i vari campi del cookie (scadenza, dominio, path), quando si va a leggere il cookie si vedono soltanto il name ed il value del cookie separati da un uguale. Creazione di un cookie lato client Il cookie viene normalmente creato dal server ma può essere creato anche dal client andando a scrivere direttamente all interno di document.cookie document.cookie = cookie1=valore1 document.cookie = cookie2=valore2 Ogni volta che si crea un nuovo cookie andando a scrivere all interno di document.cookie, il nuovo cookie non sovrascrive i precedenti, ma viene concatenato all interno della stringa dei relativi al dominio corrente, utilizzando come separatore ;. Dunque nel caso di multipli la stringa che sarà visibile in lettura sarà la seguente: cookie1=valore1; cookie2=valore2 pag 1

2 La sintassi completa per la scrittura di un cookie è la seguente: document.cookie = nomecookie=valorecookie [; expires=datagmt] [;path=nomepercorso] [;dominio=nomedominio] valorecookie = Se contiene degli spazi, occorre filtrarlo mediante la funzione escape(s) expire = scadenza del cookie [default=0] Può essere espressa in due formati diversi: come data in formato UTC (dal 1/1/70). Esempio var date = new Date(); // crea un oggetto Date con la data corrente var msec = date.gettime() + 365*24*60*60*1000; date.settime(msec); document.cookie = nome=fred; expires= + date.toutcstring() Come offset (espresso in secondi) da aggiungere al timestamp corrente: var maxage = 60*60*24*3; // 3gg document.cookie = nome=fred; max-age=" + maxage; dominio = dominio / sottodominio di validità del cookie. vallauri.edu indica che il cookie è valido per l intero dominio vallauri.edu e per tutti i suoi sottodomini (es didattica.vallauri.edu). Cioè il browser ritornerà il cookie al server solo se la risorsa richiesta appartiene al sottodominio indicato [default=intero dominio della pagina corrente] path = percorso di validità del cookie. Cioè il browser ritornerà il cookie al server solo se la risorsa richiesta soddisfa il path medesimo. Nel path sono incluse anche tutte le sottocartelle. / significa intero dominio. /docs significa che il cookie dovrà essere ritornato dal browser soltanto per quelle richieste che riguardano la sottorisorsa /docs e tutte le se sue sottorisorse. [default = /] Questi ultimi due parametri vengono in genere affidati alla gestione predefinita del browser che, al momento della creazione del cookie, provvede automaticamente a settarli e poi a scriverli su disco Lettura di un cookie lato client Anche se normalmente non serve farlo (perché la gestione è automatica), lato client è comunque possibile andare a leggere direttamente l oggetto document.cookie il quale restituisce una stringa contenente tutte le coppie nome / valore memorizzate nel browser (relativamente al dominio corrente) e suddivise da punto e virgola seguito da spazio Per recuperare le singole informazioni si può utilizzare il seguente codice function leggicookie(key){ var valorecookie = ; if(document.cookie){ var = document.cookie.split("; "); for (var i=0; i<.length; i++){ let cookie = [i].split("="); if (cookie[0]==key){ valorecookie = cookie[1]; break; return valorecookie; Cancellazione di un cookie Per cancellare un cookie è sufficiente impostare una data di scadenza antecedente a quella corrente pag 2

3 HTTP Headers I vengono trasmessi come normali intestazioni http inserite sia nelle HTTP Request che nelle HTTP Response. LATO SERVER (nodejs) Scrittura degli headers sull oggetto HTTP Response I metodi preposti per leggere / scrivere le header dell oggetto response sono rispettivamente.getheaders().getheadernames().hasheader(name).getheader(name).setheader(name, value).removeheader(name) La header preposta alla scrittura dei sull oggetto Response si chiama set- Esempi: response.setheader('authorization', token); response.setheader('set-cookie', "token="+token) Scansione delle response header: var headers= response.getheaders(); for(let key in headers){ console.log(key + " -> " + headers[key] ) Esempio di visualizzazione: set-cookie -> token=eyjhbgcioijiuzi1niisinr5cci6ikpxvcj9 Lettura degli headers dall oggetto HTTP Request I metodi preposti per leggere / scrivere le header dell oggetto request sono rispettivamente.headers property contenente l elenco delle headers.getheader(name).setheader(name, value).removeheader(name) La header preposta alla lettura dei dall oggetto Request si chiama semplicemente cookie Esempi: if(request.headers && request.headers.authorization){ var token=request.headers.authorization; var token=request.headers.cookie; Scansione delle request header: var headers= request.headers; for(let key in headers){ console.log(key + " -> " + headers[key] ) pag 3

4 Esempio di visualizzazione degli headers di una http request: host -> localhost:1337 connection -> keep-alive pragma -> no-cache cache-control -> no-cache accept -> application/json, text/javascript, */*; q=0.01 x-requested-with -> XMLHttpRequest user-agent -> Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/ (KHTML, like Gecko) Chrome/ Safari/ content-type -> application/json; charset=utf-8 referer -> accept-encoding -> gzip, deflate, br accept-language -> it-it,it;q=0.9,en-us;q=0.8,en;q=0.7 cookie -> token=eyjhbgcioijiuzi1niisinr5cci6ikpxvcj9 Visualizzazione degli headers sull inspector di Chorme Finestra Network / Pulsantino All. Selezionare nell elenco inferiore il nome della richiesta che si intende analizzare Lettura / Scrittura dei Riassumendo quanto già scritto sopra: Lettura Il server, ricevuta una richiesta http (richiesta di pagina html oppure richiesta ajax), può andare a leggere gli eventuali all interno di request.headers.cookie che è una collezione del tutto analoga a document.cookie disponibile lato client. La procedura di lettura di un singolo cookie è la stessa utilizzata lato client sostituendo document.cookie con request.headers.cookie Scrittura Il server può andare a scrivere una cookie per volta direttamente all interno dell intestazione http dell oggetto response, prima di inviare la risposta al client. let sec=60*60*24*7; // 7 gg response.setheader("set-cookie", "cookie1=valore1;max-age="+sec); response.setheader("set-cookie", "cookie2=valore2;max-age="+sec); LATO Client Mentre la lettura / scrittura dei viene fatta in automatico dal browser, la lettura / scrittura di un normale HTTP Header deve essere eseguita manualmente dal programma nel modo seguente: Scrittura Lato client il metodo javascript preposto alla scrittura degli headers sull oggetto Request si chiama setrequestheader. Nel caso di chiamata Ajax, gli eventuali headers possono essere scritti dal client sull oggetto Request direttamente all interno di $.ajax beforesend: function(request) { let token = leggicookie("token") if (token!= "") request.setrequestheader("authorization", token);, pag 4

5 Lettura Il metodo client preposto alla lettura degli headers ritornati dal server si chiama getresponseheader request.done(function(data, textstatus, request){ var token = request.getresponseheader('authorization') let date = new Date(); let msec = date.gettime() *60*60*24*7; //7gg date.settime(msec); document.cookie="token="+token+";expires="+date +";" ); Gestione dei nelle chiamate Ajax Riguardo ai, anche nel caso di chiamate ajax il server può aggiungere eventuali all interno dell intestazione http esattamente come visto in precedenza. Però in questo caso, per ragioni di sicurezza, i non sono accessibili in java script ma sono accessibili soltanto dal browser. Vengono settati lato server con un path differente rispetto al path=/ impostato di default nei di pagina. Probabilmente viene usato il path della risorsa richiesta, ma questa informazione non è accessibile da javascript e nemmeno sembra possibile visualizzarla nell inspector di Chrome Pertanto i ricevuti tramite una Ajax response NON vengono copiati all interno di document.cookie, ma vengono gestiti automaticamente dal browser in modo del tutto trasparente, rimanda automaticamente al server in corrispondenza della prossima chiamata. Se però un browser invia al server sia richieste di pagine html, sia richieste ajax, nasce un problema: quando il server invia al client tramite ajax un cookie aggiornato, questo cookie, come detto sopra, non viene salvato dal browser all interno di document.cookie, ma viene memorizzato in un path differente probabilmente più specifico. Quando poi il browser invierà una richiesta ajax al server invierà al server sia i relativi al documento (quelli memorizzati all interno di document.cookie), sia quelli relativi ai servizi ajax per cui se entrambi hanno un cookie chiamato token, il client ne invierà due creando confusione lato server. Notare che: Le richieste relative alle pagine inviano solo i relativi alle pagine, (quelli memorizzati dentro document.cookie) e non inviano quelli più specifici relativi alle risorse ajax Le richieste ajax inviano invece sia i con path più specifico relativi ad ajax (che vengono inviati per primi), sia i relativi al sito (memorizzati all interno di document.cookie)che avendo path=/ vengono ugualmente spediti (in coda a quelli precedenti). Il server dovrebbe utilizzare sempre il cookie più aggiornato. In corrispondenza della prima chiamata ajax quello più aggiornato è quello di pagina appena caricata, mentre in corrispondenza del refresh pagina (dopo aver utilizzato dei servizi) quello più aggiornato è quello relativo all ultima chiamata ajax. La possibili soluzioni sono 2: 1) Lato server trasmettere i di pagina all interno degli headers set-cookie e cookie, e trasmettere invece i ajax all interno dell header authorization. Tutti i ricevuti dal server tramite authorization devono essere salvati localmente all interno di document.cookie in modo da poter essere utilizzati anche nelle eventuali successive richieste di pagine Tutte le richieste ajax, prima di essere inviate al server, dovranno andare a leggere il cookie all interno di document.cookie in modo che, se l ultima richiesta era stata una richiesta di pagina, venga inviato il cookie aggiornato 2) Lato server, in corrispondenza della risposta alla chiamata ajax, impostare sul cookie il campo Path=/ (da impostare per sicurezza anche sul cookie di pagina) in modo che i due abbiano lo stesso Path ed il browser provveda a sovrascrivere il cookie di pagina con il cookie ajax pag 5

6 Gestione dei Cookies lato server con PHP Creazione e invio di un cookie dal server al client setcookie($name, $value, $expire, $path, $domain, $secure, $httponly); Solo il primo parametro è obbligatorio. Gli altri sono tutti facoltativi. La funzione ritorna false in caso di errore, true in caso di ok, che comunque non significa che il client accetterà il cookie. Esempio: $name = user ; $value = pippo ; $expire = time() + (86400 * 30); // 30 giorni. $path = / ; = 60*60*24 = 1 giorno $name = nome del cookie $value = valore [default=undefined] $expire = scadenza del cookie espressa come data di scadenza (in secondi dal 1/1/70) [default=0] $path e $dominio = sono gli stessi già discussi in precedenza $secure = true / false, true indica che il cookie verrà trasmesso SOLO su connessioni https $httponly = true / false, true indica che il cookie sarà accessibile SOLO attraverso i protocolli http / https e quindi non da javascript. Migliora la sicurezza Lettura dei ritornati dal client: Il vettore $_COOKIE Lato PHP i inviati dal client al server sono accessibili all interno del vettore associativo $_COOKIE, al quale si può accedere tramite la solita sintassi dei vettori associativi: if(isset($_cookie[$cookie_name])) echo "The value of cookie '$cookie_name' is". $_COOKIE[$cookie_name]; else echo "Cookie '$cookie_name' is not set!"; Modifica di un Cookie: E sufficiente riscriverlo utilizzando lo stesso name: setcookie("color", "red"); setcookie("color", "blue"); Cancellazione di un Cookie sul server unset($_cookie["mycookie"]); // or setcookie("mycookie", "myvalue", time()-1); Cookie Vettoriali E anche possibile creare vettoriali aggiungendo semplicemente [ ] dopo il nome del cookie. setcookie("vetcookie[]", "[pippo, pluto, minnie]", time()+60, "/"); if(isset($_cookie["vetcookie"])) echo "The value of cookie is ". implode(" ", $_COOKIE["vetCookie"]); In alternativa è possibile assegnare al cookie singolo un json serializzato. pag 6