Pliki cookies. Czym są i po co to komu? Jak ich używać?

3/6/2018

O plikach cookies słyszał chyba każdy kto świadomie użytkuje internet. Ale czy w zasadzie wiesz czym są i do czego służą cookies? Jeśli chcesz poznać specyfikę plików cookies lub pogłębić/utrwalić swoją wiedzę na ich temat to ten wpis jest dla Ciebie.

Czego się dzisiaj dowiesz?

Ten wpis stanowi wstęp do zagadnienia związanego z plikami cookies. Tutaj dowiesz się czym są te pliki i postaram się wyjaśnić kwestię związane z użyciem tej technologii. Na początku będzie wstęp ogólny który przybliży zagadnienie osobom “nie technicznym” po czym zagłębimy się w szczegółach.

Użycie plików cookies we współczesnym internecie jest czymś powrzechnym. Niesie to ze sobą sporo korzyści jak i niebezpieczeństw. Trudno opisać to wszystko w jednym wpisie na blogu. Jeśli chodzi o podział zagadnienia (na tyle na ile dobrze aby znał je Web Developer) to można by je rozłożyć na conajmniej cztery części:

  1. Informacje ogólne, podstawy działania mechanizmu cookies
  2. Praktyczne zastosowanie przez developera czyli kod który ma spójny i logiczny charakter
  3. Pliki cookies i reklama w internecie
  4. Bezpieczeństwo i poufność danych (na czasie jeśli chodzi o RODO)

Dzisiaj skupię się na pierwszej części i być może w przyszłości powstaną kolejne wpisy na ten temat.

Czym są pliki Cookies?

Są to pliki składające się z ciągów znaków które zawierają informacje o zachowaniach/danych użytkownika strony lub aplikacji internetowej. Pliki te wysyłanez serwera do przeglądarki, w przeglądarce są uzupełniane o konkretne dane a następnie wracają na serwer.

Niektóre pliki cookies mogą być przechowywane w pamięci przeglądarki i na ich podstawie zapamiętywane są nasze preferencje na stronie (np. wersja językowa, zapamiętane loginy i hasła). Jak wracasz na taką stronę to często nie musisz już wpisywać ponownie swoich danych.

Wędrówka plików cookies między przeglądarką (klientem) a serwerem może nastąpić za każdym razem kiedy inicjujemy komunikację przez protokół HTTP (np.poprzez wysłanie formularza, załadownie strony itp.). Jeśli strona obsługuje pliki cookies to to kiedy, i jakie informacjeprzekazywane w tych plikach jest określane przez Developera (tego kto stworzył tą stronę lub brał w tym jakiś udział).

Pliki cookies pierwotnie miały na celu transfer danych pomiędzy serwerem a klientem (oraz przetrzymywanie danych w pamięci przeglądarki). Poprzez rozwój kolejnych technologii (Web Storage, inne metody HTTP, zarządzanie danymi w nowoczesnych aplikacjach) nastąpiła redukcja ich zadań, standaryzacja a rozmiar został zredukowany do 4kB. Obecnie służą raczej do identyfikacji użytkownika i stanu aplikacji niż do przesyłu większej ilości danych. Dość wyczerpująco zostało to opisane w Wikipedii

Jakie dane mogą być przechowywane w cookies?

W zasadzie dowolne które nie przekroczą 4kB. O tym decyduje developer. Do tych najczęściej wykorzystywanych należą:

  1. Dane z formularzy – najczęściej informacje o loginie i haśle ale może to być np. adres, osobiste preferencje lub wszystko inne co uzupełniasz na danej stronie internetowej. Na tym etapie warto wspomnieć, że te dane mogą być zaszyfrowane.
  2. ID danej sesji – na tej podstawie serwer interpretuje czy użytkownik jest np. zalogowany i czy konkretna sesja nie wygasła.
  3. Informację o przeglądarce i systemie operacyjnym
  4. Data i godzina zdarzenia – na tej podstawie można określić sekwencję czynności jakie wykonał użytkownik np. kliknął w sekcję A a potem w B.

