JavaScript свойство Document.cookie

Определение и применение

JavaScript свойство cookie объекта Document получает или задает cookie (небольшой фрагмент данных, отправленный веб-сервером и хранимый на компьютере пользователя), связанных с текущим документом.

Обращаю Ваше внимание на то, что по умолчанию cookies являются временными – их значения сохраняются на период сеанса браузера и удаляются при его закрытии. Срок хранения cookies не совпадает со сроком хранения данных в sessionStorage объекта Window, так как доступность cookies не ограничивается единственным окном, а по умолчанию хранятся на протяжении работы процесса браузера, а не конкретного окна браузера.

Для возможности сохранения cookies после окончания сеанса браузера необходимо дополнительно передать специальный атрибут ;max-age=max-age-in-seconds, значение которого в секундах определяет как долго он должен хранится. Если этот атрибут указан, то браузер сохранит cookie в локальном файле и удалит его только по истечении указанного срока хранения.

Видимость cookie ограничивается происхождением документа, как и при использовании хранилищ localStorage и sessionStorage объекта Window, а также строкой пути к документу. Область видимости cookies может управляться с использованием атрибутов path и domain, при этом по умолчанию cookies связывается с создавшей его страницей и доступен этой странице, а также другим страницам из того же каталога или любых его подкаталогов. Например, если, страница https://basicweb.ru/content/index.php создаст cookie, то этот cookie будет также видим страницам https://basicweb.ru/content/somepage.php и https://basicweb.ru/content/catalog/otherpage.php, но невидим странице https://basicweb.ru/index.php.

Этого правила видимости, принятого по умолчанию, обычно вполне достаточно, но иногда значения cookie требуется использовать на всем сайте независимо от того, какая страница создала cookie. Для этого в cookie необходимо определить атрибут path и тогда любая страница того же веб-сервера с URL-адресом, начинающимся с указанного значения, сможет использовать этот cookie. Например, если для cookie, установленного страницей https://basicweb.ru/css/data/index.html, в атрибуте path установлено значение "/css", то этот cookie также будет виден для страницы https://basicweb.ru/css/somepage.html. А если атрибут path установлен в значение "/", то cookie будет видим для любой страницы на веб-сервере https://basicweb.ru. Установка атрибута path в значение "/" определяет такую же область видимости cookie, как для хранилища localStorage, а также говорит о том, что браузер должен передавать имя и значение cookie на сервер при запросе любой веб-страницы с этого сайта.

По умолчанию cookies доступны только страницам с общим происхождением, но может потребоваться возможность совместного использования cookies несколькими поддоменами. Например, серверу domain1.example.com может потребоваться прочитать значения cookie, установленного сервером domain2.example.com. В этой ситуации необходимо использовать атрибут domain. Если cookie, созданный страницей с сервера catalog.example.com, имеет в атрибуте path значение /, а в атрибуте domain – значение ".example.com", то этот cookie будет доступен всем страницам в поддоменах в домене example.com. Если атрибут domain не установлен, то его значением по умолчанию будет имя сервера на котором находится страница. Обратите внимание, что в атрибут domain нельзя записать значение, отличающееся от домена вашего сервера.

Заключительный атрибут secure – является логическим атрибутом, который определяеи как значения cookie передаются по сети. По умолчанию cookie не защищен, т. е. передается по обычному незащищенному HTTP соединению. Если cookie помечен как защищенный, то он будет передаваться, только когда обмен между браузером и сервером организован по протоколу HTTPS или другому защищенному протоколу.

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
body	Да	Да	Да	Да	Да	Да

JavaScript синтаксис:

Получение всех cookies

const allCookies = document.cookie;

В коде выше allCookies представляет собой строку, содержащую разделенный точкой с запятой список всех файлов cookie (т. е. пары ключ=значение). Обратите внимание, что каждый ключ и значение могут быть окружены пробелами (пробелами и символами табуляции), на самом деле стандарт RFC 6265 требует одного пробела после каждой точки с запятой, но некоторые браузеры могут не соблюдать этого.

Установка нового cookie

document.cookie = newCookie;

В приведенном выше коде, newCookie представляет собой строку вида ключ=значение. Обратите внимание, что вы можете установить, или обновить только один файл cookie за раз с помощью этого метода. Учтите также, что:

• Любое из следующих значений атрибута cookie может дополнительно следовать за парой ключ-значение, указывая файл cookie для установки, или обновления и предшествуя разделителем с запятой:
  • ;path=путь (например, "/", "/mydir") если не указано, то по умолчанию используется текущий путь текущего местоположения документа. Путь должен быть абсолютным.
  • ;domain=домен (например, "example.com", или "subdomain.example.com"). Если не указано, то по умолчанию используется часть узла текущего расположения документа. Если домен указан, то субдомены всегда включаются.
  • ;max-age=max-age-in-seconds (например, 60*60*24*365 или 31536000 для года)
  • ;expires=date-in-GMTString-format если expires ни max-age не указаны, то срок действия истекает в конце сессии.
  • ;secure Cookie передается только по защищенному протоколу https. Является логическим атрибутом, который определяет как значения cookie передаются по сети (по умолчанию cookie не защищен и передается по обычному незащищенному HTTP соединению. Однако если cookie помечен как защищенный, то он передается, только когда обмен между броузером и сервером организован по протоколу HTTPS или другому защищенному протоколу.
  • ;samesite запрещает браузеру отправлять этот файл cookie вместе с межсайтовыми запросами. Возможные значения флага lax или strict:
    • lax - будет отправлять файлы cookie только для запросов GET навигации верхнего уровня. Этого достаточно для отслеживания пользователей, но это предотвратит многие атаки CSRF.
    • strict - будет препятствовать отправке cookie браузером на целевой сайт во всех контекстах межсайтового просмотра, даже при переходе по обычной ссылке.
• Строка значения cookie может использовать метод encodeURIComponent(), чтобы гарантировать, что строка не содержит запятых, точек с запятой или пробелов (которые запрещены в значениях cookie).
• Некоторые браузеры поддерживают следующие префиксы cookie (эти флаги можно установить только с помощью атрибута ;secure):
  • __Secure- - сигнализирует браузеру, что он должен включать cookie только в запросы, передаваемые по защищенному каналу.
  • __Host- - сигнализирует браузеру, что в дополнительно к ограничению на использование cookie только из безопасного источника область действия cookie ограничена атрибутом пути, передаваемым сервером. Если сервер опускает атрибут path, то используется директория URI запроса. Он также сигнализирует, что атрибут домена не должен присутствовать, что предотвращает отправку cookie в другие домены.

Спецификация

Пример использования

// устанавливаем значение cookie
document.cookie = "name=basicweb";
document.cookie = "uid=5454545454";

// выводим в консоль текущее значение cookie
console.log(document.cookie); // "name=basicweb; uid=5454545454"