Что такое Cookies, как они работают, на что влияют и почему их стоит учитывать… Или не стоит?

HTTP cookies — это один из столпов веб-технологии, без которого невозможно представить работу современного интернета. Однако большинство разработчиков относятся к cookies как к «чёрному ящику»: запускают, что-то работает, и хорошо. На самом деле, понимание нюансов cookies критично для безопасности, приватности и функциональности приложения.

Зачем вообще нужны cookies?

HTTP — это stateless протокол. Сервер обрабатывает каждый запрос независимо друг от друга и не помнит, были ли ранее от этого пользователя другие запросы. Можно представить ваш браузер как человека без памяти: каждый раз он приходит на сайт как первый раз.

Cookies, как раз и решают эту проблему: они добавляют «памяти» браузеру. Сервер отправляет маленький файл (cookie) с информацией, и браузер автоматически отправляет его обратно с каждым следующим запросом.

Как работают cookies в HTTP

Давайте разберемся, как же происходит обмен информацией между браузером на вашем локальном компьютере и сайтом, на который вы через этот браузер зашли.

Установка cookie (Set-Cookie)

После того, как вы зашли на сайт, сервер отправляет cookie в HTTP-ответе, примерно такого вида:

HTTP/1.1 200 OK
Set-Cookie: sessionId=abc123xyz; Path=/; HttpOnly; Secure; SameSite=Lax
Set-Cookie: theme=dark; Path=/; Max-Age=31536000
Content-Type: text/html

Браузер читает этот заголовок и сохраняет два cookie:

1. sessionId — временный или сессионные cookie (удаляется при закрытии браузера)

2. `theme` — постоянный или персистентные cookie

Отправка cookie (Cookie)

При следующих запросах к этому сайту браузер уже автоматически добавляет сохраненные cookies:

GET /profile HTTP/1.1
Host: example.com
Cookie: sessionId=abc123xyz; theme=dark

Это происходит автоматически. Разработчик не пишет `document.cookie` в каждом запросе — браузер следит за этим самостоятельно.

Типы Cookies

Маленький файлик, размером в несколько килобайт имеет несколько видов.

По времени жизни: Session vs Persistent

Session Cookies

Cookies без явно указанного срока действия или возраста становятся временными и удаляются при закрытии последней вкладки сайта.

Хранятся такие cookies в памяти браузера (RAM) и в какой то степени они тоже нагружают вашу систему.

Set-Cookie: sessionId=xyz; Path=/; HttpOnly

Что же хранится в этих куках:

• Сессионные токены (логины, аутентификация)
• Данные, которые не должны пережить закрытие браузера
• Временные данные (содержимое корзины, черновики форм)

Persistent Cookies

Cookies с атрибутом `Expires` (срок удаления) или `Max-Age` (количество секунд).

Удаляются эти куки в указанную дату. Хранятся на жестком диске (в папке профиля браузера).

Set-Cookie: theme=dark; Path=/; Max-Age=31536000
Set-Cookie: rememberedUser=john; Expires=Fri, 06 Feb 2026 14:30:00 GMT

Что содержится в этих куках:

• Предпочтения (тема, язык, размер шрифта)
• Токены от разных сайтов
• Аналитические идентификаторы
• Долгосрочные настройки пользователя

Chrome начиная с версии M104 ограничивает максимум до 400 дней. Раньше можно было выставить cookie на 1000 лет — теперь нет.

По кому их устанавливаются: First-party vs Third-party

First-party Cookies

Если куки устанавливает тот же домен, на котором находится пользователь — это First-party cookies. К примеру — вы на `example.com`, сервер `example.com` ставит cookie. Это first-party.

Отправляется:

• При запросах к `example.com` из браузера (напрямую)
• При запросах с других сайтов? Смотрите SameSite (на это влияет!)

Set-Cookie: sessionId=...; Domain=example.com
Set-Cookie: theme=dark; Domain=example.com

Third-party Cookies

Когда другой домен устанавливает куки, но через embed на вашей странице.

<!-- На сайте example.com -->
<img src="https://analytics.com/track?id=user123" />
<script src="https://ads.network/banner.js"></script>

