Как работает Cookie?

Как работают Cookie в веб-приложениях

Основные концепции

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

Отличие от других хранилищ:

• Автоматическая отправка на сервер с каждым HTTP запросом
• Ограниченный размер (обычно 4 KB на cookie)
• Дата истечения — можно установить, когда cookie автоматически удалится
• Доступ из JavaScript — можно читать и писать (кроме httpOnly cookies)

Как браузер и сервер работают с Cookie

// ШАГИ РАБОТЫ:

// 1. Сервер отправляет cookie в ответе
// HTTP Response Header:
// Set-Cookie: sessionId=abc123; Path=/; Max-Age=3600

// 2. Браузер сохраняет cookie в памяти/на диске
// (автоматически, без участия JavaScript)

// 3. При следующем запросе браузер отправляет cookie
// HTTP Request Header:
// Cookie: sessionId=abc123

// 4. Сервер проверяет cookie и аутентифицирует пользователя

Создание и чтение Cookie из JavaScript

// СОЗДАНИЕ (запись в document.cookie)
document.cookie = "username=John; path=/; max-age=3600";
document.cookie = "theme=dark; expires=" + new Date(2025, 11, 31).toUTCString();

// Каждое присваивание ДОБАВЛЯЕТ новый cookie (не перезаписывает)

// ЧТЕНИЕ
console.log(document.cookie);
// Результат: "username=John; theme=dark; otherCookie=value"

// Парсинг cookie
function getCookie(name) {
  const nameEQ = name + "=";
  const cookies = document.cookie.split(';');
  for (let cookie of cookies) {
    cookie = cookie.trim();
    if (cookie.indexOf(nameEQ) === 0) {
      return decodeURIComponent(cookie.substring(nameEQ.length));
    }
  }
  return null;
}

const username = getCookie("username"); // "John"

// УДАЛЕНИЕ (установка max-age=0)
document.cookie = "username=; max-age=0; path=/";

Параметры Cookie

// Полная синтаксис для установки cookie

document.cookie = "name=value; " +
  "path=/; " +              // Путь, где доступен cookie (по умолчанию текущий путь)
  "domain=example.com; " +  // Домен, где доступен (по умолчанию текущий домен)
  "max-age=3600; " +        // Время жизни в секундах
  "expires=Wed, 31 Dec 2025 23:59:59 UTC; " + // Альтернатива max-age
  "secure; " +              // Отправлять только по HTTPS
  "samesite=Strict"         // Защита от CSRF (Strict, Lax, None)

// ПРИМЕРЫ:

// Сессионный cookie (удаляется при закрытии браузера)
document.cookie = "sessionId=xyz789; path=/";

// Persistent cookie (живёт месяц)
document.cookie = "userId=123; max-age=2592000; path=/";

// Secure cookie (только HTTPS)
document.cookie = "token=secret; secure; samesite=Strict";

HttpOnly и Secure флаги

// HttpOnly флаг — НЕВОЗМОЖНО установить из JavaScript
// Только сервер может установить при отправке ответа

// Set-Cookie: sessionId=abc123; HttpOnly; Path=/
// Результат: JavaScript НЕ может прочитать этот cookie
// console.log(document.cookie) // не содержит sessionId
// Но сервер получит его в Cookie: sessionId=abc123

// ПРЕИМУЩЕСТВА HttpOnly:
// - Защита от XSS атак (JavaScript не может украсть cookie)
// - Используется для аутентификации и чувствительных данных

// Secure флаг
// Set-Cookie: token=value; Secure; Path=/
// Cookie отправляется ТОЛЬКО по HTTPS, не по HTTP

SameSite атрибут (защита от CSRF)

// SameSite=Strict (самый строгий)
// Cookie отправляется ТОЛЬКО на тот же сайт
// Даже переход по ссылке с другого сайта не отправит cookie

// SameSite=Lax (по умолчанию в современных браузерах)
// Cookie отправляется:
// - При запросах с того же сайта
// - При переходе по ссылкам (GET запросы)
// - НО НЕ при POST/PUT/DELETE с другого сайта

// SameSite=None (требует Secure flag)
// Cookie отправляется всегда
// Нужен для cross-origin requests (API от другого домена)
// Set-Cookie: token=value; SameSite=None; Secure

// ПРИМЕР CSRF атаки БЕЗ SameSite:
// 1. Юзер залогинен на bank.com (есть sessionId cookie)
// 2. Юзер открывает malicious.com
// 3. malicious.com отправляет POST к bank.com/transfer
// 4. Браузер автоматически отправляет sessionId cookie
// 5. Перевод денег выполняется от имени юзера!

// РЕШЕНИЕ: Set-Cookie: sessionId=abc; SameSite=Lax
// Теперь malicious.com не может отправить POST с cookie

Практические примеры использования

// АУТЕНТИФИКАЦИЯ (на практике используй HttpOnly cookies!)
// Сервер отправляет:
// Set-Cookie: authToken=eyJhbGc...; HttpOnly; Secure; SameSite=Strict; Max-Age=86400

// Браузер автоматически отправляет при каждом запросе
fetch('https://api.example.com/user', {
  credentials: 'include' // ВАЖНО: отправлять cookies для cross-origin
})

// СОХРАНЕНИЕ НАСТРОЕК (НЕ критичные данные)
document.cookie = `theme=${selectedTheme}; max-age=${30*24*60*60}; path=/`;
document.cookie = `language=en; max-age=${30*24*60*60}; path=/`;

// ОТСЛЕЖИВАНИЕ (analytics cookies)
// Сервер может отправлять tracking cookie
// Set-Cookie: _ga=GA1.2.123456789.1234567890

Cookie vs LocalStorage vs SessionStorage

// COOKIE
// + Автоматически отправляется на сервер
// + Может быть HttpOnly (защита от XSS)
// - Ограничение размера (4 KB)
// - Отправляется с каждым запросом (overhead)
// Использовать для: аутентификация, сессии

// LocalStorage
// + Больше места (5-10 MB)
// + Не отправляется на сервер автоматически
// - Уязвим для XSS (JavaScript может прочитать)
// - Сохраняется между сессиями
// Использовать для: пользовательские настройки, тема

// SessionStorage
// + Как LocalStorage, но удаляется при закрытии вкладки
// - Не доступен между вкладками
// Использовать для: временные данные в текущей сессии

// РЕКОМЕНДАЦИЯ:
const isHttpOnly = true; // аутентификация
if (isHttpOnly) {
  // сервер отправляет Set-Cookie: token=...; HttpOnly
} else {
  // для некритичных данных используй localStorage
  localStorage.setItem('theme', 'dark');
}

Отладка Cookie в браузере

// Chrome DevTools > Application > Cookies
// Firefox DevTools > Storage > Cookies

// Или из консоли:
console.log(document.cookie);

// Все ли cookies отправляются на сервер?
// Network tab > выбрать запрос > Headers > Cookie

// Проверить флаги cookie
// Application > Cookies > выбрать cookie
// Увидишь: Name, Value, Domain, Path, Secure, HttpOnly, SameSite, Max-Age

Итог

Cookie — механизм сохранения состояния между запросами браузера и сервера:

1. Сервер отправляет Set-Cookie в ответе
2. Браузер сохраняет cookie
3. Браузер отправляет cookie с каждым запросом
4. Сервер проверяет и использует cookie

Для безопасности:

• HttpOnly — защита от XSS
• Secure — только HTTPS
• SameSite=Lax/Strict — защита от CSRF

Для некритичных данных используй localStorage вместо cookie.