Cookies

Från Webbling
Hoppa till: navigering, sök

Det klassiska sättet att spara data i en webbläsare är genom att använda cookies. Dessa är data som skickas mellan server och klient. De cookies som finns lagrade och som gäller för den sida som webbklienten ska begära, skickas med i HTTP-förfrågan till servern. Webbservern i sig kan skapa nya cookies eller uppdatera värden för gamla cookies. Denna cookie-information skicka med i HTTP-svaret till klienten. På så vis kan vi spara undan information mellan anrop till webbservern, trots att HTTP i sig är ”stateless”.

Cookies lagras på den dator där webbklienten körs. De skapas antingen genom att webbservern skickar med ett ”Set-Cookie”-direktiv i sitt svar eller genom att de skapas på klienten via JavaScript-kod. Det finns lite olika varianter av cookies, beroende på vilka attribut som angavs när de skapades.

Cookie-typer

I grund och botten har vi två olika typer av cookies. Vi har sessions-cookies och beständiga/lagrade-cookies.

Session-cookies

Om man inte anger hur länge en cookie ska existera, kommer den att bli en sessions-cookie. Dessa rensas bort när användaren stänger sin webbläsare. De existerar alltså enbart temporärt. De är visserligen lagrade på användarens dator, men det går inte att lita på att de kommer att existera för all framtid.

I denna typ av cookies lagrar vi bara temporär information. Sådant som behövs för att köra vår webbapp, men som inte är av betydelse ifrån en körning till annan.

Det är oftast inte en bra idé att ha information som handlar om själva inloggningen till webbappen i denna typ av cookie. I dylika fall vill vi oftast att användaren ska loggas ut om denna varit inaktiv under en viss period. Då passar det bättre att använda sig av en beständig/lagrad cookie.

Beständiga/lagrade coookies

Namnet beständig kan vara lite missvisande (fritt ifrån engelskans ”persistent”). Vad som avses är att cookien lagras och hålls kvar även när användaren slår av sin webbläsare. Den kommer alltså att finnas kvar när användaren startar sin webbläsare nästa gång och cookien finns då tillgängliga för att användas igen.

För att skapa en beständig cookie sätter vi ett bäst-före-datum på cookien. Detta anger hur länge cookien ska vara aktuell. Så fort denna tidpunkt har passerats kommer cookien att tas bort. Att cookien har en ”livstid” är alltså detta som gör benämningen ”beständig” något motsägelsefull.

En cookies anatomi

Cookies har minst två komponenter; ett namn och ett värde. Förutom dessa komponenter, kan man även ange ett antal attribut. Om man inte anger ett enda attribut, så skapar man en sessions-cookie (då den inte får något bäst-före-datum).

Följande attribut är tillgängliga

Expires

Med detta attribut anger man cookiens bäst-före-datum eller dess livstid. När denna tidpunkt har passerats kommer cookien att tas bort. Tidpunkten anges på formatet; Veckodag, Dag Månad År Timme:Minut:Sekund GMT. Där man förstås anger varje del med engelska benämningar. Lägg märke till att tiden ska vara angiven i Greenwhich Mean Time och att man inte kan skicka med en datumsträng som är formaterad enligt lokalt tidsformat - såsom svenska.

Ett exempel på ett värde till expires skulle kunna vara; Mon, 29-Feb-2016 13:37:42 GMT.

Max-Age

Vi kan även ange livstid/bäste-före-datum genom att ange hur många sekunder efter det att cookien mottogs som den ska upphöra att gälla.

Sätter man dess värde till 0, kommer cookien att tas bort direkt.

Path

Den absoluta sökvägen på nuvarande server för vilken denna cookie gäller. Om inget anges så kommer det att vara sökvägen till den webbsida ifrån vilken cookien sattes.

Domain

Anger för vilken domän/underdomän som denna cookie gäller. Om inget anges så sätts detta till domän-delen som gäller för sidan som satte cookien. I detta fall kommer inte eventuella underdomäner att vara giltiga. Om man anger en domän, så kommer eventuella underdomäner att vara giltiga.

Secure

Anger att cookien enbart ska levereras i webbanrop som sker över säkra protokoll, såsom t.ex. HTTPS.

Att skapa en cookie i JavaScript

Vi sätter cookies genom att tilldela ett värde till document.cookie. Ett exempel på detta:

