Узнайте, как работают HTTP COOKIES
WebDEV
У технологии HTTP нет состояния, это означает, что все запросы, отправленные на сервер, одинаковые. Из-за этого сервер не может определить, поступает ли запрос от клиента, который уже выполнял его раньше, или это новый пользователь.
Cookies отправляются браузером на сервер при HTTP-запросе, затем они отправляются обратно пользователю, при этом сервер может отредактировать их содержимое.
Cookies чаще всего используют для хранения идентификатора сеанса.
Раньше у cookie не было альтернатив, и их использовали для хранения различных типов данных. Но сейчас, у нас есть намного лучшие инструменты для хранение данных, такие как Web Storage API (Local Storage и Session Storage) и IndexedDB.
Cookies могут хранить очень маленький объем данных, так как они отправляются на сервер и обратно с каждым HTTP-запросом, включая запросы на такие объекты, как изображения или файлы CSS/JavaScript.
Первая версия cookies появилась в 1994 году, и, со временем, они были стандартизированы в нескольких версиях RFC.
RFC (Request for Comments) - способ определения стандартов, определяемый целевой группой Internet Engineering Task Force (IETF), организацией, ответственной за установление стандартов для Интернета
Последняя спецификация для cookies определена в RFC 6265 в 2011 году.
Какие есть ограничения у cookies
- Они вмещают в себя максимум 4 Кбайта данных
- Cookies приватные для каждого домена. Сайт может читать только те cookies, которые он установил, и не может прочитать cookies других доменов
- У вас может быть до 20 лимитов cookies на домен (но точное число зависит от конкретной реализации браузера)
- Если лимит будет превышен, то новые cookies заменяют старые
Cookies могут быть установлены или прочитаны и на стороне сервера, и на стороне клиента.
Установка cookies
Самый простой пример установки cookie:
document.cookie = 'foo=bar'
Эта запись добавляет новый cookie (он не перезаписывает уже существующие cookies)
Значение cookie должно быть закодировано с помощью encodeURIComponent (), чтобы убедиться, что он не содержит пробелов, запятой или точки с запятой, которые недопустимы в значениях cookie.
Доступ к значениям cookies
Чтобы получить доступ к cookies, выполните document.cookie:
const cookies = document.cookie
Эта команда вернет строку со всеми cookie заданными для страницы, разделёнными запятой:
'foo1=bar1; foo2=bar2; foo3=bar3'
Установка времени срока действия cookie
Если вы ничего не зададите, файл cookie будет удалён, когда закроется браузер. Чтобы этого не произошло, добавьте дату истечения срока действия, выраженную в формате UTC (Mon, 26 Mar 2018 17:04:05 UTC)
document.cookie = 'foo=bar; expires=Mon, 26 Mar 2018 17:04:05 UTC'
Вот простой JavaScript сниппет для установки cookie, срок действия которого истечёт через 24 часа:
const date = new Date() date.setHours(date.getHours() + 5) document.cookie = 'foo=bar; expires=' + date.toUTCString()
В качестве альтернативы можно использовать параметр max-age, чтобы установить срок истечения в секундах:
document.cookie = 'foo=bar; max-age=3600' //истекает через 60 минут document.cookie = 'foo=bar; max-age=31536000' //истекает через 1 год
Установка параметра path cookie
Параметр path указывает местоположение документа для файла cookie и отправляется на сервер только в том случае, если путь совпадает с текущим местоположением документа или родителя:
document.cookie = 'foo=bar; path="/dashboard"'
Этот cookie будет отправлен на /dashboard, /dashboard/today и другие пути из /dashboard/, но не будет отправлен к примеру, на /posts.
Если вы не установили путь, то по умолчанию будет использоваться текущее местоположение документа. Это означает, что для применения глобального файла cookie с внутренней страницы вам необходимо указать path = "/".
Установка домена cookie
Параметр domen можно использовать для указания субдомена вашего cookie.
document.cookie = 'foo=bar; domain="mysite.com";'
Если домен не установлен, то по умолчанию он принимает часть хоста, даже если используется субдомен (если на subdomain.mydomain.com, по умолчанию он установлен в mydomain.com). Cookie основного домена включены в субдомены.
Защита cookie
Secure
Добавление параметра secure гарантирует, что cookie можно безопасно передавать только через HTTPS, и он не будет передаваться по незашифрованным HTTP-соединениям:
document.cookie = 'foo=bar; Secure;'
Обратите внимание, что это не делает файлы cookie безопасными – избегайте добавления конфиденциальной информации в cookie.
HttpOnly
Одним из полезных параметров является HttpOnly, он делает файлы cookie недоступными с помощью команды document.cookie, поэтому их можно редактировать только на сервере.
document.cookie = 'foo=bar; Secure; HttpOnly'
SameSite
SameSite до сих пор является экспериментальным и поддерживается только в браузерах Chrome и Firefox. В любом случае, этот параметр позволяет серверам требовать, чтобы cookie не отправлялся по cross-site запросам, и отправлялся только на те ресурсы, которые имеют домен указанный в cookie. Это хороший помощник для снижения риска атак CSRF (Cross Site Request Forgery).
Обновление значения или параметра cookie
Чтобы обновить значение cookie, нужно просто переназначить его:
document.cookie = 'foo=bar2'
Аналогично, чтобы обновить срок действия cookie, переназначьте этот параметр с новым значением:
document.cookie = 'foo=bar; max-age=31536000' //истекает через 1 год
Не забудьте также указать дополнительные параметры, которые вы добавили при создании cookie, например path или domen.
Удаление cookie
Чтобы удалить cookie, обнулите его значение и установите срок истечения на любой прошедший день.
document.cookie = 'foo=; expires=Thu, 01 Jan 1970 00:00:00 UTC;'
(и опять, не забудьте указать все параметры, которые вы использовали при установке cookie).
Проверка на существования cookie
Для примера проверим существование «foo»
//ES5
if (document.cookie.split(';').filter((item) => {
return item.indexOf('foo=') >= 0
}).length) {
//foo существует
}
//ES7
if (document.cookie.split(';').filter((item) => {
return item.includes('foo=')
}).length) {
//foo существует
}
Библиотеки абстракций
Существует множество различных библиотек, которые предоставят API-интерфейс для управления файлами cookie.
Одним из них является https://github.com/js-cookie/js-cookie, который поддерживает браузеры до IE7 и имеет много звезд на GitHub (что всегда хорошо).
Некоторые примеры использования этой библиотеки:
Cookies.set('name', 'value')
Cookies.set('name', 'value', {
expires: 7,
path: '',
domain: 'subdomain.site.com',
secure: true
})
Cookies.get('name') // => 'value'
Cookies.remove('name')
//JSON
Cookies.set('name', { foo: 'bar' })
Cookies.getJSON('name') // => { foo: 'bar' }
Использовать этот инструмент или встроенный cookies API?
Все сводится к тому, чтобы загружать большее количество байтов каждому пользователю, так что, решать вам.
Использование cookies на стороне сервера
Любая среда, используемая для создания HTTP-сервера, позволяет вам взаимодействовать с файлами cookies, потому что cookies - это основа современного Web , и без них нельзя создать большое приложение.
У PHP есть $_COOKIE, в Go используется стандартная библиотека net/http и так далее.
Вот вам пример с использованием Node.js:
Используя фреймворк Express.js, вы можете создавать cookies с помощью res.cookie:
res.cookie('foo1', '1bar', { domain: '.example.com', path: '/admin', secure: true })
res.cookie('foo2', 'bar2', { expires: new Date(Date.now() + 900000), httpOnly: true })
res.cookie('foo3', 'bar3', { maxAge: 900000, httpOnly: true })
res.cookie('foo4', { items: [1,2,3] }, { maxAge: 900000 })
Для парсинга cookies, хорошим выбором будет использование middleware, такого как https://github.com/expressjs/cookie-parser. С его помощью к каждому объекту request будет добавлена информация о cookies в свойстве req.cookie:
req.cookies.foo //bar req.cookies.foo1 //bar1
Если вы создадите cookie с использованием signed: true, они будут доступны в req.signedCookies. Такие файлы cookie будут полностью нечитаемые на стороне клиента, но будут хорошо кодироваться/декодироваться на серверной стороне.
https://github.com/expressjs/session и https://github.com/expressjs/cookie-session – это два разных middleware для создания аутентификации на основе cookies. Какой из них использовать решать вам.
Просматривание cookie с помощью инструментов разработчика в браузерах
Альтернатива cookie
Являются ли cookie единственным способом создания аутентификации и сеансов в Web?
Нет! Существует технология JSON Web Tokens (JWT), которая использует аутентификацию на основе токенов.