Cookies, document.cookie

Cookies (někdy „sušenky“) jsou malé datové řetězce, které jsou uloženy přímo v prohlížeči. Jsou součástí protokolu HTTP a jsou definovány ve specifikaci RFC 6265.

Cookies obvykle nastavuje webový server v HTTP hlavičce odpovÄ›di Set-Cookie. Pak je prohlížeč automaticky pÅ™idává do (téměř) každého požadavku na stejnou doménu do HTTP hlavičky Cookie.

Jedním z nejrozšířenějších případů jejich použití je autentifikace:

1. Po pÅ™ihlášení server poÅ¡le v odpovÄ›di HTTP hlavičku Set-Cookie, v níž nastaví cookie s „unikátním identifikátorem pÅ™ihlášení“.
2. Když bude příštÄ› poslán požadavek na stejnou doménu, prohlížeč poÅ¡le po síti tuto cookie v HTTP hlavičce Cookie.
3. Tak se server dozví, kdo učinil požadavek.

Ke cookies můžeme pÅ™istupovat i z prohlížeče, a to pomocí vlastnosti document.cookie.

Cookies a jejich atributy s sebou přinášejí mnoho záludností. V této kapitole je podrobně probereme.

Načítání z document.cookie

Ukládá si váš prohlížeč nějaké cookies z tohoto sídla? Podívejme se:

// Na javascript.info používáme Google Analytics pro statistiku,
// takže by tam nějaké cookies měly být
alert( document.cookie ); // cookie1=hodnota1; cookie2=hodnota2;...

Hodnota document.cookie se skládá z dvojic název=hodnota, oddÄ›lených ;. Každá z nich pÅ™edstavuje samostatnou cookie.

Chceme-li najít konkrétní cookie, můžeme rozdÄ›lit document.cookie podle ; a pak najít správný název. Můžeme k tomu použít regulární výraz nebo funkce polí.

Ponecháváme to čtenáři jako cvičení. Na konci této kapitoly najdete několik pomocných funkcí, které vám pomohou manipulovat s cookies.

Zápis do document.cookie

Do document.cookie můžeme zapisovat. Není to vÅ¡ak datová vlastnost, nýbrž přístupová vlastnost (getter/setter). PÅ™iÅ™azení do ní se zpracovává speciálním způsobem.

Operace zápisu do document.cookie zmÄ›ní jen cookie, která je v ní uvedena, a ostatní cookies ponechá nezmÄ›nÄ›né.

Například následující volání nastaví cookie s názvem uživatel a hodnotou Jan:

document.cookie = "uživatel=Jan"; // změní jen cookie s názvem 'uživatel'
alert(document.cookie); // zobrazí všechny cookies

Když si jej spustíte, uvidíte pravdÄ›podobnÄ› nÄ›kolik cookies. Je to tím, že operace document.cookie= nepÅ™epíše vÅ¡echny cookies, ale jen nastaví uvedenou cookie uživatel.

Technicky mohou název a hodnota obsahovat jakékoli znaky. Aby bylo zachováno platné formátování, mÄ›ly by být zakódovány vestavÄ›nou funkcí encodeURIComponent:

// speciální znaky (mezery) musejí být zakódovány
let název = "muj nazev";
let hodnota = "Jan Novak";

// zakóduje cookie jako muj%20nazev=Jan%20Novak
document.cookie = encodeURIComponent(název) + '=' + encodeURIComponent(hodnota);

alert(document.cookie); // ...; muj%20nazev=Jan%20Novak

Cookies mají několik atributů. Mnoho z nich je důležitých a měli bychom je nastavit.

Atributy jsou vyjmenovány po klíč=hodnota a jsou oddÄ›leny ;, například:

document.cookie = "uživatel=Jan; path=/; expires=Tue, 19 Jan 2038 03:14:07 GMT"

domain

• domain=site.com

