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

Что такое HttpOnly Cookies?

2.0 Middle🔥 112 комментариев
#JavaScript Core#Браузер и сетевые технологии

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

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

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

HttpOnly Cookies

HttpOnly Cookies — это специальный флаг безопасности для cookies, который предотвращает доступ к cookie через JavaScript. Это критически важная практика для защиты от XSS-атак (Cross-Site Scripting).

Как это работает

Когда cookie установлена с флагом HttpOnly, она доступна только при HTTP-запросах (GET, POST и т.д.), но НЕ доступна через document.cookie в JavaScript. Даже если злоумышленник внедрит вредоносный скрипт на страницу, он не сможет украсть токены аутентификации или другие чувствительные данные.

Установка HttpOnly Cookies

На бэкенде (например, Node.js/Express):

res.cookie("authToken", token, {
  httpOnly: true,      // Флаг HttpOnly
  secure: true,        // Только через HTTPS
  sameSite: "strict",  // Защита от CSRF
  maxAge: 3600000      // 1 час
});

На фронтенде (TypeScript/Next.js):

// ОШИБКА: Невозможно прочитать HttpOnly cookie!
const token = document.cookie; // Вернёт пустую строку или другие cookies

// ПРАВИЛЬНО: Отправить cookie автоматически с каждым запросом
const response = await fetch("/api/user", {
  method: "GET",
  credentials: "include" // Отправляет cookies автоматически
});

Преимущества HttpOnly Cookies

  • Защита от XSS: Даже если на странице выполнится вредоносный скрипт, он не сможет украсть токен
  • Автоматическая отправка: Cookie отправляется браузером автоматически со всеми запросами к серверу
  • Прозрачность: Разработчик не должен вручную добавлять токен в заголовки

Проблемы и ограничения

Нельзя читать из JavaScript, только отправлять:

// ❌ Не сработает
const token = document.cookie; // Не включит HttpOnly cookies

// ✅ Сработает (при credentials: "include")
await fetch("/api/protected", { credentials: "include" });

CSRF-атаки: HttpOnly cookies уязвимы для CSRF, поэтому обязательно используй sameSite и CSRF-токены:

res.cookie("auth", token, {
  httpOnly: true,
  secure: true,
  sameSite: "strict" // Защита от CSRF
});

Лучшие практики

  1. Всегда используй HttpOnly для токенов аутентификации
  2. Комбинируй с Secure флагом (только HTTPS) и SameSite
  3. Не храни секреты в localStorage — это доступно для XSS
  4. Используй HTTPS в продакшене
  5. Добавляй CSRF-защиту (CSRF-токены или проверка Origin)

Сравнение методов хранения токенов

МетодXSSCSRFПростота
HttpOnly CookieЗащищенаНужна защитаПросто
localStorageУязвимаЗащищенаНужен заголовок
sessionStorageУязвимаЗащищенаНужен заголовок
MemoryЗащищенаЗащищенаСложно (теряется при перезагрузке)

Вывод: HttpOnly Cookies — это стандарт для хранения токенов аутентификации в веб-приложениях. Используй их везде, где возможно, комбинируя с другими мерами безопасности.