Wydaje się, że ilość informacji jest spora więc aby małe ciasteczka były w stanie pomieścić to wszystko każda strona lub aplikacja może używać dziesiątki takich unikalnych plików cookies.

Jak wygląda plik cookie?

Według klasycznej definicja składa się on z ciągu par “name=value” oddzielonych od siebie znakiem “;” (semicolon). W praktyce “name” odpowiada za nazwę konkretnej właściwości pliku a “value” opisuje jej zawartość. W zależności od tego jak został zdefiniowany taki plik może się składać z kilku par i wyglądać np. tak:

"theme=blue; max-age=60; path=/; domain=thesitewizard.com"

Bardzo łatwo to zobaczyć w praktyce kiedy wejdziesz do ustawień przeglądarki i znajdziesz tam pliki cookie. W Chrome struktura pojedynczego pliku wygląda np. tak:

Jak widać na przykładzie powyżej mam w pliku 8 właściwości którym przypisane są konkretne wartości. Jak nie trudno się domyślić to czy plik posiada takie a nie inne właściwości definiuje jak będzie się zachowywał i jakie będzie miał zadania.

Właściwości pliku cookie

Deweloper określa w którym momencie serwer ma wysłać dany plik cookie. Każdy plik wysłany na unikalne żądanie może mieć inną strukturę np. deweloper daje mu 1 lub np. 10 różnych właściwości w zależności od zadania jakie ma spełniać plik. Do podstawowych właściwości plików cookies należą:

name

Czyli nazwa samego ciasteczka. Na tej podstawie są one identyfikowane. Warto tutaj wspomnieć o  konwencji nazewnictwa. Przyjmuje się, że pliki z prefiksami “__” pochodzą z bezpiecznych stron (używających protokołu HTTPS)

expires i max-age

Te dwie właściwości definiują, czy ciasteczka są traktowane jako Session Cookies albo Permanent Cookies. Jaka jest różnica?

Session Cookies nie są przechowywanie w przeglądarce po zakończeniu sesji tzn. po zamknięciu okna lub samej przeglądarki pliki nie są zapisywane w jej pamięci. Przy kolejnym uruchomieniu strony nie ma informacji o użytkowniku.

Permanent Cookies są przechowywane w pamięci przeglądarki. Po ponownym uruchomieniu mamy dostęp np. do danych formularzy.

Teraz od tego w jakiej kategorii lądują pliki cookies zależy to czy zdefiniujemy właściwości expires lub max-age (jeśli je dodamy to będziemy mieli permanent cookie). Czym one się różnią?

expires mówi nam o tym, że plik straci swoją ważność o określonej dacie i godzinie. Kiedy ta chwila nastąpi to plik jest usuwany z przeglądarki.

max-age definiuje okres ważności pliku względem daty utworzenia np. plik ma być przechowywany w pamięci przeglądarki przez 30 dni od daty utworzenia. Ma większy priorytet od expires.

secure

Plik używający tej właściwości będzie obsługiwany tylko przez strony używające protokołu HTTPS gdzie wymiana danych między serwerem a klientem jest szyfrowana.

httpOnly

Ta właściwość uniemożliwia modyfikowanie plików cookies po stronie klienta za pomocą JavaScriptu. Struktura pliku jest deklarowana tylko po stronie serwera. Zbierają one wtedy podstawowe informacje.

domain i path

Definiowana jest domena oraz ścieżka na którą będą wysyłane pliki cookies. Pliki stworzone dla danej domeny będą obsługiwane tylko w tej domenie.

content

Tu można umieścić informacje zebrane ze strony (formularze itp.). Jeśli są to dane poufne to powinny być zaszyfrowane.

W zasadzie nic nie ogranicza dewelopera aby dodawać własne customowe właściwości jeśli jest taka potrzeba.

Co więcej o plikach cookies?

Ciasteczka niosą ze sobą wiele pożytku jak i zagrożeń. Już wiemy, że ułatwiają lub wręcz umożliwiają prawidłowe użytkowanie serwisów internetowych.

Z mniej przyjemnych spraw to z założenia zbierają informacje o naszych zachowaniach w internecie więc negatywnie wpływają na naszą anonimowość w sieci. Na ich podstawie mogą być wyświetlane nam reklamy w internecie.