Atribut domain definuje, kde je cookie dostupná. V praxi vÅ¡ak existují určitá omezení a nemůžeme nastavit jakoukoli doménu.

Není žádný způsob, jak učinit cookie dostupnou z jiné domény druhého řádu, takže other.com nikdy nezíská cookie nastavenou na site.com.

To je bezpečnostní omezení, které nám umožňuje ukládat do cookies důvěrná data, která by měla být dostupná jen na jednom sídle.

Standardně je cookie dostupná jen na doméně, která ji nastavila.

Prosíme vÅ¡imnÄ›te si, že standardnÄ› není cookie sdílena se subdoménou, například forum.site.com.

// pokud nastavíme cookie na webovém sídle site.com...
document.cookie = "uživatel=Jan"

// ...neuvidíme ji na forum.site.com
alert(document.cookie); // uživatel není

…To vÅ¡ak můžeme zmÄ›nit. Jestliže chceme umožnit subdoménám jako forum.site.com získávat cookie nastavenou na site.com, můžeme to provést.

Aby k tomu doÅ¡lo, mÄ›li bychom pÅ™i nastavování cookie na site.com explicitnÄ› nastavit atribut domain na koÅ™enovou doménu: domain=site.com. Pak tuto cookie uvidí vÅ¡echny subdomény.

Příklad:

// na site.com
// zpřístupníme tuto cookie na jakékoli subdoméně *.site.com:
document.cookie = "uživatel=Jan; domain=site.com"

// později

// na forum.site.com
alert(document.cookie); // obsahuje cookie uživatel=Jan

Když to shrneme, atribut domain umožňuje zpřístupnit cookie na subdoménách.

path

• path=/mypath

Prefix URL cesty musí být absolutní. Tento atribut zpřístupňuje cookie stránkám pod touto cestou. Standardně je to aktuální cesta.

Pokud je cookie nastavena s atributem path=/admin, bude viditelná na stránkách /admin a /admin/something, ale ne na /home, /home/admin nebo /.

Obvykle bychom mÄ›li nastavit path na koÅ™enový adresář: path=/, aby byla cookie dostupná ze vÅ¡ech stránek na tomto sídle. Pokud tento atribut není nastaven, je standardnÄ› vypočítáván touto metodou.

expires, max-age

Standardně, jestliže cookie neobsahuje jeden z těchto atributů, zmizí při zavření prohlížeče nebo záložky. Takové cookies se nazývají „session cookies“.

Aby cookies zůstala naživu i po zavÅ™ení prohlížeče, můžeme nastavit atribut expires nebo max-age. Pokud nastavíme oba, má pÅ™ednost max-age.

• expires=Tue, 19 Jan 2038 03:14:07 GMT

Datum expirace cookie definuje čas, kdy ji prohlížeč automaticky smaže (podle časového pásma prohlížeče).

Datum musí být pÅ™esnÄ› v tomto formátu v časovém pásmu GMT (Greenwichský stÅ™ední čas). Můžeme jej získat metodou datum.toUTCString. Například můžeme nastavit cookie, aby expirovala za 1 den:

// +1 den od nynějška
let datum = new Date(Date.now() + 86400e3);
datum = datum.toUTCString();
document.cookie = "uživatel=Jan; expires=" + datum;

Pokud nastavíme expires na datum v minulosti, bude cookie smazána.

• max-age=3600

Tento atribut je alternativou k expires a specifikuje expiraci cookie v sekundách od tohoto okamžiku.

Pokud jej nastavíme na nulu nebo zápornou hodnotu, cookie bude smazána:

// cookie bude odstraněna za +1 hodinu od nynějška
document.cookie = "uživatel=Jan; max-age=3600";

// smažeme cookie (necháme ji expirovat právě teď)
document.cookie = "uživatel=Jan; max-age=0";

secure

• secure

Tato cookie může být přenesena pouze v HTTPS.

