Куки (cookies) для начинающих: как браузер запоминает сайты — просмотр и установка через консоль JS

В уроке про HTTP мы упомянули важную особенность протокола: он не хранит состояние — для сервера каждый запрос «незнакомец». Куки (cookies) — механизм, который добавляет запросам память: именно на них держатся входы на сайты, корзины интернет-магазинов и счётчики посещений.

Что такое куки

Кука — маленькая запись вида имя=значение, которую браузер хранит для конкретного сайта.

Сервер в ответе просит браузер «запомни это», используя заголовок http-запроса Set-Cookie), и дальше браузер автоматически прикладывает сохранённые куки к каждому следующему запросу к этому сайту в заголовоке http-ответа с именем Cookie).

Так сервер и узнаёт «того же самого» посетителя (т.е. из-за того, что браузер, который поддерживает механизм куков добавляем ранее установленные и всё еще актуальные куки, к каждому последующему запросу на тот же сайт).

Смотрим куки

Самый наглядный способ — Инструменты разработчика: вкладка Application (в Firefox — Storage), раздел Cookies. Там видно имя, значение и срок жизни каждой куки текущего сайта.

А из консоли JS (F12 → Console) все куки сайта возвращаются одной командой:

document.cookie
// "theme=dark; visits=3"

Это обычная строка: пары «имя=значение», разделённые точкой с запятой.

Ставим и удаляем куки через консоль

Попробуйте выполнить в консоли:

document.cookie = "visits=1"; // поставить или заменить
document.cookie = "visits=2; max-age=3600"; // на час
document.cookie = "visits=; max-age=0"; // удалить

А теперь проверка: поставьте куку, обновите страницу и снова выполните document.cookie — значение сохранилось. Вы только что руками сделали то, что обычно просит делать сервер: браузер запомнил данные и вернул их при следующем запросе.

Срок жизни

Кука без срока — «сессионная»: она живёт, пока открыт браузер, и исчезает при закрытии. Срок задаётся при установке: max-age=3600 (секунды) или expires с датой окончания.

Чьи это куки

Куки привязаны к домену: сайт example.com не видит куки сайта other.com. Но физически записи хранятся на компьютере посетителя — а значит, их можно посмотреть, изменить или удалить, что вы и делали в консоли.

Можно ли верить кукам

Значениям кук нельзя доверять вслепую: их мог изменить сам посетитель. Поэтому в куках не хранят секретных данных.

Для важных кук существует флаг HttpOnly — такую куку браузер по-прежнему прикладывает к запросам, но из JavaScript она не видна. Именно поэтому иногда в консоли видно меньше кук, чем реально уходит с запросами (посмотреть все можно на вкладке Network у конкретного запроса).

Контрольные вопросы

1. Почему сервер, получив новый запрос по HTTP, не может сам понять, что этот посетитель уже приходил?
2. Какими заголовками куки путешествуют между сервером и браузером — и в каких направлениях?
3. Чем «сессионная» кука отличается от куки со сроком жизни, и что происходит с каждой при закрытии браузера?
4. Какой командой в консоли JS можно увидеть все куки текущего сайта? В каком виде они возвращаются?
5. Как удалить одну куку, не трогая остальные?
6. Может ли сайт example.com прочитать куки сайта other.com? Почему?
7. Почему значениям кук нельзя доверять без проверки, и что это значит для хранения в них данных?
8. Из-за чего некоторые куки не видны через document.cookie, хотя реально отправляются с запросами?