> Можно ли читать cookies из клиентского JavaScript (JavaScript)

Уровень: senior · Роль: frontend · Категория: Технические вопросы

Компании: IT-One

Стек: JavaScript

> Пример ответа

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

Да, JavaScript может читать cookies через document.cookie, но только те, у которых не установлен флаг HttpOnly. Этот флаг запрещает доступ к cookie из клиентского кода. Cookies без HttpOnly доступны для чтения и модификации, что создаёт риски XSS-атак. Для безопасной работы с cookies на клиенте рекомендуется использовать HttpOnly для чувствительных данных и альтернативные механизмы хранения (например, localStorage с шифрованием) для остального.

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

Механизм document.cookie предоставляет строку со всеми cookies текущего домена, разделёнными точкой с запятой. Однако доступны только те, у которых нет атрибута HttpOnly. Этот атрибут устанавливается сервером при создании cookie и предотвращает любой доступ из JavaScript (чтение, запись, удаление). Cookies с HttpOnly передаются только в HTTP-запросах.

Важно понимать, что document.cookie возвращает все доступные cookies как одну строку, поэтому для работы с ними требуется парсинг. Также стоит учитывать ограничения по размеру (обычно 4 КБ на cookie) и количеству (около 50 на домен).

Флаг Secure дополнительно ограничивает передачу cookie только по HTTPS, но не влияет на доступ из JavaScript. Флаг SameSite контролирует отправку cookie в кросс-доменных запросах, но также не блокирует клиентский доступ.

На практике

В реальных проектах чтение cookies из JavaScript используется редко из-за соображений безопасности. Основные сценарии:

Хранение некритичных данных (например, тема оформления, язык интерфейса)
A/B тестирование (идентификатор эксперимента)
Аналитика (идентификатор сессии без чувствительных данных)

Для аутентификации и авторизации всегда используйте HttpOnly cookies - это стандартная практика. Если нужно хранить данные на клиенте, рассмотрите localStorage (до 5-10 МБ) или sessionStorage (для временных данных). Для чувствительных данных используйте шифрование на клиенте или серверное хранение.

Пример кода

JAVASCRIPT
// Чтение всех cookies
const allCookies = document.cookie;
console.log(allCookies); // "theme=dark; sessionId=abc123"

// Функция для получения значения конкретной cookie
function getCookie(name) {
  const cookies = document.cookie.split('; ');
  for (const cookie of cookies) {
    const [key, value] = cookie.split('=');
    if (key === name) return decodeURIComponent(value);
  }
  return null;
}

// Использование
const theme = getCookie('theme'); // "dark"

// Запись cookie (если нет HttpOnly)
document.cookie = 'theme=light; path=/; max-age=86400';

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

Начните с прямого ответа "да, можно, но с ограничениями". Объясните разницу между HttpOnly и обычными cookies. Приведите примеры, когда это безопасно (тема, язык) и когда нет (токены). Упомяните альтернативы (localStorage, sessionStorage) и их ограничения. Если спросят про безопасность, расскажите про XSS и почему HttpOnly - базовая защита.