Cookie: что нужно знать

Cookie придумали задолго до localStorage, но заменить их им нельзя — у них разная работа. Cookie нужны серверу: браузер молча добавляет их к каждому запросу к домену, поэтому сервер узнаёт вас уже в первом байте ответа, ещё до того как выполнится хоть одна строчка JavaScript. Именно так работает вход в аккаунт: страница приходит с сервера уже вашей.

localStorage из прошлой статьи — «localStorage и sessionStorage» — в этом смысле личный ящик клиента: сервер о нём не знает и не узнает, пока вы сами не отправите содержимое. Отсюда простое правило выбора. Данные нужны серверу на каждом запросе — cookie. Данные нужны только странице (черновик формы, выбранная тема, кэш ответа) — localStorage. И помните про цену: каждый лишний килобайт в cookie — это лишний килобайт в каждом запросе.

document.cookie выглядит как обычное свойство, но ведёт себя странно: при чтении отдаёт все cookie этой страницы одной строкой вида a=1; b=2, без сроков, путей и флагов — только пары. А при записи это не присваивание, а команда: браузер разбирает строку и добавляет или обновляет одну cookie, остальные не трогает.

В значении нельзя использовать ;, запятую, пробел и другие служебные символы, поэтому имя и значение прогоняют через encodeURIComponent, а при чтении — через decodeURIComponent. Готового парсера в браузере нет, помощник на пять строк придётся написать самому.

const read = (name) =>
  document.cookie
    .split("; ")
    .filter((pair) => pair.startsWith(name + "="))
    .map((pair) => decodeURIComponent(pair.slice(name.length + 1)))[0];

document.cookie = "theme=" + encodeURIComponent("тёмная тема") + "; path=/";
document.cookie = "lang=ru; path=/";

console.log(read("lang") === "ru");
console.log(read("theme"));
console.log(read("nope"));

const read = (name) =>
  document.cookie.split("; ").filter((pair) => pair.startsWith(name + "="))[0];

document.cookie = "a=1; path=/";
document.cookie = "b=2; path=/";
document.cookie = "a=3; path=/";

console.log(read("a") === "a=3");
console.log(read("b") === "b=2");

Строковый формат document.cookie — привет из девяностых: одна строка, которую каждый разбирает сам. Асинхронный CookieStore API уже умеет отдавать объекты без парсера, но поддержан пока не везде, так что помощник на пять строк носить с собой ещё придётся.

Без атрибутов срока cookie сеансовая: она исчезнет вместе с окном браузера. Чтобы она пережила перезапуск, добавляют max-age (сколько секунд жить, самый удобный вариант) или expires (точная дата в формате UTC). Отрицательный или нулевой max-age удаляет cookie — другого способа удаления нет, delete тут бесполезен.

path ограничивает cookie каталогом: при path=/ она видна на всём сайте, а по умолчанию — только в каталоге текущей страницы и ниже. Почти всегда нужен path=/, и почти всегда его забывают. domain по умолчанию сужен до текущего хоста; domain=site.ru раздаёт cookie всем поддоменам, а чужой домен указать нельзя — браузер просто отбросит запись.

const has = (name) => document.cookie.split("; ").some((p) => p.startsWith(name + "="));

const month = 60 * 60 * 24 * 30;
console.log(month);

document.cookie = "visits=1; path=/; max-age=" + month;
console.log(has("visits"));

document.cookie = "visits=; path=/; max-age=0";
console.log(has("visits"));

const read = (name) =>
  document.cookie.split("; ").filter((p) => p.startsWith(name + "="))[0]?.slice(name.length + 1);

const button = document.querySelector("#pick");
const out = document.querySelector("#out");
const year = 60 * 60 * 24 * 365;

button.addEventListener("click", () => {
  document.cookie = "theme=dark; path=/; max-age=" + year;
});

button.click(); // нажимаем за пользователя
out.textContent = read("theme") === "dark" ? "тёмная" : "обычная";

console.log(read("theme"));
console.log(out.textContent);

const kill = (name, path) => name + "=; path=" + path + "; max-age=0";

console.log(kill("sid", "/admin"));
console.log(kill("sid", "/") === kill("sid", "/admin"));

Флаги — не украшения, а границы, за которые cookie не выйдет. Secure запрещает отправку по обычному http. HttpOnly прячет cookie от JavaScript целиком: её нет в document.cookie, её не украдёт чужой скрипт. SameSite решает, поедет ли cookie в запросах, которые инициировал другой сайт, — это главная защита от CSRF.

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

const has = (name) => document.cookie.split("; ").some((p) => p.startsWith(name + "="));

document.cookie = "sid=abc123; path=/; httponly";
console.log(has("sid"));

document.cookie = "sid=abc123; path=/";
console.log(has("sid"));

document.cookie = "sid=; path=/; max-age=0";
console.log(has("sid"));

const header = "sid=abc; Path=/; Max-Age=3600; HttpOnly; SameSite=Lax; Secure";
const [pair, ...attrs] = header.split("; ");

console.log(pair);
console.log(attrs.length);
console.log(attrs.includes("HttpOnly"));

Cookie не зашифрована и ничем не подписана: это просто строка на диске пользователя. Пароль в ней не хранят никогда и ни в каком виде — ни открытым текстом, ни «закодированным» в base64, потому что кодирование это не шифрование. С токеном сессии сложнее: он обязан где-то лежать, и вопрос лишь в том, дотянется ли до него посторонний код.

А дотянется он легко. Всё, что видит ваш скрипт, видит и любой другой скрипт на странице: подключённый виджет, рекламный счётчик, взломанная зависимость, вставка через XSS. Достаточно одной строки document.cookie — и токен уехал. Поэтому правильный ответ на вопрос «где хранить токен» — в cookie, которую поставил сервер с HttpOnly, Secure и SameSite: тогда браузер отправляет её сам, а JavaScript её просто не видит.

const read = (name) =>
  document.cookie.split("; ").filter((p) => p.startsWith(name + "="))[0]?.slice(name.length + 1);

// так делать не надо: токен, доступный JS
document.cookie = "token=eyJhbGciOi; path=/";

// а это уже «чужой» скрипт на той же странице
const stolen = read("token");
console.log(stolen === "eyJhbGciOi");

document.cookie = "token=; path=/; max-age=0";
console.log(read("token"));

Вторая опасность — обратная сторона удобства: раз cookie уходит автоматически, чужой сайт может заставить браузер сделать запрос к вашему серверу вместе с ней. Это CSRF, и лечится он тем же SameSite плюс отдельным токеном в форме. И последнее: не кладите в cookie персональные данные. Они уезжают на сервер с каждой картинкой и оседают в логах всех прокси по дороге.