Что такое Cookies в контексте веб-разработки?

Question

Что такое Cookies в контексте веб-разработки?

Тип вопроса: Сети Вероятность: 24% Категория: PHP Разработчик

Ответ

Cookies (куки) — это небольшие фрагменты данных, которые сервер отправляет браузеру пользователя с помощью HTTP-заголовка Set-Cookie. Браузер сохраняет их локально и автоматически отправляет обратно на сервер с каждым последующим запросом к соответствующему домену. Это основной механизм для поддержания состояния (state) в протоколе HTTP, который по своей природе является stateless.

Основные сценарии использования:

Аутентификация и сессии: Хранение идентификатора сессии (Session ID).
Персонализация: Сохранение пользовательских предпочтений (например, тема, язык).
Отслеживание: Аналитика и таргетированная реклама.

Ключевые атрибуты cookie, задаваемые сервером:

name и value: Ключ и данные.
expires / max-age: Срок жизни. Без них cookie становится "сессионным" и удаляется при закрытии браузера.
domain и path: Определяют, к каким запросам cookie будет прикрепляться.
secure: Cookie будет отправлен только по защищённому протоколу HTTPS.
httponly: Запрещает доступ к cookie через JavaScript (document.cookie), что критически важно для защиты от XSS-атак.
samesite: Защищает от CSRF-атак, ограничивая отправку cookie при межсайтовых запросах. Значения: Strict, Lax, None.

Пример работы на стороне сервера (Node.js/Express):

// Установка cookie
res.cookie('user_token', 'abc123xyz', {
    maxAge: 24 * 60 * 60 * 1000, // 1 день
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    sameSite: 'lax'
});

// Чтение cookie из входящего запроса
const userToken = req.cookies.user_token;

// Удаление cookie
res.clearCookie('user_token');

Важные ограничения:

Максимальный размер одного cookie — обычно 4 КБ.
Браузеры ограничивают количество cookie на один домен (обычно около 50).
Для хранения больших объёмов данных на клиенте следует использовать localStorage или sessionStorage.

Ответ 18+ 🔞

А, куки! Ну, классика жанра, ёпта. Представь себе: HTTP — он как тот забывчивый полупидор, который вообще нихуя не помнит, кто ты такой, от запроса к запросу. А тут приходят эти мелкие бумажки-напоминалки — куки. Сервер такой: «На, браузер, держи эту бумажку (Set-Cookie), и в следующий раз, когда ко мне приползёшь, сунь её мне обратно, а то я тебя не узнаю». Браузер послушно кладёт её в карман и таскает с собой везде, куда скажут.

Зачем они, эти бумажки, вообще нужны?

Чтобы входить под своим именем. Самый частый случай — в них лежит волшебный билетик (Session ID), по которому сервер тебя опознаёт. Без него ты каждый раз как новый, нихуя нельзя.
Чтобы помнили твои причуды. Любишь тёмную тему или сайт на татарском? Сохранят в куку — и в следующий раз подстроятся. Удобно, бля.
Чтобы следить за тобой. Ну, это уже тёмная сторона, для аналитики и рекламы, чтобы показывать тебе объявления про те самые кроссовки, на которые ты вчера слюной брызгал.

А что там можно на этих бумажках написать? (Атрибуты) Сервер не просто пишет «Вася», он ещё и инструкции оставляет:

name и value: Ну, ключ и значение. user=vasya, чё уж там.
expires / max-age: Срок годности. Если не указать — бумажка «сессионная», и браузер её выкинет, как только ты его закроешь. Как будто её и не было.
domain и path: Где эту бумажку показывать. Чтобы кука с domain=.site.com не лезла со своим ебало на admin.site.com, если не надо.
secure: Жёсткое требование: «Передавай эту бумажку только по секретному каналу (HTTPS), а то подслушают!»
httponly: Суперважная защита. Это как «Только для сервера». JavaScript на странице (document.cookie) к ней не подкопытится, что спасает от всяких XSS-атак. Без этого — просто пиздец, доверия к такой куке ноль.
samesite: Защита от поддельных запросов (CSRF). Может быть строгой (Strict), умеренной (Lax) или никакой (None). Lax — это золотая середина, обычно её и ставят.

Вот как это выглядит в коде (Node.js/Express):

// Сервер выдаёт тебе пропуск
res.cookie('user_token', 'abc123xyz', {
    maxAge: 24 * 60 * 60 * 1000, // Живёт сутки
    httpOnly: true, // Руками не трогать!
    secure: process.env.NODE_ENV === 'production', // В продакшене только по HTTPS
    sameSite: 'lax' // Умеренный режим
});

// Сервер читает твой пропуск, когда ты приходишь
const userToken = req.cookies.user_token;

// Сервер рвёт твой пропуск (логаут)
res.clearCookie('user_token');

Но и тут, конечно, есть свои грабли:

Размер. Одна кука — это не склад данных. Максимум ~4 КБ, а то и меньше. Хочешь хранить «Войну и мир» — иди в localStorage.
Количество. Браузеры тоже не дураки, они говорят: «Слушай, дружок, больше 50 бумажек на один домен я держать не буду, прости». Так что плодить их без меры — плохая идея.
Для больших данных — не сюда. Серьёзно, если нужно много и надолго — localStorage или sessionStorage твои лучшие друзья. Куки — для служебных записочек, а не для архива.

Короче, инструмент простой, но если его настроить криво — будет вам хиросима, а не авторизация. Главное — httpOnly и secure не забывать, ёпта.