Що таке cookie?

Повне пояснення

Що це і навіщо Cookie – ключовий механізм зберігання даних на стороні клієнта, що дозволяє серверу ідентифікувати користувача між запитами. Використовується для сесійної аутентифікації, персоналізації контенту та відстеження поведінки.

Ключові принципи/терміни

• Domain – домен, до якого cookie прив’язаний.
• Path – шлях, де cookie доступний.
• Expires / Max-Age – термін дії.
• Secure – передається лише по HTTPS.
• HttpOnly – недоступний через JavaScript, підвищує безпеку.

Як це працює Після встановлення cookie браузер зберігає його у вигляді рядка. При кожному HTTP‑запиті до відповідного домену браузер додає заголовок Cookie, що містить всі cookie, що відповідають домену та шляху.

Практика і реалізація (JavaScript/TypeScript)

// Встановлення cookie
function setCookie(name: string, value: string, days?: number) {
  const expires = days ? `; expires=${new Date(Date.now() + days * 864e5).toUTCString()}` : '';
  document.cookie = `${name}=${encodeURIComponent(value)}${expires}; path=/; secure`;
}

// Читання cookie
function getCookie(name: string) {
  const match = document.cookie.match(new RegExp('(?:^|; )' + name.replace(/([.$?*|{}()\[\]\\/+^])/g, '\$1') + '=([^;]*)'));
  return match ? decodeURIComponent(match[1]) : null;
}

Тестування Для unit‑тестів можна використовувати jsdom у Jest:

import { JSDOM } from 'jsdom';
const dom = new JSDOM('', { url: 'https://example.com' });
document.cookie = 'test=123';
expect(document.cookie).toContain('test=123');

Безпека і приватність

• Використовуйте HttpOnly для токенів, що не повинні бути доступними через JavaScript.
• Уникайте зберігання конфіденційних даних у cookie без шифрування.
• Після виходу користувача очищуйте cookie, встановлюючи expires у минуле.

Особливості в контексті веб‑розробки

• У Next.js 14/15 cookie можна читати на сервері через next/headers.
• У React‑приложеннях часто комбінують cookie з react-cookie або js-cookie для простішого API.

Оптимізація і типові помилки

• Не перевантажуйте cookie великими даними; розмір обмежений приблизно 4 KB.
• Уникайте дублювання cookie з однаковим ім’ям, що призводить до непередбачуваних результатів.

Диагностика

• Якщо cookie не приходить на сервер, перевірте Domain і Path.
• У Chrome DevTools вкладка Application → Cookies дозволяє переглядати значення та атрибути.

Альтернативи

• LocalStorage/SessionStorage – зберігають дані лише на стороні клієнта.
• Server‑side sessions – зберігають стан у пам’яті або базі даних, передаючи лише ID в cookie.