То есть всякие сервисы аналитики, скрипты с других сайтов — это все third-party cookies.

И вот тут уже есть интересный момент — один cookie из Гугл Аналитики может отследить вас на 100 разных сайтах, где встроен их скрипт.

Атрибуты Cookie — Детальный Разбор

Каждый cookie имеет набор атрибутов, которые контролируют его поведение. Давайте рассмотрим их более детально.

Domain

Этот атрибут указывает, к какому домену браузер должен отправлять этот cookie.

• Если атрибут domain не указан — cookie отправляется только точно на домен, где был установлен
• Если атрибут domain указан — cookie отправляется на этот домен и все его поддомены

# Cookie установлен на example.com
# Вариант 1: Domain не указан (или Domain=www.example.com)
Set-Cookie: sessionId=xyz; Domain=www.example.com
# Этот cookie отправляется при запросе к:
# - www.example.com ✓
# - api.www.example.com ✓
# - admin.www.example.com ✓
# - НО НЕ на api.example.com ✗

# Вариант 2: Domain=.example.com
Set-Cookie: theme=dark; Domain=.example.com
# Этот cookie отправляется при запросе к:
# - example.com ✓
# - www.example.com ✓
# - api.example.com ✓
# - любой.example.com ✓

Если на вашем сервере работают несколько приложений на разных поддоменах (`app1.example.com` и `app2.example.com`), и вы ставите cookie для одного, а потом перечитываете его в другом — это может не сработать. Нужно явно указать `Domain`.

Path

Указывает, какие пути на домене получат этот cookie.

Браузер отправляет cookie, если запрашиваемый путь начинается с указанного Path.

# Установлено
Set-Cookie: admin_token=xyz; Path=/admin

# Отправляется при:
# GET /admin → ✓
# GET /admin/users → ✓
# GET /admin/users/john → ✓
# GET /profile → ✗
# GET /api/data → ✗

# Установлено
Set-Cookie: theme=dark; Path=/

# Отправляется при:
# GET / → ✓
# GET /anything → ✓
# GET /deep/nested/path → ✓

Если Path не указан, cookie отправляется только при запросе к точно такому же пути.

# Запрос был: GET /api/v1/users
# Установлено (без Path):
Set-Cookie: token=xyz

# Этот cookie будет отправляться ТОЛЬКО при запросе:
# GET /api/v1/users
# НЕ при GET /api/v1/ или GET /api/

Всегда явно указывайте `Path=/` для общих cookies. Если нужен специфичный путь — указывайте точно.

Expires

Записывается в формате: HTTP-дата (RFC 1123)

Set-Cookie: user=john; Expires=Wed, 09 Jun 2025 10:18:14 GMT

Удаляется когда текущее время превышает указанное в атрибуте `Expires`.

Зависит от системного времени клиента. Если пользователь поставил время неправильно — cookie удалится раньше или позже ожидаемого.

Max-Age

Формат: Количество секунд от текущего момента

Set-Cookie: user=john; Max-Age=3600    # Удалится через час
Set-Cookie: user=john; Max-Age=86400   # Удалится через день
Set-Cookie: user=john; Max-Age=31536000 # Удалится через год

Удаление cookie:

Set-Cookie: user=john; Max-Age=0    # Удалить немедленно
Set-Cookie: user=john; Max-Age=-1   # Удалить немедленно

Если указаны оба атрибута и `Expires` и `Max-Age`, браузер использует `Max-Age`.

Рекомендую использовать `Max-Age` — это более надежнее и понятнее.

Secure — Только HTTPS

Браузер отправляет этот cookie только по HTTPS соединению. По HTTP он не отправляется.

Set-Cookie: sessionId=xyz; Secure

Этот атрибут нужно использовать всегда для отправки таких данных как токены, пароли, идентификаторы сессии.

Флаг `Secure` можно установить ТОЛЬКО если соединение уже HTTPS.

// Это не сработает (страница на HTTP)
document.cookie = "token=xyz; Secure";  // ✗ Браузер будет игнорировать Secure
// Это сработает (страница на HTTPS)
document.cookie = "token=xyz; Secure";  // ✓

