frontend-docs/docs/browser/07-cookie.md

sidebar_position

sidebar_position
7

Cookie

Файлы cookie используются веб-сайтами для хранения небольших объемов данных прямо в браузере пользователя. Они играют важную роль в авторизации, отслеживании сессий, персонализации и аналитике.

• Cookie – это простой способ хранить данные между запросами.
• JavaScript может управлять ими через document.cookie.
• Используются для авторизации, сессий, настроек, трекинга.
• Осторожно: Если не защищены (Secure, HttpOnly, SameSite), могут быть украдены через XSS.

Как работают cookie в браузере?

Когда вы заходите на сайт, сервер может отправить HTTP-заголовок Set-Cookie, и браузер сохранит эту информацию. При последующих запросах к тому же сайту браузер автоматически отправляет cookie обратно на сервер в заголовке Cookie.

HTTP/1.1 200 OK
Set-Cookie: session_id=abc123; Path=/; Expires=Wed, 30 May 2025 12:00:00 GMT

Теперь при каждом запросе к этому домену браузер будет отправлять:

GET /profile HTTP/1.1
Cookie: session_id=abc123

JavaScript и работа с cookie

JavaScript может читать, создавать, изменять и удалять cookie через свойство document.cookie.

📌 Чтение всех cookie

console.log(document.cookie);  
// Выведет строку вида "name=value; name2=value2"

📌 Установка новой cookie

document.cookie = "username=John; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

Параметры:

• expires – срок действия (если не указать, cookie удалится при закрытии браузера).
• max-age – время жизни в секундах (альтернатива expires).
• path=/ – на каких страницах доступна cookie (по умолчанию текущий путь).
• domain – для какого домена (по умолчанию текущий).
• secure – передавать только по HTTPS.
  • Cookie отправляется только через зашифрованное соединение (HTTPS).
  • При HTTP-запросах cookie не будет отправлено.
  • 🔥 Чтобы защитить cookie от перехвата через незашифрованные соединения (MITM-атаки).
• HttpOnly - Запрещает доступ к cookie из JavaScript
  • Cookie доступно только серверу (через HTTP-заголовки).
  • JS-код не сможет прочитать, изменить или удалить cookie.
  • 🔥 Чтобы защитить cookie от кражи при XSS-атаках.
• samesite – защита от CSRF (Strict, Lax, None).
  • Strict — cookie отправляется только при переходе в пределах одного сайта.
  • Lax — cookie отправляется при некоторых межсайтовых переходах, например, при переходе по ссылке (GET-запросы).
  • None — cookie отправляется всегда, даже с других сайтов, но требует флага Secure.
  • 🔥 Чтобы предотвратить CSRF-атаки — когда сайт пытается заставить пользователя отправить запрос на другой домен, используя его авторизационные cookie.

Параметр	Назначение	Защищает от
Secure	Отправлять cookie только по HTTPS	Перехват cookie (MITM)
HttpOnly	Запретить доступ из JavaScript	XSS
SameSite	Контролировать межсайтовую отправку cookie	CSRF

💡 Пример безопасного cookie

Set-Cookie: sessionId=abc123; Secure; HttpOnly; SameSite=Strict

Такой cookie:

• Не будет передан по HTTP,
• Не доступен через JS,
• Не будет отправлен при запросах с других сайтов.

📌 Изменение cookie Просто перезапишите её с тем же именем:

document.cookie = "username=Anna; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

📌 Удаление cookie Установите **expires** в прошлое:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Примеры использования cookie в JS

🔹 Сохранение авторизации

// После успешного входа
document.cookie = `auth_token=${token}; max-age=3600; path=/; secure`;

🔹 Запоминание пользовательских настроек

// Сохраняем тему
document.cookie = "theme=dark; max-age=2592000"; // 30 дней

// Читаем тему
const cookies = document.cookie.split(';').map(c => c.trim());
const themeCookie = cookies.find(c => c.startsWith('theme='));
const theme = themeCookie ? themeCookie.split('=')[1] : 'light';

🔹 Корзина покупок

// Добавление товара
let cart = JSON.parse(localStorage.getItem('cart') || '[]');
cart.push({ id: 123, name: "Phone" });
document.cookie = `cart=${JSON.stringify(cart)}; max-age=86400`;

Ограничения cookie

• Размер: Обычно до 4 КБ на cookie.
• Количество: Зависит от браузера (~50 на домен).
• Доступ: Только для своего домена (если не указан domain).
• Безопасность: Уязвимы к XSS, если не стоит HttpOnly (тогда JS не сможет читать).

Альтернативы cookie

• localStorage / sessionStorage – больше места (5-10 МБ), но не отправляются на сервер автоматически.
• JWT (JSON Web Tokens) – для авторизации без куки.
• IndexedDB – для хранения больших объемов данных.

🚀 Источник: DeepSeek
🚀 Источник: Cookies. Все, что нужно знать о Cookies: Настройка, Использование и Безопасность