StandardnÄ›, jestliže nastavíme cookie na http://site.com, objeví se i na https://site.com a naopak.

Je to proto, že cookies jsou založeny na doméně a nerozlišují mezi protokoly.

S tímto atributem platí, že jestliže je cookie nastavena na https://site.com, neobjeví se pÅ™i přístupu na stejné sídlo pÅ™es HTTP jako http://site.com. Má-li tedy cookie citlivý obsah, který by nikdy nemÄ›l být odeslán pÅ™es nezaÅ¡ifrovaný HTTP, je pÅ™epínač secure ta správná vÄ›c.

// předpokládáme, že nyní jsme na https://
// nastavíme cookie jako bezpečnou (dostupnou jen přes HTTPS)
document.cookie = "uživatel=Jan; secure";

samesite

Dalším bezpečnostním atributem je samesite, který je navržen k ochranÄ› pÅ™ed tzv. XSRF (cross-site request forgery) útoky.

Abychom pochopili, jak funguje a kdy je užitečný, podívejme se na XSRF útoky.

XSRF útok

PÅ™edstavte si, že se pÅ™ipojíte na sídlo bank.com. To znamená: máte z tohoto sídla autentifikační cookie. Váš prohlížeč ji posílá na bank.com s každým požadavkem, takže vás sídlo rozezná a provede vÅ¡echny citlivé finanční operace.

Když si nyní prohlížíte web v jiném oknÄ›, náhodou se dostanete na jinou stránku evil.com. Tato stránka obsahuje kód v JavaScriptu, který odeÅ¡le na bank.com formulář <form action="https://bank.com/pay"> s poli, která spustí transakci z vaÅ¡eho konta na hackerovo.

Prohlížeč posílá cookies pokaždé, když navÅ¡tívíte sídlo bank.com, i když byl formulář odeslán z evil.com. Banka vás tedy rozezná a provede platbu.

Tento útok se nazývá „Cross-Site Request Forgery“ („padělání požadavků z jiného sídla“, zkráceně XSRF).

Skutečné banky jsou pÅ™ed ním samozÅ™ejmÄ› chránÄ›ny. VÅ¡echny formuláře generované sídlem bank.com obsahují speciální pole, tzv. „XSRF ochranný token“, který zlá stránka nedokáže generovat nebo vytáhnout ze vzdálené stránky. Může tam poslat formulář, ale nemůže získat data zpÄ›t. Sídlo bank.com kontroluje tento token v každém formuláři, který pÅ™ijme.

Implementace takové ochrany ovšem zabere nějaký čas. Musíme zajistit, aby požadované pole s tokenem obsahoval každý formulář, a musíme také kontrolovat všechny požadavky.

Používání cookie atributu samesite

Cookie atribut samesite poskytuje jiný způsob ochrany pÅ™ed takovými útoky, který by (teoreticky) nemÄ›l vyžadovat „XSRF ochranné tokeny“.

Má dvě možné hodnoty:

• samesite=strict

Cookie s atributem samesite=strict nebude nikdy odeslána, pokud uživatel pÅ™ichází odjinud než ze stejného sídla.

Jinými slovy, kdykoli uživatel následuje odkaz ze svého emailu, odesílá formulář z evil.com nebo provádí jakoukoli operaci pocházející z jiné domény, cookie se neodeÅ¡le.

Jestliže autentifikační cookies mají atribut samesite=strict, XSRF útok nemá Å¡anci na úspÄ›ch, protože požadavek odeslaný z evil.com pÅ™ijde bez cookies. Sídlo bank.com tedy uživatele nepozná a platbu neprovede.

Tato ochrana je pomÄ›rnÄ› spolehlivá. Cookie s atributem samesite=strict odeÅ¡lou jen operace pÅ™icházející z bank.com, napÅ™. odeslání formuláře z jiné stránky na bank.com.

Má však určitou nevýhodu.