HttpOnly — Защита от XSS

JavaScript не может читать или писать этот cookie через `document.cookie`. Cookie доступен только через HTTP (сервер ↔ браузер).

Set-Cookie: sessionId=xyz; HttpOnly

SameSite — Защита от CSRF и контроль кросс-сайт отправки

Самый важный атрибут в настоящее время. Он призван контролировать, отправляет ли браузер cookie при кросс-сайтовых запросах.

У него есть три значения:

• SameSite=Strict

Cookie никогда не отправляется при кросс-сайтовых запросах, даже при переходе по ссылке.

Пример:
- Вы залогинены в facebook.com (есть cookie session=abc)
- Вы на news.com (другой сайт)
- На news.com есть ссылка: <a href="https://facebook.com/profile">
- Вы кликаете по ссылке

С SameSite=Strict:
- Браузер НЕ отправляет facebook cookie
- Вы приходите на Facebook как незалогиненный
- Нужно заново логиниться
- Это плохо для UX, но максимально безопасно

• SameSite=Lax

Cookie отправляется при смене URL в адресной строке с методом GET/HEAD. НЕ отправляется при POST запросе, внутри iframe, через fetch с кросс-сайта.

Примеры:
1. Вы на news.com, кликаете ссылку на facebook.com
   → Это top-level navigation, метод GET
   → Cookie session=abc отправляется ✓
   → Вы остаётесь залогиненным на Facebook

2. news.com в фоне посылает POST на facebook.com/transfer
   → Это кросс-сайт, но не top-level navigation
   → Cookie session НЕ отправляется ✗
   → CSRF атака не срабатывает

3. На news.com есть <img src="facebook.com/img.png">
   → Это кросс-сайт запрос
   → Cookie НЕ отправляется ✗

4. fetch('https://facebook.com/api', ...) с news.com
   → Это кросс-сайт запрос
   → Cookie НЕ отправляется ✗

Это сбалансированный вариант: нормальный UX, но защита от CSRF.

• SameSite=None

Cookie отправляется во всех запросах, включая кросс-сайтовые.

Set-Cookie: trackingId=xyz; SameSite=None; Secure

Чтобы этот куки работал должен быть установлен флаг `Secure` (только HTTPS). Без него браузер игнорирует этот cookie.

Для чего используется: 

• Third-party cookies (аналитика, реклама, встроенные фреймы)
• Встроенные виджеты, которые должны работать на чужих сайтах

<!-- На сайте example.com -->
<iframe src="https://widget-provider.com/embed"></iframe>

Если `widget-provider.com` хочет отследить пользователя, ему нужен `SameSite=None`.

Почему Сайты Просят Разрешение на Cookies

Уверен, многие видели этот баннер — «Мы Используем Cookies»

«Этот сайт использует cookies для улучшения вашего опыта. Нажмите ‘Согласен’ чтобы продолжить.»

Почему это появилось:

В Европе с 2018 года действует закон GDPR, который и обязал сайты получать ваше согласие перед использованием cookies. В Америке есть схожий закон — CCPA, как и в России (152-ФЗ), и как результат теперь почти все сайты должны показывать этот баннер.

Что означает «Согласен»:

• Вы разрешаете сайту использовать cookies
• Вы разрешаете отслеживание (если выбрали все опции)
• Вы даёте согласие на сбор данных о вас

Что означает «Отклонить» или «Только необходимые»:

• Вы не разрешаете отслеживание
• Вы разрешаете только очень необходимые cookies (логин, безопасность)

Важно знать:

• Большинство людей просто кликают «Согласен» не читая
• На самом деле вы можете выбрать, какие cookies разрешить
• Часто кнопка «Согласен» большая и заметная, а «Отклонить» маленькая и неприметная (так называемый тёмный паттерн для обмана)

Заключение

Cookies — это простой на поверхности, но довольно глубокий механизм. Понимание как он работает дает раскрывает очередной ноунэйм механизм из сферы IT в другом ракурсе.