Как браузер может взаимодействовать с Cookies?

Как браузер может взаимодействовать с Cookies?

Что такое Cookies

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

Установка Cookies

От сервера (через заголовок Set-Cookie)

Когда сервер отправляет ответ, он может указать браузеру установить cookie:

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

Браузер автоматически сохранит это и отправит с следующими запросами.

Из JavaScript

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

// С параметрами
document.cookie = 'sessionId=abc123; path=/; max-age=3600; secure; samesite=Strict';

// Функция для удобства
function setCookie(name, value, options = {}) {
  const defaults = {
    path: '/',
    'max-age': 3600,
    secure: window.location.protocol === 'https:',
    samesite: 'Lax'
  };
  
  const settings = { ...defaults, ...options };
  const cookie = `${name}=${value}`;
  const params = Object.entries(settings)
    .map(([k, v]) => `${k}=${v}`)
    .join('; ');
  
  document.cookie = `${cookie}; ${params}`;
}

// Использование
setCookie('theme', 'dark', { 'max-age': 7 * 24 * 3600 });

Чтение Cookies

// Получить все cookies как строку
console.log(document.cookie);
// Результат: "username=john; sessionId=abc123; theme=dark"

// Парсить и получить конкретный cookie
function getCookie(name) {
  const cookies = document.cookie
    .split('; ')
    .reduce((acc, cookie) => {
      const [key, value] = cookie.split('=');
      acc[key] = decodeURIComponent(value);
      return acc;
    }, {});
  
  return cookies[name];
}

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

Удаление Cookies

// Установить max-age в 0 (или прошедшее время)
function deleteCookie(name) {
  document.cookie = `${name}=; max-age=0; path=/`;
}

deleteCookie('theme');

Типы и параметры Cookies

Session Cookies

// Удаляется при закрытии браузера
document.cookie = 'sessionToken=xyz789';

Persistent Cookies

// Хранится заданное время
setCookie('rememberMe', 'true', {
  'max-age': 30 * 24 * 3600 // 30 дней
});

Параметры Cookie

// max-age — время жизни в секундах
setCookie('token', 'abc', { 'max-age': 3600 }); // 1 час

// expires — время истечения (предпочитай max-age)
setCookie('token', 'abc', { expires: new Date('2026-12-31') });

// path — доступен только для этого пути
setCookie('admin', 'true', { path: '/admin' });

// domain — доступен для подмена
setCookie('shared', 'value', { domain: '.example.com' });

// secure — отправляется только по HTTPS
setCookie('token', 'abc', { secure: true });

// httponly — недоступен из JavaScript (только сервер)
// Set-Cookie: token=abc; HttpOnly (можно установить только с сервера)

// samesite — защита от CSRF
// Strict — отправляется только для same-site запросов
// Lax — отправляется при переходе с другого сайта
// None — отправляется для всех (нужен Secure)
setCookie('tracking', '123', { samesite: 'None', secure: true });

Автоматическая отправка с запросами

Браузер автоматически отправляет соответствующие cookies со всеми HTTP(S) запросами:

// fetch отправляет cookies автоматически (если same-site)
const response = await fetch('/api/user');
// Браузер отправляет: Cookie: sessionId=abc123; theme=dark

// Для cross-origin запросов нужен credentials
const response = await fetch('https://api.example.com/data', {
  credentials: 'include' // отправляет cookies
});

// С axios
axios.defaults.withCredentials = true;
const data = await axios.get('/api/user');

Пример: Авторизация через Cookies

// 1. Логин (сервер устанавливает cookie)
async function login(email, password) {
  const response = await fetch('/api/auth/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    credentials: 'include',
    body: JSON.stringify({ email, password })
  });
  
  // Сервер ответил: Set-Cookie: sessionId=xyz; HttpOnly; Secure
  // Браузер автоматически сохранил cookie
  
  return response.json();
}

// 2. Все последующие запросы отправляют cookie
async function getProfile() {
  const response = await fetch('/api/profile', {
    credentials: 'include' // браузер отправит Cookie: sessionId=xyz
  });
  return response.json();
}

// 3. Логаут (сервер инвалидирует cookie)
async function logout() {
  await fetch('/api/auth/logout', {
    method: 'POST',
    credentials: 'include'
  });
  // Сервер ответил: Set-Cookie: sessionId=; Max-Age=0
  // Cookie удален
}

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

HttpOnly флаг

// JavaScript не может прочитать
document.cookie = 'token=abc; HttpOnly'; // ошибка

// Защита от XSS атак
// Но может быть установлен только сервером!

Secure флаг

// Отправляется только по HTTPS
setCookie('token', 'abc', { secure: true });

SameSite флаг

// Защита от CSRF
// Strict — только same-site
setCookie('token', 'abc', { samesite: 'Strict' });

// Lax (по умолчанию)
setCookie('token', 'abc', { samesite: 'Lax' });

// None — для cross-site (нужен Secure)
setCookie('tracking', 'xyz', { samesite: 'None', secure: true });

Third-party Cookies

// Cookies из другого домена (для отслеживания)
// <img src="https://ads.com/pixel.gif" /> // может установить cookie

// Современные браузеры блокируют по умолчанию
// Но можно явно разрешить с SameSite=None; Secure

Инструменты для отладки

// Chrome DevTools
// Application -> Cookies -> выбери домен

// В коде
console.log(document.cookie); // все cookies

// Библиотека js-cookie
import Cookies from 'js-cookie';
Cookies.set('theme', 'dark', { expires: 7 });
const theme = Cookies.get('theme');
Cookies.remove('theme');

Заключение

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

• Браузер отправляет cookies автоматически с каждым запросом
• Используй HttpOnly для токенов (защита от XSS)
• Используй Secure для HTTPS
• Используй SameSite для защиты от CSRF
• Для cross-origin требуется credentials: 'include'