Czym są ciasteczka? Jak strony internetowe Cię zapamiętują
Ciasteczko to mały fragment tekstu, który strona prosi Twoją przeglądarkę o zapisanie, a potem odsyła go przy każdej kolejnej wizycie na tę stronę. W ten sposób strona "zapamiętuje" Cię — że jesteś zalogowany, co jest w koszyku, jaki język wybrałeś. Ciasteczka są tylko danymi, a nie programami, ale ponieważ mogą Cię identyfikować, mają znaczenie zarówno dla bezpieczeństwa, jak i prywatności.
Dlaczego to ważne, gdy budujesz z AI
Ciasteczka leżą u podstaw kilku funkcji, o które poprosisz kreator AI, często bez wspominania słowa "ciasteczko":
- Logowanie. W większości aplikacji webowych "pozostań zalogowany" oznacza ciasteczko sesji. To, jak jest skonfigurowane, decyduje, jak łatwo je ukraść.
- Koszyki i preferencje. Koszyk, który przetrwa odświeżenie strony, często opiera się na ciasteczku lub pamięci przeglądarki.
- Analityka i reklamy. Dodanie Google Analytics, piksela Meta lub widżetu czatu zwykle dodaje ciasteczka innych firm.
- Informacje prawne. W wielu miejscach niektóre ciasteczka wymagają wcześniejszej zgody odwiedzającego i stąd biorą się banery z ciasteczkami.
Jeśli wiesz, jakie ciasteczka ustawia Twoja aplikacja i po co, możesz lepiej dobierać ustawienia bezpieczeństwa, zgody i politykę prywatności.
Codzienna analogia
Pomyśl o numerku z szatni. Oddajesz płaszcz i dostajesz ponumerowany żeton. Żeton nie zawiera Twojego płaszcza — tylko numer. Za każdym razem, gdy wracasz do okienka, pokazujesz żeton, a obsługa wie, który płaszcz jest Twój.
Ciasteczko sesji działa tak samo. Gdy się logujesz, serwer zachowuje Twoje dane po swojej stronie i daje przeglądarce żeton — długi, losowy identyfikator. Przeglądarka pokazuje ten żeton przy każdym żądaniu, a serwer sprawdza, kim jesteś. Ktoś, kto skopiuje żeton, może odebrać płaszcz, dlatego ciasteczka logowania trzeba chronić.
Jak naprawdę działa ciasteczko
- Odwiedzasz stronę. Odpowiedź serwera zawiera nagłówek w stylu
Set-Cookie: session_id=8f3k...; HttpOnly; Secure; SameSite=Lax. - Przeglądarka zapisuje go, powiązany z domeną tej strony.
- Przy każdym kolejnym żądaniu do tej samej strony przeglądarka automatycznie dodaje
Cookie: session_id=8f3k.... - Serwer odczytuje go i wie, że to Ty.
JavaScript strony również może tworzyć ciasteczka, ale te najważniejsze — sesje logowania — powinien ustawiać serwer i ukrywać przed JavaScriptem.
Rodzaje ciasteczek
| Rodzaj | Co oznacza | Przykład |
|---|---|---|
| Ciasteczko sesji | Brak daty wygaśnięcia; usuwane po zakończeniu sesji przeglądarki | Krótkotrwały krok płatności |
| Ciasteczko trwałe | Ma datę wygaśnięcia (Expires lub Max-Age) i przetrwa restart | "Zapamiętaj mnie na 30 dni" |
| Własne (first-party) | Ustawione przez stronę widoczną w pasku adresu | Twoje logowanie na tej stronie |
| Firm trzecich (third-party) | Ustawione przez inną domenę osadzoną na stronie | Identyfikator śledzenia sieci reklamowej |
| Ściśle niezbędne | Potrzebne do usługi, o którą użytkownik poprosił | Sesja logowania, koszyk zakupów |
| Niezbędne opcjonalnie | Przydatne dla właściciela strony | Analityka, reklamy, testy A/B |
Przeglądarki stopniowo ograniczały ciasteczka firm trzecich, bo służą do śledzenia ludzi między stronami. Kilka dużych przeglądarek blokuje ich wiele domyślnie, a szczegóły ciągle się zmieniają, więc nie buduj nic ważnego na ciasteczkach firm trzecich.
Przykład: mały sklep internetowy
Załóżmy, że zbudowałeś sklep ze świecami rękodzielniczymi. Oto ciasteczka, które ustawiałaby rozsądna wersja, i powody.
session — ustawiane, gdy właściciel lub klient się loguje. Zawiera tylko losowy identyfikator; prawdziwe dane sesji trzyma serwer. Ustawienia: HttpOnly (skrypty strony nie mogą go odczytać), Secure (wysyłany tylko przez HTTPS), SameSite=Lax (nie jest wysyłany przy większości żądań zainicjowanych przez inne strony). Ściśle niezbędne.
cart_id — pozwala odwiedzającemu, który nie jest zalogowany, zachować koszyk. Wskazuje na koszyk zapisany w bazie danych. Ściśle niezbędne, bo odwiedzający sam poprosił o dodanie rzeczy do koszyka.
theme — zapamiętuje tryb ciemny. Mogłoby to być ciasteczko, ale nigdy nie musi trafiać do serwera, więc prostsze jest localStorage przeglądarki.
Ciasteczka analityczne — dodawane, jeśli zainstalujesz narzędzie analityczne. Są niezbędne opcjonalnie. W UE i Wielkiej Brytanii zwykle wymagają zgody przed ustawieniem, więc skrypt analityczny powinien czekać, aż odwiedzający kliknie "Akceptuj".
Zwróć uwagę, czego sklep nie zapisuje w ciasteczkach: imienia klienta, adresu ani danych karty. Ciasteczka podróżują z każdym żądaniem i żyją na urządzeniu użytkownika, więc powinny zawierać identyfikatory, a nie dane osobowe.
Wyjaśnienie częstych pojęć
| Pojęcie | Co oznacza |
|---|---|
| Ciasteczko (cookie) | Mała para nazwa–wartość, którą przeglądarka zapisuje i odsyła do strony. |
Set-Cookie | Nagłówek odpowiedzi, którym serwer tworzy lub aktualizuje ciasteczko. |
| Sesja | Zapis serwera o zalogowanym użytkowniku, powiązany z identyfikatorem w ciasteczku. |
HttpOnly | Uniemożliwia JavaScriptowi strony odczyt ciasteczka, co ogranicza szkody z wstrzykniętych skryptów. |
Secure | Ciasteczko jest wysyłane tylko przez zaszyfrowane połączenia HTTPS. |
SameSite | Określa, czy ciasteczko jest wysyłane przy żądaniach z innych stron (Strict, Lax lub None). |
Expires / Max-Age | Kiedy ciasteczko ma zostać usunięte. |
| Domain / Path | Które adresy na stronie otrzymują ciasteczko. |
| localStorage | Pamięć przeglądarki, którą może odczytać kod strony, ale która nie jest automatycznie wysyłana do serwera. |
| XSS | Cross-site scripting: skrypt napastnika działający na Twojej stronie, który może próbować ukraść dane. |
| CSRF | Cross-site request forgery: inna strona nakłania przeglądarkę do wysłania żądania z Twoimi ciasteczkami. |
| Zgoda na ciasteczka (cookie consent) | Proszenie odwiedzających o zgodę przed ustawieniem niezbędnych opcjonalnie ciasteczek. |
Częste błędy i nieporozumienia
- "Ciasteczka to wirusy." To zwykły tekst. Nie mogą uruchamiać kodu na Twoim komputerze.
- Wkładanie wrażliwych danych do ciasteczek. Zapisz losowy identyfikator, a szczegóły trzymaj na serwerze.
- Tokeny logowania w localStorage. Każdy skrypt działający na stronie może odczytać localStorage, także wstrzyknięty. Ciasteczka
HttpOnlynie mogą być odczytane przez skrypty strony w ogóle. - Brak flag
SecureiHttpOnly. Te dwie flagi są tanie i zamykają częste luki. - Zakładanie, że baner zapewnia wszystko. Baner, który ładuje analitykę, zanim ktokolwiek kliknie "Akceptuj", nie spełnia swojej roli.
- Zapominanie o wylogowaniu. Wylogowanie powinno usunąć ciasteczko i zakończyć sesję na serwerze, aby skopiowane ciasteczko przestało działać.
- "Jeśli nie używam ciasteczek, przepisy o prywatności mnie nie dotyczą." Przepisy takie jak RODO obejmują dane osobowe wszędzie tam, gdzie są przechowywane — także w local storage, odciskach urządzeń i logach serwera.
O co zapytać swój kreator AI
- "Wypisz każde ciasteczko, które ustawia aplikacja, do czego służy, jak długo działa i czy jest ściśle niezbędne."
- "Użyj ciasteczka sesji z flagami
HttpOnly,Secure,SameSite=Laxdo logowania. Nie umieszczaj tokenów uwierzytelniających w localStorage." - "Trzymaj w ciasteczku tylko losowy identyfikator sesji; dane sesji zapisuj na serwerze."
- "Przy wylogowaniu wyczyść ciasteczko i unieważnij sesję na serwerze."
- "Nie ładuj skryptów analitycznych ani marketingowych, dopóki odwiedzający ich nie zaakceptuje, i zapamiętaj jego wybór."
- "Dodaj do polityki prywatności prostą sekcję o ciasteczkach zgodną z powyższą listą."
W sprawie zgody zobacz jak dodać zgodę na ciasteczka. Jak ciasteczka łączą się z logowaniem, przeczytasz w artykule czym jest uwierzytelnianie.
Ciasteczka w Mythex
Mythex nie udostępnia wbudowanego logowania dla użytkowników Twojej aplikacji, więc ciasteczka, które ustawia Twoja aplikacja, pochodzą z jej własnego kodu i narzędzi, które do niej dodajesz — na przykład ciasteczko sesji z wybranego przez Ciebie podejścia do uwierzytelniania. Poproś agenta w czacie, by je wypisał, zaostrzył ich ustawienia lub dodał baner zgody, i sprawdź wynik w żywym podglądzie, zanim opublikujesz. Przepis w dokumentacji dodawanie logowania do aplikacji to dobry początkowy prompt, a bezpieczeństwo aplikacji, które budujesz wyjaśnia, jak trzymać klucze i sekrety poza przeglądarką.
Pytania
Czym jest ciasteczko na stronie internetowej?
Ciasteczko to mały fragment tekstu, który strona prosi Twoją przeglądarkę o zapisanie. Przeglądarka odsyła go przy każdym kolejnym żądaniu do tej strony, dzięki czemu strona pamięta rzeczy takie jak to, czy jesteś zalogowany, lub co jest w Twoim koszyku.
Czy ciasteczka są niebezpieczne?
Ciasteczka to tylko dane, a nie programy, więc nie mogą uruchamiać kodu ani zainfekować komputera. Problemy dotyczą prywatności, gdy ciasteczka firm trzecich śledzą Cię na wielu stronach, oraz bezpieczeństwa, gdy ciasteczko logowania zostanie ukradzione i użyte do podszywania się pod Ciebie.
Jaka jest różnica między ciasteczkami własnymi a ciasteczkami firm trzecich?
Ciasteczko własne ustawia strona widoczna w pasku adresu, na przykład ciasteczko logowania. Ciasteczko firmy trzeciej ustawia inna domena osadzona na stronie, na przykład sieć reklamowa, i często służy do śledzenia Cię na wielu stronach.
Czy potrzebuję banera z ciasteczkami?
Zależy to od tego, gdzie są Twoi użytkownicy i jakich ciasteczek używasz. W UE i Wielkiej Brytanii ciasteczka niezbędne, takie jak analityka czy reklamy, zwykle wymagają wcześniejszej zgody, podczas gdy ciasteczka ściśle niezbędne do działania usługi, jak sesja logowania, zwykle nie. Sprawdź przepisy, które dotyczą Ciebie.
Jaka jest różnica między ciasteczkami a localStorage?
Oba przechowują dane w przeglądarce. Ciasteczka są automatycznie wysyłane do serwera przy każdym żądaniu, co pasuje do logowania. localStorage pozostaje w przeglądarce i odczytuje go tylko kod samej strony, co pasuje do preferencji, jak motyw.