Když uživatel následuje legitimní odkaz na bank.com, například ze svých poznámek, bude pÅ™ekvapen, že ho bank.com nepozná. Cookies se samesite=strict se v takovém případÄ› samozÅ™ejmÄ› neodeÅ¡lou.

To můžeme pÅ™ekonat použitím dvou cookies: jedné pro „obecné rozpoznávání“, jen aby Å™ekla: „Ahoj, Jane“, a druhé, která bude mít samesite=strict, pro operace mÄ›nící data. Pak osoba pÅ™icházející odjinud spatří uvítání, ale platby musejí být spuÅ¡tÄ›ny z webového sídla banky, aby byla odeslána druhá cookie.

• samesite=lax (totéž jako samesite bez hodnoty)

Toto je uvolněnější přístup, který také chrání před XSRF a navíc nenaruší uživatelovo pohodlí.

Režim lax zakazuje prohlížeči odesílat cookies pÅ™i příchodu z jiného sídla, podobnÄ› jako strict, ale s jednou výjimkou.

Cookie se samesite=lax je odeslána, jestliže jsou splnÄ›ny obÄ› tyto podmínky:

1. HTTP metoda je „bezpečná“ (např. GET, ale ne POST).

   Celý seznam bezpečných HTTP metod se nachází ve specifikaci RFC 7231. Jsou to metody, které by se měly používat ke čtení, ale ne k zápisu dat. Nesmějí provádět žádné operace, které mění data. Následování odkazu je vždy GET, tedy bezpečná metoda.

2. Operace provádí navigaci na nejvyšší úrovni (mění URL v adresové liště prohlížeče).

   Zpravidla tomu tak je, ale jestliže je navigace provádÄ›na v <iframe>, není to na nejvyšší úrovni. Navíc metody JavaScriptu pro síťové požadavky žádnou navigaci neprovádÄ›jí.

Atribut samesite=lax tedy dÄ›lá to, že umožňuje, aby nejběžnÄ›jší operace „jdi na URL“ mÄ›la cookies. Například otevÅ™ení odkazu na webové sídlo z poznámek, které tyto podmínky splňují.

Ale cokoli složitějšího, například síťový požadavek z jiného sídla nebo odeslání formuláře, cookies ztratí.

Pokud vám to vyhovuje, pÅ™idáním samesite=lax pravdÄ›podobnÄ› nepokazíte uživatelovo pohodlí a zajistíte ochranu.

CelkovÄ› je samesite vynikající atribut.

Má však nevýhodu:

• samesite je ignorován (není podporován) velmi starými prohlížeči, zhruba z roku 2017 a staršími.

Jestliže se tedy s ochranou spolehneme výhradnÄ› na samesite, staré prohlížeče budou zranitelné.

Můžeme vÅ¡ak použít samesite společnÄ› s jinými ochrannými prvky, například XSRF tokeny, abychom pÅ™idali ochrannou vrstvu a v budoucnu, až staré prohlížeče vymizí, budeme pravdÄ›podobnÄ› moci XSRF tokeny zruÅ¡it.

httpOnly

Tento atribut nemá nic společného s JavaScriptem, ale pro úplnost jej musíme uvést.

Webový server používá k nastavení cookie hlavičku Set-Cookie. Může také nastavit atribut httpOnly.

Tento atribut zakazuje JavaScriptu jakýkoli přístup k této cookie. Takovou cookie neuvidíme a nemůžeme s ní manipulovat pomocí document.cookie.

Používá se jako předběžné opatření k ochraně před útoky, při nichž hacker vloží na stránku svůj vlastní JavaScriptový kód a čeká, až uživatel tuto stránku navštíví. To by nemělo být vůbec možné, hackeři by neměli být schopni vložit svůj kód na naši stránku, ale mohou existovat chyby, které jim to dovolí.

