Как работают cookie в рамках HTTP-протокола?

Как работают Cookie в HTTP-протоколе

Cookie - это механизм сохранения состояния в протоколе HTTP, который по умолчанию stateless. Cookies позволяют серверу отправить данные на клиент, и клиент будет отправлять эти данные обратно с каждым запросом.

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

1. Создание Cookie на сервере

Сервер отправляет заголовок Set-Cookie в ответе:

HTTP/1.1 200 OK
Content-Type: application/json
Set-Cookie: sessionId=abc123; Path=/; HttpOnly; Secure; SameSite=Strict; Max-Age=3600

{"status": "ok"}

2. Хранение Cookie на клиенте

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

GET /api/user HTTP/1.1
Host: example.com
Cookie: sessionId=abc123

3. JavaScript доступ к Cookie

// Чтение всех cookies
console.log(document.cookie);
// Результат: "sessionId=abc123; userId=456"

// Установка cookie с JavaScript
document.cookie = "username=john; path=/; max-age=3600";

// Удаление cookie (установка max-age=0)
document.cookie = "username=; max-age=0";

// Функция для удобного парсинга cookies
function getCookie(name) {
  const nameEQ = name + "=";
  const cookies = document.cookie.split(';');
  for (let cookie of cookies) {
    cookie = cookie.trim();
    if (cookie.startsWith(nameEQ)) {
      return cookie.substring(nameEQ.length);
    }
  }
  return null;
}

const sessionId = getCookie('sessionId');
console.log(sessionId); // "abc123"

Атрибуты Cookie

Max-Age и Expires

Set-Cookie: token=xyz789; Max-Age=86400
Set-Cookie: token=xyz789; Expires=Wed, 02 Apr 2027 10:00:00 GMT

• Max-Age: время жизни в секундах (приоритет выше Expires)
• Expires: абсолютная дата удаления
• Без обоих: session cookie (удаляется при закрытии браузера)

Domain и Path

// Cookie для example.com будет отправлена подоменам
Set-Cookie: id=123; Domain=example.com; Path=/

// Path - URL префикс где доступна cookie
Set-Cookie: admin=true; Path=/admin; // только для /admin/*

// Проверка доступности в JavaScript
function canAccessCookie(domain, path) {
  // Браузер автоматически проверяет
  // JavaScript может установить только для текущего домена
}

HttpOnly и Secure

Set-Cookie: token=abc123; HttpOnly; Secure

• HttpOnly: недоступна JavaScript, только HTTP запросы
• Secure: передается только по HTTPS

// С HttpOnly cookie будут в запросах, но не в document.cookie

// Попытка установить с JavaScript игнорируется для HttpOnly
// (только сервер может установить HttpOnly)
document.cookie = "token=123; HttpOnly"; // Не сработает

SameSite

Set-Cookie: session=token; SameSite=Strict
Set-Cookie: session=token; SameSite=Lax
Set-Cookie: session=token; SameSite=None; Secure

• Strict: cookie только при same-site запросах
• Lax: для cross-site только в safe методах (GET, не POST)
• None: везде, но требует Secure

// Пример CSRF атаки без SameSite
// На site-b.com:
<img src="https://bank.com/transfer?amount=1000&to=attacker" />
// Cookie автоматически отправится - CSRF!

// С SameSite=Strict cookie не отправится

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

Сервер (Node.js/Express)

app.post('/login', (req, res) => {
  const user = authenticateUser(req.body);
  
  const token = generateToken(user);
  
  res.cookie('authToken', token, {
    httpOnly: true,     // Безопасность
    secure: true,       // HTTPS only
    sameSite: 'strict', // CSRF защита
    maxAge: 3600000,    // 1 час
    path: '/'           // Весь сайт
  });
  
  res.json({ success: true });
});

app.get('/protected', (req, res) => {
  const token = req.cookies.authToken;
  
  if (!token || !verifyToken(token)) {
    return res.status(401).json({ error: 'Unauthorized' });
  }
  
  res.json({ data: 'sensitive' });
});

Клиент (Frontend)

// Отправка запроса с cookies
fetch('/api/user', {
  method: 'GET',
  credentials: 'include' // Критично! Отправляет cookies
})
.then(res => res.json())
.then(data => console.log(data));

// При XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.withCredentials = true; // Отправляет cookies
xhr.open('GET', '/api/user');
xhr.send();

// Axios
import axios from 'axios';

const instance = axios.create({
  withCredentials: true // Отправляет cookies
});

instance.get('/api/user').then(res => console.log(res.data));

Cross-Origin и Cookies (CORS)

// Запрос к другому домену с cookies
fetch('https://api.example.com/data', {
  method: 'GET',
  credentials: 'include', // Отправляем cookies
  headers: {
    'Content-Type': 'application/json'
  }
});

// Сервер должен разрешить:
Response.set('Access-Control-Allow-Origin', 'https://mysite.com');
Response.set('Access-Control-Allow-Credentials', 'true');
// Нельзя использовать * для Allow-Origin с credentials!

Работа с несколькими cookies

// Установка нескольких cookies
function setCookies(cookieData) {
  Object.entries(cookieData).forEach(([key, value]) => {
    document.cookie = `${key}=${value}; path=/; max-age=3600`;
  });
}

// Парсинг всех cookies
function getAllCookies() {
  return document.cookie.split('; ').reduce((acc, cookie) => {
    const [key, value] = cookie.split('=');
    acc[key] = value;
    return acc;
  }, {});
}

const cookies = getAllCookies();
console.log(cookies);

Проблемы безопасности и решения

// Проблема: XSS может украсть cookies
// Решение: HttpOnly флаг (только сервер может установить)
Set-Cookie: token=abc; HttpOnly; Secure

// Проблема: CSRF атаки
// Решение: SameSite флаг
Set-Cookie: session=xyz; SameSite=Strict

// Проблема: передача по HTTP
// Решение: Secure флаг
Set-Cookie: token=abc; Secure

// Проблема: утечка при перехвате трафика
// Решение: HTTPS + Secure флаг

Сравнение способов хранения данных

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

• Cookies автоматически отправляются при каждом запросе на домен
• HttpOnly cookies недоступны для JavaScript
• Используйте Secure, SameSite и HttpOnly для безопасности
• credentials: 'include' в fetch для cross-origin cookies
• SameSite=Strict защищает от CSRF атак