Nie umiejętnie używane mogą być dodatkową furtką do wycieku naszych poufnych danych gdyż są narażone np. na ataki XSS, XST czy XSRF.

Przechowują w pamięci przeglądarki dane które mogą być wykorzystane przez kogoś kto najzwyczajniej w świecie użytkuje nasz komputer (za pozwoleniem lub bez). Dlatego czyszczenie raz na jakiś czas pamięci przeglądarki i plików cookies raczej nie zaszkodzi (najwyżej trzeba będzie wpisywać w serwisach loginy i hasła od nowa).

Jak widać z plikami cookies wiąże się wiele dodatkowych kwestii związanych z bezpieczeństwem danych w sieci których nie będę rozwijał w tym wpisie. 

Jak stworzyć plik cookie?

Skoro mamy już podstawową wiedzę na temat zachowania i struktury plików cookies to spróbujmy stworzyć te pliki sami. Poniżej przedstawię kod znaleziony na różnych tutorialach po internecie. Nie jest to coś co sam napisałem.

Tworzenie ciasteczka

Jak już wiemy, ciasteczka tworzone są po stronie serwera należy więc użyć języka back-endowego. Tutaj składnia może być różna w zależności od języka. Dla przykładu w NodeJS można zrobić to np. tak:

Back-End

const server = http.createServer((req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.setHeader('Set-Cookie', ['type=ninja', ‘language=javascript’, ‘max-age=60 * 60 * 24 * 30’])
});

Tworzenie cookies po stronie serwera jest opisane np. w dokumentacji MDN Dev Docs.

Front-End

Zakładając, że nie jest to zablokowane przy pomocy httpOnly to możemy tworzyć lub dowolnie modyfikować zawartość ciasteczka z poziomu JavaScriptu w naszej aplikacji. Można to zrobić za pomocą właściwości .cookie. Może to wyglądać np. tak:

document.cookie =
"theme=" + encodeURIComponent("blue theme") +
"; max-age=" + 60*60*24*30 +
"; path=/; domain=thesitewizard.com" ;

Albo funkcja do tworzenia ciasteczek:

function set_cookie ( cookie_name, cookie_value, lifespan_in_days, valid_domain ){
var domain_string = valid_domain ? ("; domain=" + valid_domain) : '' ;
document.cookie = cookie_name + "=" + encodeURIComponent( cookie_value ) +
"; max-age=" + 60 * 60 * 24 * lifespan_in_days +
"; path=/" + domain_string ;
}

Powyższe przykłady pochodzą z TEJ strony.

To jak to wszystko zebrać do kupy?

No właśnie… Podałem dzisiaj co nieco informacji na temat ciasteczek ale dalej nie stanowi to spójnej i kompletnej całości. Tym którzy dopiero poznają cookies ciężko to narazie tak całościowo ogarnąć aby użyć gdzieś w swoim projekcie.

Moim celem było przedstawienie ogólnej koncepcji tej technologii. Jak napisałem na wstępie aby to wszystko dobrze zrozumieć przydałyby się wpisy o konkretnej implementacji, o tym jak używane są do reklamy w internecie czy kwestiach bezpieczeństwa. Wszystko przed nami 🙂

Jeśli chcesz dowiedzieć się więcej poniżej kilka linków które mogą Ci pomóc:

Po Polsku, MDN WebDocs 1, MDN 2, MDN 3, YouTube 1, YouTube 2 

Podsumowanie

Na temat ciasteczek krąży po sieci wiele mitów. Są one potrzebne ale też kontrowersyjne. Jako Web Developer dobrze jest je rozumieć aby nasze aplikacje były funkcjonalne i bezpieczne.

Teraz jeśli czytają mnie jacyś eksperci i doszukali się w tym wpisie błędów logicznych lub merytorycznych to bardzo prosiłbym o napisanie tego w komentarzu 🙂 Z góry dzięki:)

Please follow and like us:
0

Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?

WARTO
Social media & sharing icons powered by UltimatelySocial