Как Cookies появляются у клиента?

Как Cookies появляются у клиента?

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

Основной процесс

Когда сервер хочет отправить cookie клиенту, он использует HTTP-заголовок Set-Cookie в ответе:

// На сервере (Node.js/Express)
res.setHeader("Set-Cookie", "sessionId=abc123; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=3600");

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

// Браузер автоматически отправляет при каждом запросе
// Cookie: sessionId=abc123

Способы создания cookies

1. Серверные cookies (самый безопасный способ)

// Backend (Node.js)
res.cookie("token", "xyz789", {
  httpOnly: true,    // Недоступна для JS (защита от XSS)
  secure: true,      // Только HTTPS
  sameSite: "strict", // Защита от CSRF
  maxAge: 1000 * 60 * 60 * 24 // 24 часа
});

2. JavaScript на клиенте (менее безопасно)

// Frontend (НЕ рекомендуется для auth-токенов!)
document.cookie = "userId=123; path=/; max-age=3600";

Жизненный цикл cookies

1. Создание: Сервер отправляет Set-Cookie → браузер сохраняет
2. Хранение: Cookie хранится в памяти браузера или на диске
3. Отправка: С каждым запросом браузер автоматически добавляет заголовок Cookie
4. Истечение: Cookie удаляется по Max-Age или Expires
5. Удаление: Сервер может установить Max-Age=0 для удаления

Области действия (Scope)

Cookies можно ограничить по:

// Path — только для определённого пути
res.cookie("settings", "dark", { path: "/dashboard" });

// Domain — для определённого домена
res.cookie("analytics", "id123", { domain: ".example.com" });

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

// Strict — отправляется только при same-site запросах
res.cookie("token", "xyz", { sameSite: "strict" });

// Lax — отправляется при переходах по ссылкам (по умолчанию)
res.cookie("token", "xyz", { sameSite: "lax" });

// None — отправляется всегда (требует Secure: true)
res.cookie("tracking", "id", { sameSite: "none", secure: true });

HttpOnly атрибут (защита от XSS)

// Если HttpOnly = true, cookie недоступна через document.cookie
res.cookie("sessionId", "abc123", { httpOnly: true });

// Попытка доступа из JS вернёт пустую строку
console.log(document.cookie); // sessionId не будет здесь

Проверка и управление cookies в браузере

// Чтение доступных cookies (только не-HttpOnly)
console.log(document.cookie); // "userId=123; theme=dark"

// Создание cookie из JS
document.cookie = "userId=456; path=/; max-age=86400";

// Удаление cookie
document.cookie = "userId=; max-age=0";

Практический пример аутентификации

// Backend: создание cookie после логина
app.post("/login", (req, res) => {
  const token = generateJWT(user);
  res.cookie("authToken", token, {
    httpOnly: true,
    secure: true,
    sameSite: "strict",
    maxAge: 1000 * 60 * 60 * 24 * 7 // 7 дней
  });
  res.json({ success: true });
});

// Frontend: браузер автоматически отправляет cookie
fetch("/api/user", {
  credentials: "include" // Важно! Отправляет cookies
});

Ключевые моменты

• Браузер автоматически управляет cookies
• Сервер инициирует создание через Set-Cookie
• HttpOnly cookies скрывают от JavaScript (защита от XSS)
• Secure гарантирует передачу только по HTTPS
• SameSite защищает от CSRF-атак
• Cookies отправляются со всеми CORS запросами при credentials: "include"