NormálnÄ›, když se nÄ›co takového stane a uživatel navÅ¡tíví webovou stránku s hackerovým JavaScriptovým kódem, tento kód se spustí a získá přístup k document.cookie s uživatelskými cookies, které obsahují autentifikační informace. To je Å¡patné.

Jestliže vÅ¡ak cookie je httpOnly, pak ji document.cookie nevidí, takže je chránÄ›na.

Dodatek: Funkce pro cookies

Následuje malá sada funkcí pro práci s cookies, které jsou pohodlnÄ›jší než ruční modifikace document.cookie.

Pro práci s cookies existuje mnoho knihoven, tyto funkce tedy slouží pro demonstrativní účely. Jsou však plně funkční.

getCookie(název)

Nejkratším způsobem, jak přistupovat ke cookie, je použít regulární výraz.

Funkce getCookie(název) vrací cookie s názvem název:

// vrací cookie se zadaným názvem
// nebo undefined, pokud není nalezena
function getCookie(název) {
  let shoda = document.cookie.match(new RegExp(
    "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return shoda ? decodeURIComponent(shoda[1]) : undefined;
}

Zde je new RegExp generován dynamicky, aby hledal ; název=<hodnota>.

Prosíme vÅ¡imnÄ›te si, že hodnota cookie je zakódována, proto getCookie používá k jejímu rozkódování zabudovanou funkci decodeURIComponent.

setCookie(název, hodnota, atributy)

Nastaví cookie s názvem název na hodnotu hodnota se standardní path=/ (lze modifikovat pÅ™idáním standardních hodnot dalších atributů):

function setCookie(název, hodnota, atributy = {}) {

  atributy = {
    path: '/',
    // v případě potřeby sem přidejte standardní hodnoty dalších atributů
    ...atributy
  };

  if (atributy.expires instanceof Date) {
    atributy.expires = atributy.expires.toUTCString();
  }

  let změněnáCookie = encodeURIComponent(název) + "=" + encodeURIComponent(hodnota);

  for (let klíčAtributu in atributy) {
    změněnáCookie += "; " + klíčAtributu;
    let hodnotaAtributu = atributy[klíčAtributu];
    if (hodnotaAtributu !== true) {
      změněnáCookie += "=" + hodnotaAtributu;
    }
  }

  document.cookie = změněnáCookie;
}

// Příklad použití:
setCookie('uživatel', 'Jan', {secure: true, 'max-age': 3600});

deleteCookie(název)

Cookie můžeme smazat tak, že jí nastavíme záporný čas expirace:

function deleteCookie(název) {
  setCookie(název, "", {
    'max-age': -1
  })
}

VÅ¡echno dohromady: cookie.js.

Dodatek: Cookies třetích stran

Cookie se nazývá „cookie třetí strany“, pokud je uložena jinou doménou než doménou stránky, kterou uživatel navštívil.

Například:

1. Stránka na site.com načte banner z jiné stránky: <img src="https://ads.com/banner.png">.

2. SpolečnÄ› s tímto bannerem může vzdálený server na ads.com nastavit hlavičku Set-Cookie s cookie napÅ™. id=1234. Tato cookie pochází z domény ads.com a bude viditelná jedinÄ› na doménÄ› ads.com:

3. PÅ™i dalším přístupu na ads.com vzdálený server získá cookie id a pozná uživatele:

4. JeÅ¡tÄ› důležitÄ›jší je, že když se uživatel pÅ™esune ze site.com na jiné sídlo other.com, které také obsahuje banner, pak ads.com tuto cookie rovněž získá, protože patří ads.com, takže pozná návÅ¡tÄ›vníka a bude sledovat jeho pÅ™esun mezi sídly:

Cookies tÅ™etích stran se kvůli své povaze tradičnÄ› používají pro sledovací a reklamní služby. Jsou vázány k doménÄ› svého původu, takže ads.com může sledovat stejného uživatele mezi různými sídly, pokud k ní tato sídla pÅ™istupují.

Některým lidem se pochopitelně nelíbí, když je někdo sleduje, takže prohlížeče umožňují takové cookies zakázat.

Navíc některé moderní prohlížeče uplatňují pro takové cookies speciální politiku:

• Safari cookies tÅ™etích stran vůbec neumožňuje.
• Firefox má „černý seznam“ domén tÅ™etích stran, jejichž cookies tÅ™etích stran blokuje.

Dodatek: GDPR

Toto téma nemá nic společného s JavaScriptem, je to jen něco, co musíme mít při nastavování cookies na paměti.

V Evropě platí legislativa nazvaná GDPR, která nařizuje sadu pravidel pro webové stránky, aby respektovaly soukromí uživatelů. Jedním z nich je vyžadovat od uživatele výslovné povolení pro sledovací cookies.

Prosíme všimněte si, že to platí jen pro sledovací/identifikační/autorizační cookies.

Pokud tedy nastavujeme cookie, která jen ukládá nějakou informaci, ale nesleduje ani neidentifikuje uživatele, můžeme to svobodně udělat.

Jestliže však chceme nastavit cookie s autentifikací přihlášení nebo sledovacím ID, uživatel to musí povolit.

Webové stránky obecně přistupují ke GDPR dvěma způsoby. Pravděpodobně jste už oba viděli na webu:

1. Pokud webové sídlo chce ukládat sledovací cookies jen pro autentifikované uživatele.

   Aby to mohlo dělat, registrační formulář by měl obsahovat checkbox např. „souhlasím s politikou ohledně soukromí“ (která popisuje, jak se cookies používají), uživatel jej musí zaškrtnout a pak webové sídlo může svobodně nastavovat autentifikační cookies.

2. Pokud webové sídlo chce ukládat sledovací cookies pro všechny.

   Aby to webové sídlo mohlo legálně provádět, zobrazí nově příchozím uživatelům modální „vyskakovací okno“ a vyžaduje od nich souhlas s používáním cookies. Pak je webové sídlo může nastavovat a nechat uživatele prohlížet si jeho obsah. Pro nové návštěvníky to ovšem může být otravné. Nikomu se nelíbí, když místo obsahu stránek vidí vyskakovací okno, na které musí kliknout. Ale GDPR vyžaduje výslovný souhlas.

GDPR se týká nejen cookies, ale i jiných záležitostí ohledně ochrany soukromí. To je však mimo naše téma.

Shrnutí

Přístup k cookies poskytuje document.cookie.

• Operace zápisu mÄ›ní jen cookie, která je v ní uvedena.
• Název a hodnota musí být zakódovány.
• Velikost jedné cookie nesmí pÅ™esáhnout 4 KB. Počet povolených cookies v jedné doménÄ› je pÅ™ibližnÄ› 20 a více (závisí na prohlížeči).

Atributy cookie:

• path=/, standardnÄ› aktuální cesta, učiní cookie viditelnou jen pod uvedenou cestou.
• domain=site.com, standardnÄ› je cookie viditelná jen na aktuální doménÄ›. Pokud je doména explicitnÄ› nastavena, bude cookie viditelná i na subdoménách.
• expires nebo max-age nastaví čas expirace cookie. Nejsou-li uvedeny, cookie bude odstranÄ›na pÅ™i zavÅ™ení prohlížeče.
• secure způsobí, že cookie se bude posílat jen pÅ™es HTTPS.
• samesite zakáže prohlížeči posílat cookie v požadavcích, které pÅ™icházejí odjinud než z tohoto sídla. Pomáhá chránit pÅ™ed XSRF útoky.

Navíc:

• Prohlížeč může zakázat cookies tÅ™etích stran, napÅ™. Safari to standardnÄ› dÄ›lá. Probíhají také práce na implementaci tohoto chování v Chrome.
• Když nastavujete sledovací cookie pro občany EU, GDPR vyžaduje jejich svolení.