Как происходит считывание данных с cookie?

Считывание данных с Cookie

Cookie - это небольшие текстовые данные, хранящиеся в браузере, которые отправляются с каждым запросом на сервер. Frontend разработчик должен знать, как их читать и управлять.

Основы Cookie

// Cookie хранит пары ключ=значение
// Формат: "name=value; expires=date; path=/; domain=.example.com; secure; samesite=strict"

// Примеры:
// sessionid=abc123def456; Path=/; HttpOnly
// theme=dark; Path=/; Expires=Wed, 09 Jun 2026 10:18:14 GMT
// user_id=12345; Path=/; SameSite=Strict; Secure

Чтение Cookie через document.cookie

// document.cookie - это строка всех доступных cookie
console.log(document.cookie);
// Результат: "theme=dark; sessionid=abc123; preferences=foo%3Dbar"

// Базовая функция для чтения одного cookie
function getCookie(name) {
  const nameEQ = name + "=";
  const cookies = document.cookie.split(';');
  
  for (let cookie of cookies) {
    cookie = cookie.trim();
    if (cookie.startsWith(nameEQ)) {
      return decodeURIComponent(cookie.substring(nameEQ.length));
    }
  }
  
  return null;
}

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

const sessionId = getCookie('sessionid');
console.log(sessionId); // "abc123"

Чтение всех Cookie сразу

// Функция для получения объекта со всеми cookie
function getAllCookies() {
  const cookies = {};
  
  if (document.cookie === '') {
    return cookies;
  }
  
  document.cookie.split(';').forEach(cookie => {
    const [name, value] = cookie.trim().split('=');
    if (name && value) {
      cookies[name] = decodeURIComponent(value);
    }
  });
  
  return cookies;
}

// Использование
const allCookies = getAllCookies();
console.log(allCookies);
// { theme: 'dark', sessionid: 'abc123', preferences: 'foo=bar' }

Установка Cookie

// Записать cookie
function setCookie(name, value, days = 7) {
  const expires = new Date();
  expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
  
  document.cookie = \`\${name}=\${encodeURIComponent(value)};     expires=\${expires.toUTCString()};     path=/;     samesite=strict\`;
}

// Использование
setCookie('theme', 'dark', 30); // на 30 дней
setCookie('user_preferences', JSON.stringify({ lang: 'ru' }));

// Результат в document.cookie:
// "theme=dark; expires=Wed, 09 Jun 2026 10:18:14 GMT; path=/; samesite=strict"

Удаление Cookie

function deleteCookie(name) {
  setCookie(name, '', -1); // expires в прошлом = удаление
}

// Использование
deleteCookie('theme');

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

// Важные флаги при установке с сервера:
const cookieFlags = {
  "HttpOnly": "Не доступно из JavaScript (безопаснее для токенов)",
  "Secure": "Передаётся только по HTTPS",
  "SameSite=Strict": "Не отправляется при cross-site запросах (CSRF защита)",
  "SameSite=Lax": "Отправляется при top-level навигации",
  "Domain": "К какому домену относится",
  "Path": "К каким путям относится"
};

// ПРОБЛЕМА: JavaScript НЕ МОЖЕТ ЧИТАТЬ HttpOnly cookie!
// Зачем? Защита от XSS атак

// Сервер установил:
// Set-Cookie: sessionid=abc123; HttpOnly; Secure

// JavaScript не может прочитать:
console.log(document.cookie); // sessionid НЕ видна!

// Но браузер автоматически отправляет её в запросах:
fetch('https://api.example.com/user', {
  credentials: 'include'  // отправляет HttpOnly cookie
});

Практический пример: аутентификация

// 1. Сервер отправляет токен в HttpOnly cookie
// Set-Cookie: token=xyz789; HttpOnly; Secure; SameSite=Strict

// 2. JavaScript не может прочитать, но браузер отправляет

// 3. Для refresh token можем использовать обычный cookie
function setTokens(accessToken, refreshToken) {
  // Access token в памяти (не видно для XSS из других скриптов)
  localStorage.setItem('accessToken', accessToken);
  
  // Или HttpOnly cookie (сервер установит)
  // Set-Cookie: accessToken=...; HttpOnly
}

// 4. Проверка аутентификации
function isAuthenticated() {
  // Попробовать прочитать обычный cookie
  const session = getCookie('sessionid');
  return session !== null;
}

// 5. Logout
function logout() {
  deleteCookie('sessionid');
  localStorage.removeItem('accessToken');
}

Работа с complex данными в Cookie

// Cookie хранит только строки
// Для объектов нужно сериализовать

function setCookieJSON(name, obj, days = 7) {
  setCookie(name, JSON.stringify(obj), days);
}

function getCookieJSON(name) {
  const value = getCookie(name);
  return value ? JSON.parse(value) : null;
}

// Использование
const userPrefs = { theme: 'dark', language: 'ru', sidebar: true };
setCookieJSON('userPrefs', userPrefs);

// Позже прочитать
const prefs = getCookieJSON('userPrefs');
console.log(prefs.theme); // "dark"

Cookie vs LocalStorage vs SessionStorage

const comparison = {
  cookie: {
    размер: "4KB",
    отправляется_с_запросами: true,
    доступна_с_js: "только если не HttpOnly",
    время_жизни: "устанавливается явно",
    защита: "HttpOnly, Secure, SameSite"
  },
  
  localStorage: {
    размер: "5-10MB",
    отправляется_с_запросами: false,
    доступна_с_js: true,
    время_жизни: "бесконечно",
    защита: "не может быть защищено от XSS"
  },
  
  sessionStorage: {
    размер: "5-10MB",
    отправляется_с_запросами: false,
    доступна_с_js: true,
    время_жизни: "до закрытия таба",
    защита: "не может быть защищено от XSS"
  }
};

Best practices

const bestPractices = [
  "Используй HttpOnly для sensitive данных (токены)",
  "Всегда используй Secure флаг для HTTPS",
  "Используй SameSite=Strict для защиты от CSRF",
  "Не логируй cookie в console",
  "Ограничивай Domain и Path",
  "Регулярно очищай старые cookie",
  "Проверяй браузер поддерживает cookie (navigator.cookieEnabled)"
];

// Проверка поддержки
if (!navigator.cookieEnabled) {
  console.warn('Cookies are disabled!');
}

Cookie - это классический, но всё ещё активно используемый механизм хранения данных. Понимание их работы и ограничений - это базовый навык.