> Как работает HttpOnly cookie и почему к нему нельзя достучаться с JavaScript (JavaScript)

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

HttpOnly - это флаг cookie, который запрещает доступ к ней из JavaScript через document.cookie. Браузер продолжает автоматически отправлять такую cookie с каждым HTTP-запросом к домену, но скрипты на странице не могут её прочитать или изменить. Это защита от XSS-атак: даже если злоумышленник внедрит скрипт, он не получит доступ к сессионной cookie.

Подробное объяснение

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

Механизм работы:

• Сервер отправляет Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Lax
• Браузер сохраняет cookie с пометкой "http-only"
• При следующем запросе браузер автоматически добавляет Cookie: sessionId=abc123
• JavaScript на странице при вызове document.cookie видит только не-HttpOnly cookie

Почему нельзя достучаться: это архитектурное ограничение на уровне браузера. Свойство document.cookie - это геттер, который возвращает только те cookie, у которых нет флага HttpOnly. Сама cookie физически хранится в отдельной области, изолированной от JavaScript-окружения. Даже через DevTools можно увидеть HttpOnly cookie в панели Application, но не через консоль.

Важно понимать: HttpOnly не защищает от всех угроз. Она бесполезна против CSRF-атак, потому что браузер всё равно отправляет cookie автоматически. Также она не защищает от кражи через поддельные формы или социальную инженерию. Её единственная задача - закрыть вектор кражи сессии через XSS.

На практике

На фронтенде вы не управляете HttpOnly cookie напрямую - это серверная ответственность. Ваша задача - корректно обрабатывать ответы сервера и не пытаться читать такие cookie через document.cookie. Если вам нужно знать, авторизован ли пользователь, используйте отдельный эндпоинт или не-HttpOnly cookie с флагом-индикатором (например, isLoggedIn=true), но никогда не кладите туда чувствительные данные.

При работе с fetch или axios помните: HttpOnly cookie отправляются автоматически, если credentials: 'include' (для кросс-доменных запросов) или same-origin по умолчанию. Вам не нужно добавлять их вручную.

Для отладки используйте вкладку Application → Cookies в DevTools - там видно, какие cookie имеют флаг HttpOnly. В консоли document.cookie покажет только не-HttpOnly.

Пример кода

JAVASCRIPT
// Серверная установка (Node.js/Express)
res.cookie('sessionId', 'abc123', {
  httpOnly: true,  // запрещает доступ из JS
  secure: true,    // только по HTTPS
  sameSite: 'lax', // защита от CSRF
  maxAge: 3600000  // 1 час
});

// Попытка чтения из JS - вернёт пустую строку или другие cookie
console.log(document.cookie); // "theme=dark" - но не sessionId

// Отправка запроса - cookie уйдёт автоматически
fetch('/api/profile', { credentials: 'include' });

Как отвечать на собеседовании

Начните с определения: HttpOnly - атрибут cookie, запрещающий доступ из JavaScript. Затем объясните механизм: браузер хранит cookie отдельно, но продолжает отправлять её в HTTP-запросах. Подчеркните, что это защита от XSS, а не от CSRF. Упомяните, что установка происходит только на сервере, и фронтенд не может ни прочитать, ни изменить такую cookie. Если спросят про альтернативы - скажите, что для чтения состояния авторизации используют отдельные индикаторные cookie или API-эндпоинты.

Что проверяет интервьюер

• Понимаете ли вы разницу между HttpOnly и обычной cookie
• Знаете ли вы, что HttpOnly не защищает от CSRF
• Понимаете ли вы, что установка происходит на сервере, а не на клиенте
• Знаете ли вы, как браузер обрабатывает такие cookie в запросах
• Понимаете ли вы ограничения: нельзя прочитать через document.cookie, но можно увидеть в DevTools

Типичные ошибки

• Утверждение, что HttpOnly cookie нельзя отправить с запросом - это неверно, отправляется автоматически
• Смешивание HttpOnly с Secure или SameSite - это разные атрибуты с разными целями
• Попытка установить HttpOnly через JavaScript - невозможно, только через Set-Cookie от сервера
• Утверждение, что HttpOnly защищает от CSRF - это не так, для этого нужен SameSite или CSRF-токены
• Мнение, что HttpOnly полностью защищает от кражи сессии - защищает только от XSS-вектора, но не от других атак