Как сделать cookies на сайте: безопасная схема в 2026

Сделать cookies на сайте можно двумя способами: сервер отправляет заголовок Set-Cookie, либо страница сохраняет простую настройку через JavaScript. Для входа в аккаунт нужен серверный cookie с безопасными атрибутами, а клиентский вариант подходит только для некритичных предпочтений вроде темы. Ниже вы соберёте карту cookies, настроите минимальный пример и проверите создание, отправку, отказ и удаление.

Сначала определите, зачем нужен каждый cookie

Cookie представляет собой небольшую пару имени и значения, которую браузер хранит для конкретного сайта и может отправлять серверу с последующими обращениями. Не создавайте cookie «на будущее». У каждой записи должны быть назначение, владелец, срок, область действия, способ удаления и основание для включения.

Разделите задачи до кода. Сессия входа связывает браузер с серверной записью, настройка интерфейса хранит выбор пользователя, аналитика измеряет поведение, а сторонний виджет может создавать собственные записи. Эти категории нельзя автоматически считать одинаково необходимыми.

• Имя без личных данных и понятное назначение.
• Кто устанавливает: ваш сервер, JavaScript страницы или сторонний сервис.
• Когда создаётся: сразу, после входа или после выбора человека.
• Срок жизни и событие удаления.
• Нужен ли доступ из JavaScript.
• На какие адреса и запросы cookie должен отправляться.

Правило выбора: если значение подтверждает вход или даёт доступ, создавайте его на сервере, не храните в нём секретные данные и закрывайте доступ из JavaScript. Настройку цвета или языка можно хранить на клиенте.

Создайте безопасный серверный cookie для сессии

Сервер устанавливает cookie заголовком ответа. Справочник MDN по Set-Cookie описывает атрибуты Secure, HttpOnly, SameSite, Path, Domain и Max-Age. Значение SameSite=None разрешено только вместе с Secure.

Минимальная строка для сессионного идентификатора на одном HTTPS-хосте выглядит так. Вместо примера сервер должен подставлять случайный непрозрачный идентификатор и хранить права сессии у себя. Не помещайте в cookie пароль, роль, адрес, телефон или другие данные, которым браузер не должен доверять.

Set-Cookie: __Host-session=<random-id>; Path=/; Secure; HttpOnly; SameSite=Lax

Префикс __Host- требует Secure, Path=/ и отсутствия Domain, поэтому запись остаётся привязана к текущему хосту. HttpOnly закрывает чтение из JavaScript, Secure ограничивает отправку HTTPS-соединением, а SameSite управляет отправкой при переходах между сайтами. Эти свойства не заменяют защиту от подделки запросов, проверку прав и безопасный серверный код.

OWASP рекомендует для сессионных cookies атрибуты Secure, HttpOnly и явный SameSite, а область Domain и Path советует ограничивать, см. руководство по управлению сессиями. Если сайт ещё работает по HTTP, сначала настройте HTTPS. Не ослабляйте cookie ради быстрого запуска.

1. Создайте серверную сессию и сгенерируйте новый случайный идентификатор.
2. Верните Set-Cookie только после успешной проверки входа.
3. Задайте Secure, HttpOnly, явный SameSite и минимальную область.
4. На каждом закрытом обращении сверяйте идентификатор и права на сервере.
5. При выходе удалите серверную сессию и отправьте cookie с тем же путём и истёкшим сроком.

По теме: Как сделать ответы на сайте: FAQ без лишнего JavaScript

Сохраните простую настройку на клиенте

Для темы оформления или закрытой подсказки можно создать cookie в JavaScript. Такой cookie доступен скриптам страницы, поэтому он не подходит для сессии, ключа API и любого секрета. Если значение вообще не нужно отправлять серверу, сначала рассмотрите локальное хранилище браузера.

document.cookie = "theme=dark; Max-Age=2592000; Path=/; Secure; SameSite=Lax";

После записи сразу прочитайте document.cookie и проверьте значение в инструментах разработчика. Не собирайте строку из непроверенного пользовательского ввода. Для нескольких настроек используйте отдельные короткие имена и единый модуль, а не копии кода на каждой странице.

