Cookies sú malé textové súbory, ktoré webové stránky ukladajú do vášho zariadenia a často slúžia na zapamätanie prihlasovacích údajov, preferencií jazyka alebo obsahu nákupného košíka. V tomto článku sa dozviete, ako sa pracuje s cookies cez HTML a JavaScript a aké sú ich základné atribúty a bezpečnostné aspekty.
Čo sú cookies a ako fungujú?
Súbory cookies (alebo len "cookies") sú malé textové súbory, ktoré webové stránky ukladajú do vášho počítača alebo mobilného zariadenia pri návšteve. Cookies sú uložené na doméne a v ceste určené atribútmi, ktoré server posúva cez Set-Cookie hlavičku. Väčšina cookies je definovaná parametrami ako domain, path, expires alebo max-age, samesite a ďalšími. Základný mechanizmus čítania a zápisu spočíva v práci s document.cookie cez JavaScript.
Základné operácie s cookies v JavaScripte
Readovanie: document.cookie obsahuje reťazec v tvare name=value pár, oddelený bodkočiarkou. Ak chceme nájsť konkrétnu cookie, môžeme rozobrať tento reťazec a vyhľadať správne meno. Povedané inak, čítanie nie je priamy dátový property, ale accessor. Z tohto dôvodu nie je možné získať priamy zoznam všetkých cookies bez ďalšieho spracovania.
Zápis: Môžeme zapísať do document.cookie, ale nejde o parameter samotnej vlastnosti - zápis je vykonávaný ako operácia na vlastnosti. Často sa stretávame s tým, že zápis novej cookies nevytlačí zoznam všetkých cookies, ale pridá novú položku. Názov a hodnota môžu obsahovať ľubovoľné znaky a校
Limit pre veľkosť: Názov-hodnota by mali mať obmedzenie približne 4 KB na cookie. Tieto cookies môžu mať aj ďalšie atribúty ako domain, path, expires alebo max-age, samesite a ďalšie.
Atribúty cookies a ich význam
- Domain definuje, kde je cookie dostupná. V praxi platí, že cookie býva viditeľná pre doménu, na ktorej bola nastavená, a podľa pravidiel môže byť aj pre subdomény (historicky s dotom .domain.com).
- Path určuje cestu (prefix URL), pod ktorou je cookie prístupná. Väčšia špecifikácia znamená užšiu dostupnosť na stránkach pod daným path.
- Expires alebo Max-Age určujú platnosť cookie. Bez týchto atribútov cookie zvyčajne zaniká pri zatvorení prehliadača (session cookie).
- SameSite je bezpečnostný atribút, ktorý chráni pred XSRF útokmi tým, že obmedzuje posielanie cookies pri požiadavkách z inej stránky. Možnosti sú Strict, Lax a None.
- Secure znamená, že cookie je posielaná len cez HTTPS spojenie.
Ako pridať cookies cez HTML a JavaScript
HTML samotný nie je nástroj na zapisovanie cookies; cookies sa pridávajú cez JavaScript alebo serverové skripty. Tu sú praktické kroky a ukážky, ako na to:
- Pridanie cookies cez JavaScript - nastavenie názvu a hodnoty s atribútmi:
<script>function pridajCookie() { document.cookie = "meno=Janko; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/; domain=vasadomena.com; SameSite=Lax";}</script> - Čítanie cookies - získanie všetkých cookies a vyhľadávanie konkrétnej:
<script>function priNajdeniCookie(nazov) { var cookies = document.cookie.split(";"); // rozdelenie do jednotlivých cookie for (var i = 0; i < cookies.length; i++) { var c = cookies[i].trim(); if (c.indexOf(nazov + "=") === 0) { return c.substring(nazov.length + 1); } } return null;}</script> - Bezpečnostné učenie - nastavenie SameSite a Secure pri zapisovaní cez JavaScript:
<script>document.cookie = "token=abc123; SameSite=Strict; Secure; path=/";</script>
Praktické scenáre a tipy
- Na dlhodobé uchovávanie nastavení používajte expires alebo max-age a domain, aby cookie fungovala na celej doméne.
- Ak chcete ochrániť sa pred XSRF, používajte SameSite=Strict alebo používajte kombinačnú stratégiu dvoch cookies - jedno pre všeobecné uznanie a druhé pre citlivé operácie s SameSite=Strict.
- Pri tretích stranách buďte opatrní; tretie strany môžu nastaviť cookies na doméne, ktoré práve navštevujete, čo môže viesť k nežiaducemu sledovaniu.
- V procese správy cookies môžete využiť rôzne nástroje a knižnice na zobrazenie advertovacieho banneru a správu súhlasu používateľa.
Príklad jednoduchého HTML dokumentu s cookie
Ukážka ukazuje, ako môžete pridať cookie a zobraziť aktuálne uložené cookies na stránke:
HTML a JavaScript spolupracujú na zobrazovaní cookies a ich hodnôt. Budete potrebovať tlačidlo, ktoré vyvolá zápis cookie a následne zobrazí obsah dokument.cookie:
<!DOCTYPE html><html><head> <title>Pridanie a zobrazenie cookies</title></head><body> <h1>Cookies v HTML</h1> <button onclick="pridajCookie()">Pridať Cookie</button> <div id="cookieInfo"></div> <script> function pridajCookie() { document.cookie = "meno=Janko; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/"; zobrazCookie(); } function zobrazCookie() { var x = document.cookie; document.getElementById("cookieInfo").innerHTML = "Cookie: " + x; } </script></body></html>Bezpečnosť, súkromie a správa cookies
Pravidlá správy cookies sú často definované legislatívou EÚ a trendy zahŕňajú súhlas používateľa a informovanie o zbieraní údajov. Banner súhlasu je bežná forma oznamu, ktorá informuje používateľa a umožňuje mu vybrať typy cookies (napr. nevyhnutné, funkčné, analytické, marketingové).
Čo sú súbory cookie? A ako fungujú | Vysvetlenie pre začiatočníkov!
Príklad menu cookie banneru a jeho nastavenia
Banner súhlasu môže obsahovať nastavenia typu cookies, linky na pravidlá ochrany osobných údajov a tlačidlá na prijatie alebo odmietnutie cookies. Toto je dôležitý prvok pri zabezpečovaní súhlasu používateľa a riadení prístupu k cookies podľa jeho voľby.
Riešenia a doplnky
Okrem základného JavaScriptu môžete použiť rôzne knižnice a doplnky na správu cookies (napr. pre banner súhlasu, kontrolu nastavení a zobrazenie informácií používateľovi). U niektorých webov môže byť užitočné aj testovanie správneho fungovania cookies cez rôzne prehliadače a zariadenia.
HTML samotný jazyk neslúži na priame pridávanie cookies. Cookies sa pridávajú pomocou JavaScriptu alebo server-side skriptov a HTML slúži na štruktúru a obsah stránky.