JavaScript: Piškotki (angl. Cookies)

Piškotki so majhni podatki, ki jih spletno mesto shrani v brskalnik. Uporabljajo se za ohranjanje prijave, prepoznavanje seje, shranjevanje nastavitev in za druge primere, pri katerih mora spletna aplikacija med več zahtevki ohraniti določeno stanje. V JavaScriptu do piškotkov najpogosteje dostopamo z lastnostjo document.cookie.

Osnovna pravila

• Piškotek je sestavljen iz imena, vrednosti in morebitnih dodatnih atributov.
• V JavaScriptu piškotek nastavimo tako, da lastnosti document.cookie priredimo niz z opisom piškotka.
• Branje posameznega piškotka zahteva obdelavo niza, ki ga vrne document.cookie.
• Piškotek izbrišemo tako, da mu nastavimo pretekli datum veljavnosti ali max-age=0.
• JavaScript ne more dostopati do piškotkov, ki so označeni z atributom HttpOnly.

Primerjave

Piškotki in localStorage

Piškotki in localStorage omogočajo shranjevanje podatkov v brskalniku, vendar med njima obstajajo pomembne razlike. Piškotki so primerni predvsem takrat, ko mora podatke poznati tudi strežnik, medtem ko je localStorage namenjen predvsem shranjevanju podatkov, ki jih uporablja JavaScript v brskalniku.

expires in max-age

Atribut expires določa točen datum poteka piškotka, atribut max-age pa določa trajanje v sekundah. Pri sodobni rabi je pogosto pregledneje uporabiti max-age.

Atributi piškotkov

Pri sodobni uporabi piškotkov so pomembni predvsem atributi, ki vplivajo na obseg veljavnosti in na varnost.

Preverjanje podpore za piškotke

Pred uporabo piškotkov lahko preverimo, ali ima uporabnik v brskalniku omogočeno njihovo uporabo. Za to uporabimo lastnost navigator.cookieEnabled, ki vrne logično vrednost true ali false.

<p id="primer0"></p>
<script>
document.getElementById("primer0").innerHTML =
   "Piškotki so omogočeni: " + navigator.cookieEnabled;
</script>

Nastavljanje piškotka

Piškotek nastavimo tako, da lastnosti document.cookie priredimo niz. Ta niz vsebuje ime, vrednost in po potrebi še dodatne atribute.

<script>
function nastaviPiskotek() {
   document.cookie = "uporabnik=Ana; max-age=31536000; path=/; samesite=lax";
}
</script>

<input type="button" value="Nastavi piškotek" onclick="nastaviPiskotek()">

Branje piškotka

Lastnost document.cookie vrne niz, v katerem so zapisani vsi dostopni piškotki trenutne strani. Posamezno vrednost zato poiščemo z lastno funkcijo.

<p id="primer"></p>
<script>
function vrniPiskotek(ime) {
   var iskano = ime + "=";
   var deli = document.cookie.split(";");

   for (var i = 0; i < deli.length; i++) {
      var del = deli[i].trim();
      if (del.indexOf(iskano) == 0) {
         return decodeURIComponent(del.substring(iskano.length));
      }
   }
   return null;
}

document.getElementById("primer").innerHTML =
   "Vrednost piškotka uporabnik je: " + vrniPiskotek("uporabnik");
</script>

Brisanje piškotka

Piškotek izbrišemo tako, da mu nastavimo pretekel rok veljavnosti ali max-age=0. Pri tem moramo upoštevati tudi enak path, kot je bil uporabljen pri nastavitvi.

<script>
function izbrisiPiskotek() {
   document.cookie = "uporabnik=; max-age=0; path=/; samesite=lax";
}
</script>

<input type="button" value="Izbriši piškotek" onclick="izbrisiPiskotek()">

Primer uporabe

Primer, v katerem uporabnik vnese svoje ime, je zaradi preglednosti pripravljen na posebni strani. Prikaz primera v novem oknu brskalnika.

Priporočila

• Pri piškotkih jasno določi namen in shrani le toliko podatkov, kolikor jih aplikacija res potrebuje.
• Za običajne primere uporabi path=/, da je obseg veljavnosti piškotka jasen.
• Atribut samesite nastavi izrecno in ne računaj le na privzeto obnašanje brskalnika.
• Pri občutljivih piškotkih uporabi secure in spletno mesto ponujaj prek povezave HTTPS.
• Pred uporabo piškotkov lahko preveriš lastnost navigator.cookieEnabled.

Pogoste napake

• Piškotek se razume kot navadna spremenljivka, čeprav je dostop do njega vezan na lastnost document.cookie.
• Predpostavi se, da JavaScript lahko bere vse piškotke, čeprav do piškotkov z atributom HttpOnly nima dostopa.
• Pri brisanju piškotka se ne uporabi enak path, zaradi česar piškotek ostane veljaven.
• Atribut SameSite=None se uporabi brez atributa Secure, zato piškotek ne deluje pravilno v sodobnih brskalnikih.
• Podpora za piškotke se pred uporabo ne preveri, čeprav jo lahko preverimo z lastnostjo navigator.cookieEnabled.