Если cookie нужен для баннера, сначала соберите сам блок выбора. Общая механика модального окна и доступной кнопки разобрана в статье как сделать окно на сайте. Баннер не должен перекрывать отказ, скрывать назначение или создавать необязательные cookies до выбора.

Отделите техническую настройку от согласия

Технически создать cookie легко, но допустимый момент установки зависит от назначения, стран посетителей, подключённых сервисов и правил организации. Составьте реестр до внедрения и отдельно проверьте требования с ответственным за данные или юристом. Универсальная кнопка «принимаю всё» не доказывает, что сторонние скрипты включаются правильно.

Практический чек-лист баннера: до выбора загружаются только необходимые компоненты; отказ виден так же хорошо, как согласие; категории описаны обычными словами; выбор можно изменить; после отказа необязательные cookies отсутствуют; версия текста и время выбора записываются без лишних персональных данных.

По теме: Как сделать сайт с картинками: фото и галерея в 2026

Проверьте cookies в браузере

Первый собственный инструмент: тестовая матрица из четырёх состояний. Откройте чистый профиль браузера и пройдите визит до выбора, согласие, отказ и повторное открытие. Для сессии добавьте вход, обновление страницы и выход. Проверяйте не надпись баннера, а фактический список cookies и заголовки сети.

1. Откройте DevTools, вкладку Application или Storage, затем раздел Cookies.
2. Обновите страницу в чистом профиле и запишите исходный список.
3. В Network откройте ответ входа и найдите заголовок Set-Cookie.
4. Проверьте имя, значение без личных данных, Secure, HttpOnly, SameSite, Path и срок.
5. Откажитесь от необязательных cookies и убедитесь, что они не появились.
6. Выйдите из аккаунта, обновите страницу и проверьте, что старая сессия больше не открывает закрытые данные.

Для публичного сайта после настройки проверьте HTTPS и предупреждения браузера. Практический порядок есть в статье как сделать сайт проверенным. Тестируйте также поддомен, форму и переход со сторонней страницы, если они входят в рабочий сценарий.

Диагностика частых ошибок

• Cookie не появляется: проверьте HTTPS, синтаксис, домен, путь и блокировку сторонних cookies.
• Cookie есть, но сервер его не получает: сравните адрес запроса, Domain, Path, SameSite и передачу учётных данных.
• Сессия пропадает после закрытия браузера: это ожидаемо без Max-Age или Expires; решите, нужна ли постоянная сессия.
• Выход не удаляет cookie: удаляйте запись с теми же Path и Domain, что использовались при создании.
• После отказа аналитика всё равно пишет данные: найдите скрипт, который загружается до выбора, и перенесите запуск за проверку состояния.
• Cookie читается через JavaScript, хотя содержит сессию: создавайте его сервером с HttpOnly и замените действующую сессию.

По теме: Анализ сайта с помощью ИИ: проверка по данным в 2026

Когда способ не подходит

Не используйте cookie как базу данных, место для профиля или способ скрыть секрет. Браузер может удалить запись, человек может изменить доступное значение, а размер и число cookies ограничены. Большие клиентские настройки лучше хранить иначе, а серверные данные связывать с коротким непрозрачным идентификатором.

Для авторизации, оплаты, медицинских данных и личного кабинета нужен серверный фреймворк с готовым управлением сессиями и профильная проверка безопасности. Самодельная строка Set-Cookie показывает принцип, но не закрывает обновление идентификатора, завершение всех сессий, защиту от атак и журналирование.

Частые вопросы

Можно ли сделать cookie только на HTML?

Для некритичной настройки нужен JavaScript. Сессионный cookie должен создавать сервер, потому что только заголовок ответа позволяет закрыть его атрибутом HttpOnly.

Чем cookie отличается от localStorage?

Cookie может автоматически отправляться серверу и поддерживает серверные защитные атрибуты. localStorage доступен JavaScript и не отправляется с каждым обращением. Сессионные идентификаторы не переносите в localStorage.

Нужен ли баннер для каждого cookie?

Это зависит от назначения, подключённых сервисов и применимых правил. Технически отделите необходимые записи от необязательных и подтвердите требования для вашей аудитории до запуска.

Как удалить cookie?

Установите тот же cookie с теми же Path и Domain, но с Max-Age=0 или прошедшим сроком. Для сессии одновременно удалите запись на сервере.