document.cookie = "kaka=söker maka";

Ovanstående skulle lägga till en cookie med namnet kaka och tilldela den värdet ”söker maka”. Den skulle bli en sessioncookie, då vi inte angav något bäst-före-datum.

Ett annat exempel:

document.cookie = "monster=cookie monster; max-age=3600";
document.cookie = "banan=frukt; expires=Mon, 29-Feb-2016 13:37:42 GMT";

Ovanstående kommer att skapa två cookies. Man skriver alltså inte över tidigare cookies när man tilldelar ett nytt värde till document.cookie, utan man lägger enbart till ännu en cookie. Det vill säga om man inte anger samma namn på en cookie som tidigare fanns, i det fallet skriver man över befintlig cookie.

Den första cookien, monster, kommer alltså att gälla i en timme. Därefter tas den bort.

Den andra cookien, kommer att försvinna när angiven tidpunkt passerats. Om denna tidpunkt redan passerats så tas cookien bort direkt. Det är på så vis man tar bort cookies, man anger deras namn och sätter ett passerat bäst-före-datum.

Eftersom vissa tecken har speciell betydelse i cookie-strängen, så måste man i många fall koda om det värde man sätter en cookie till. Ett exempel på det är tecknet ";" som ju används för att åtskilja cookies.

Det kan vara bra att köra encodeURIComponent() på den sträng man ska skicka in. Då måste man komma ihåg att köra decodeURIComponent() på strängen man får tillbaka när man läser ut värdet.

Detta blir speciellt viktigt om man ska spara undan någon typ av data som man inte har full kontroll över. Det kan t.ex. vara att man tar in ett värde som användaren skrivit in. Då måste man se till att koda om strängen, så att inte det finns något konstigt i den. Det kan bli applikationsfel annars och det är en möjlig säkerhetslucka.

Att läsa cookies via JavaScript

Man kommer åt de cookies som för tillfället är giltiga/åtkomliga genom att läsa ut document.cookie. Detta är en sträng som innehåller alla cookies på rad. Varje cookie är avskild ifrån de andra genom ett ”;”-tecken. Om vi hade lagt till de exempel cookies som angavs tidigare, så skulle cookie-strängen kunna tänkas se ut så här:

kaka=söker maka; monster=cookie monster; banan=frukt

Vi måste alltså på något vis dela upp denna sträng för att komma åt individuella cookies. Det finns flera plugins som kan göra detta åt en. Men en enkel variant skulle kunna se ut så här:

See the Pen obVzQv by Patrik Grip-Jansson (@PGJ) on CodePen.

Kanske inte optimal kod, men det är funktionsdugligt.

Skamfilat rykte

Cookies har lite dåligt rykte. Till viss del är dock detta något oförtjänt. Vilken webbsajt som helst kan inte gå in och läsa alla cookies i din webbläsare. Det går bara att komma åt de cookies som har levererats ifrån en specifik domän. Men om en sajt har innehåll som tillhandahålls av många olika webbservrar, t.ex. reklam, finns förstås möjligheten att spåra hur man förflyttar sig ifrån sajt till sajt. Om en cookie serverats ifrån en reklamserver, så kommer reklamservern att kunna komma åt eventuella cookies som gäller för deras serverdomän oavsett på vilken sajt reklamen visas. Så om du ser en reklamsnutt på Aftonbladet och sedan ser samma reklamsnutt på Expressen, så finns chansen att reklammakaren skulle kunna spåra att du varit inne på såväl Aftonbladet som Expressen.

På grund av möjligheten att använda cookies för tvivelaktiga syften, så har EU infört en lag som slår fast hur man får använda sig av cookies. Man måste alltid göra användaren medveten om att ens sajt använder cookies och ge användaren möjligheten att undvika dessa. I sin enklaste form visar en sajt att cookies används, frågar om det är OK och om det inte är det så kan användaren inte använda sajten till fullo.

Dock finns det många fler tekniker för att spåra användare på webben. Så cookies är långt ifrån den enda teknik som kan användas på ett ”farligt” vis.

Kom ihåg att du måste upplysa dina användare om att du kör med cookies på din sajt. Du måste även ge dem en möjlighet att neka till att det skickas cookies till dem!

Kom ihåg att vissa plugins och liknande använder cookies, så din sajt kanske använder cookies utan att du vet om det...

Nästa aktivitet

Web Storage