> Можно ли работать с куки на фронтенде через JavaScript (JavaScript)

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

Да, с фронтенда можно читать и создавать куки через document.cookie, но установка httpOnly-кук недоступна. Для удаления куки нужно выставить прошлую дату. Современный API - CookieStore (ещё не везде). Основные ограничения: нет доступа к httpOnly-кукам, куки привязаны к домену/пути, размер ограничен ~4 КБ. Для сложных сценариев (кросс-домен, SameSite) лучше управлять куками на сервере.

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

document.cookie - это строка всех не-httpOnly кук текущего домена. Чтение возвращает все куки в формате key=value; key2=value2. Запись перезаписывает конкретную куку по имени: document.cookie = "name=value; path=/; max-age=3600". Удаление - установка max-age=0 или expires в прошлое.

Ограничения:

• httpOnly-куки не видны и не изменяемы из JS (защита от XSS).
• SameSite атрибут (Strict/Lax/None) влияет на отправку кук с кросс-доменными запросами, но не на чтение через document.cookie.
• Secure-куки доступны только через HTTPS.
• Размер куки ограничен ~4 КБ на имя+значение.
• Куки привязаны к домену, пути и схеме (HTTP/HTTPS).

Современный CookieStore API (Chrome 87+) предоставляет асинхронные методы get(), set(), delete() и события изменения кук, но пока не стандартизирован во всех браузерах.

На практике

Для чтения кук на фронтенде используйте document.cookie с парсингом строки. Для установки - задавайте атрибуты path, domain, max-age/expires, secure, samesite. Никогда не храните чувствительные данные (токены, сессии) в куках, доступных через JS - используйте httpOnly.

Типичный сценарий: кука для A/B теста или языка интерфейса. Для авторизации - только httpOnly-куки с сервера. Если нужно передать токен на фронтенд, используйте заголовки или localStorage (с осторожностью).

Помните про SameSite: если ваш фронтенд делает запросы на другой домен, куки с SameSite=Lax не отправятся. Для кросс-доменных запросов нужен SameSite=None; Secure.

Пример кода

JAVASCRIPT
// Чтение всех кук
function getCookies() {
  return document.cookie.split('; ').reduce((acc, cookie) => {
    const [name, ...rest] = cookie.split('=');
    acc[name] = decodeURIComponent(rest.join('='));
    return acc;
  }, {});
}

// Установка куки с параметрами
function setCookie(name, value, days = 7, path = '/') {
  const expires = new Date(Date.now() + days * 864e5).toUTCString();
  document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; expires=${expires}; path=${path}; SameSite=Lax`;
}

// Удаление куки
function deleteCookie(name, path = '/') {
  document.cookie = `${encodeURIComponent(name)}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=${path}`;
}

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

Начните с прямого ответа: да, через document.cookie. Сразу уточните про httpOnly - это ключевое ограничение. Приведите примеры: чтение, запись, удаление. Упомяните атрибуты (path, domain, secure, samesite) и их влияние. Если спросят про безопасность, объясните, почему нельзя хранить токены в JS-доступных куках (XSS). Для уровня senior добавьте про CookieStore, его преимущества и статус поддержки.

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

• Понимание разницы между httpOnly и обычными куками.
• Знание атрибутов кук и их влияния на безопасность и поведение.
• Умение парсить и формировать строку кук вручную.
• Осведомлённость о современных API (CookieStore) и их ограничениях.
• Понимание сценариев, когда куки не подходят (размер, кросс-домен, SameSite).

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

• Утверждение, что куки нельзя читать из JS вообще (не учитывают httpOnly).
• Попытка удалить куку без указания path (кука не удалится, если путь не совпадает).
• Использование document.cookie = value без кодирования спецсимволов (точка с запятой, пробел).
• Хранение чувствительных данных (токенов) в куках без httpOnly.
• Игнорирование SameSite при кросс-доменных запросах - кука не отправится.