Какие риски хранения токенов в cookies?

👨‍💻 Frontend Developer 🟠 Может встретиться 🎚️ Сложный
#JavaScript #Браузер #База JS

Краткий ответ

Хранение токенов в cookies несёт несколько рисков:

  1. XSS атаки — если есть уязвимость, злоумышленник может украсть cookie 🕵️
  2. CSRF атаки — браузер автоматически отправляет cookie, что можно использовать против пользователя 🎯
  3. Утечки через логи — cookie могут попасть в серверные логи и аналитику 📊
// ❌ Риски при хранении токенов в cookies:
// document.cookie = 'token=abc123'; // Уязвим для XSS
 
// ✅ Лучше — использовать HttpOnly + Secure + SameSite
// Set-Cookie: token=abc123; HttpOnly; Secure; SameSite=Strict

Полный ответ

Хранить токены в cookies — как хранить ключи от дома в кармане куртки. Удобно, но если куртку украдут или в кармане кто-то полезет — ключи пропадут! 🔑

Основные риски

XSS атаки (Cross-Site Scripting)

// ❌ Проблема — если сайт уязвим для XSS:
<script>
  // Злоумышленник крадёт все cookies
  const tokens = document.cookie;
  sendToEvilServer(tokens); // Отправляет токены себе
</script>
 
// Результат: украдены токены авторизации!

CSRF атаки (Cross-Site Request Forgery)

// ❌ Проблема — браузер автоматически отправляет cookies:
<img src="https://bank.com/transfer?to=evil&amount=1000" style="display:none">
 
// Если пользователь залогинен в банке, 
// браузер автоматически пришлёт cookie с токеном!
// Перевод может сработать без ведома пользователя!

Утечки через логи

// ❌ Проблема — cookie могут попасть в логи:
// Запрос: GET /api/data HTTP/1.1
// Cookie: token=abc123; user=john
 
// Теперь токен в серверных логах!
// Если логи скомпрометированы — токены украдены!

Как уменьшить риски

// ✅ Защита от XSS:
// Set-Cookie: token=abc123; HttpOnly; Secure
// JavaScript НЕ видит такую cookie!
 
// Даже при XSS атаке токен не украдут

SameSite атрибут

// ✅ Защита от CSRF:
// Set-Cookie: token=abc123; HttpOnly; Secure; SameSite=Strict
// Cookie отправляется только с запросами с того же сайта!
 
// CSRF атаки становятся невозможны

Secure флаг

// ✅ Только по HTTPS:
// Set-Cookie: token=abc123; HttpOnly; Secure
// Cookie передаётся только по защищённому соединению

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

localStorage/sessionStorage

// ✅ Альтернатива:
localStorage.setItem('token', 'abc123');
 
// ❌ Но тоже уязвим для XSS!
// Нужны дополнительные меры защиты

HTTP заголовки

// ✅ Современный подход:
// Authorization: Bearer abc123
// Токен передаётся в заголовках, не в cookie
 
// Лучше контролируется и безопаснее

Когда можно хранить в cookies

С правильными атрибутами

// ✅ Можно, если:
// Set-Cookie: token=abc123; HttpOnly; Secure; SameSite=Strict; Path=/
// - HttpOnly — защита от XSS
// - Secure — только по HTTPS  
// - SameSite — защита от CSRF
// - Path — ограничение путей

Для сессионных токенов

// ✅ Подходит для:
// - Сессионных токенов
// - Токенов обновления (refresh tokens)
// - Временных авторизаций

Частые ошибки

Хранить без защиты

// ❌ Плохо:
document.cookie = 'authToken=abc123'; // Нет защиты!
 
// ✅ Лучше:
// Set-Cookie: authToken=abc123; HttpOnly; Secure; SameSite=Strict

Смешивать подходы

// ❌ Плохо — часть токенов в cookie, часть в localStorage
// Создаёт путаницу и дополнительные риски
 
// ✅ Лучше — единый подход к хранению токенов

Простые правила

  1. XSS риск — cookies видны в JavaScript (без HttpOnly) 🕵️
  2. CSRF риск — браузер автоматически отправляет cookies 🎯
  3. Логи — cookies могут попасть в серверные логи 📊
  4. HttpOnly — скрывает от JavaScript 🛡️
  5. SameSite — защищает от CSRF 🚫
  6. Secure — только по HTTPS 🔐

Понимание рисков хранения токенов в cookies помогает создавать более безопасные приложения! 💪


Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