Введение в HTTP cookies

HTTP cookie: назначение, типы, создание, некоторые приемы

2024-05-16 I Shar

время чтения 5 мин.

Я слышал, что англичане печеньям предпочитают бисквиты… странно.

Но, пора сосредоточиться.

Содержание

Cookie (Куки) все-таки правильно называть полностью: HTTP cookie - это маленькие фрагменты информации, сохраненные в текстовых файлах в броузере. Cookies связывают информацию с определенным пользователем.

В основном cookies используются для достижения следующих целей:

Управление сессиями

Логины, просмотренные товары и услуги, набранные в играх очки и другая информация, которая должна быть сохранена на сервере.

Персонализация

Предпочтения, настройки, темы пользователя.

Например, пользователь может выбрать на каком языке и в какой теме открывать последующие сессии для данного веб-ресурса.

Отслеживание

Запись и анализ поведения пользователей.

Когда пользователь заходит в интернет-магазин и ищет определенный товар, просмотренные позиции сохраняются в истории броузера. Cookies могут считывать такую историю. Таким образом, при следующем посещении пользователь сможет получить список просмотренных или подобных товаров.

Типы Cookies

Session cookies

Session cookies (Сессионные куки) также известные под названием Temporary cookies (Временные куки) позваоляют веб-сайтам распознавать пользователей и информацию, предоставляемую при навигации по разделам и страницам сайта. Обычно сессионные куки хранят информацию о пользовательских активностях пока он находится на сайте. Как только броузер закрывается, такие куки удаляются. Однако, если в броузере включено автоматическое восстановление сеанса, такие куки сохранятся, будто броузер никогда не закрывался.

Permanent cookies

Permanent cookies (Постоянные куки) сохраняются даже после закрытия броузера. Например, такие куки хранят пароль и логин пользователя, позволяя ему не авторизоваться при каждом посещении сайта.

Third-party cookies

Third-party cookies (Сторонние куки), следуя из названия, поставляются “третьими лицами”, заинтересованными в сборе и анализе определенной информации и пользователях, например: данных о поведении, демографических показателях, расходовании средств. Такие куки являются распространенным инструментом рекламодателей, желающих знать, что продвигаемые или товары и услуги поставляются целевой аудитории.

Flash cookies

Flash cookies также известные, как Super cookies (Супер куки), совершенно не зависят от броузера. Такие куки созданы для постоянного хранения на компьютере пользователя, они остаются даже после того, как все куки принудительно удаляются из броузера пользователя.

Zombie cookies

Zombie cookies (Зомби куки) являются разновидностью Flash cookies. Они автоматически пересоздаются после того, как пользователь удаляет их. Такие куки достаточно трудно обнаружить или изменить. Поэтому они часто используются в онлайн-играх для профилактики читинга. К сожалению, такие куки также хорошо подходят для установки вредоносных программных продуктов на компьютер пользователя.

Secure cookies

Secure cookies (Безопасные куки) могут создаваться только сайтами, использующими HTTPS. Такие куки содержат зашифрованные данные. Обычно такие куки используют сайты, предоставляющие возможность онлайн-оплаты сервисов, услуг или товаров. Таким образом они повышают безопасность проводимых транзакций. Так, сайты, предоставляющие банковские услуги, обязаны использовать только безопасные куки.

Как создать куки на JavaScript

ВНИМАНИЕ: приведенный ниже код будет работать если в Вашем броузере включена поддержка локальных куки.

в JavaScript можно создавать, читать и удалять куки с помощью свойства document.cookie.

Создать куки можно, например, так:

document.cookie = "name=John Doe";

При создании можно указать дату и время (UTC) окончания срока действия куки. По умолчанию куки удаляется при закрытии броузера:

document.cooki = "name=John Doe; expires=Wed, 1 Oct 2022 12:00:00 UTC";

С помощью параметра path можно указать, каким страницам сайта принадлежит куки. По умолчанию куки принадлежит текущей странице:

document.cooki = "name=John Doe; expires=Wed, 1 Oct 2022 12:00:00 UTC; path=/";

Управление куки на чистом JavaScript - довольно утомительное занятие. К счастью, существует пакет JavaScript Cookie.

JavaScript Cookie является небольшим, простым и удобным пакетом, предоставляющим JavaScript API для работы с куки. Он работает со всеми броузерами, любыми кодировками, тщательно протестирован и не содержит дополнительных зависимостей. Простыми словами: JavaScript Cookie во всех отношениях великолепен.

Установка

Чтобы установить пакет, нужно зайти в root-директорию и выполнить код:

npm install js-cookie --save

Атрибуты куки

Expire: определяет, когда куки должен быть удален. Значением атрибута может быть дата или число, которое интерпретируется, как количество дней, отведенное на существование куки, с момента его создания.
Path: строка, определяющая путь к странице или страницам, для которых куки будет виден.
Domain: строка, содержащая имя домена, для которого куки должен быть виден. Куки также будет виден для всех поддоменов данного домена.
Secure: принимает значение true или false. Устанавливает необходимость безопасной передачи куки по протоколу HTTPS.

Создание куки

Можно создать куки, действительный для всего сайта, указав параметры, согласно примеру, приведенному ниже:

import Cookies from 'js-cookie';
Cookies.set('name', 'value');

Можно определить время существования куки, передав в метод Cookies.set третьим аргументом объект, содержащий число, указывающее на количество дней до истечения куки. В примере, приведенном ниже, куки истекает через 7 дней. Напомню, что по умолчанию куки существует до момента закрытия броузера:

import Cookies from 'js-cookie';
Cookies.set('name', 'value', { expires: 7 });

Следующим шагом создадим безопасный куки, истекающий через 7 дней, действительный только для текущей страницы. Значений свойств path и secure добавляются к объекту, уже содержащему свойство expires:

Cookies.set('name', 'value', { expires: 7, path: '', secure: true });

Чтение куки

Цель создание куки - использование, предоставляемой ими информации в дальнейшем. Получить доступ к существующему куки можно с помощью метода Cookies.get. Давайте создадим и прочитаем куки “theme”:

import Cookies from 'js-cookie';
Cookies.set('theme', 'dark');
Cookies.get('theme') // => 'dark'

Куки можно изменить, переопределив значение:

Cookies.set('theme', 'light');

Теперь значением куки “theme” соответствует “light”.

Мы можем получить все куки, выполнив Cookies.get без каких-либо аргументов:

Cookies.get(); // => { theme: 'light' }

Удаление куки

Удалить куки можно с помощью метода Cookies.remove, указав в качестве аргумента имя куки:

Cookies.remove('theme');

ВНИМАНИЕ: часто для удаления куки недостаточно передать только аргументы, установленные по умолчанию, для достижения успеха необходимо передать пути и атрибуты домена, которые были определены при создании куки.

В качестве примера создадим и удалим куки, предназначенный только для текущей страницы:

Cookies.set('direction', 'north', { path: '' });
Cookies.remove('direction'); // fail!
Cookies.remove('direction', { path: '' }); // removed!

Спасибо за внимание.

Переведено по материалам статьи Linda “Introduction to HTTP Cookies”.

I Shar