Узнайте, как работают HTTP-файлы cookie

Файлы cookie являются фундаментальной частью Интернета, поскольку они позволяют сеансам и в целом распознавать пользователей во время навигации.

Вступление

Используя файлы cookie, мы можем обмениваться информацией между сервером и браузером, чтобы обеспечить возможность настройки сеанса пользователя, а также для серверов, чтобы распознавать пользователя между запросами.

HTTP не имеет состояния, что означает, что все источники запросов к серверу точно такие же, и сервер не может определить, исходит ли запрос от клиента, который уже выполнял запрос ранее, или это новый.

Файлы cookie отправляются браузером на сервер при запуске HTTP-запроса и отправляются обратно с сервера, который может редактировать их содержимое.

Файлы cookie в основном используются для хранения идентификатора сеанса.

Раньше файлы cookie использовались для хранения различных типов данных, поскольку альтернативы не было. Но в наши дни сAPI веб-хранилища(Локальное хранилище и хранилище сеансов) иIndexedDB, у нас есть гораздо лучшие альтернативы.

Тем более, что файлы cookie имеют очень низкий предел данных, которые они могут хранить, поскольку они отправляются туда и обратно для каждого HTTP-запроса к нашему серверу, включая запросы на такие ресурсы, как изображения или CSS /JavaScriptфайлы.

Файлы cookie имеют долгую историю, их первая версия появилась в 1994 году, и со временем они были стандартизированы в нескольких редакциях RFC.

RFC расшифровывается как Request for Comments, способ определения стандартов Инженерной группой Интернета (IETF), организацией, ответственной за установление стандартов для Интернета.

Последняя спецификация для файлов cookie определена вRFC 6265, which is dated 2011.

Ограничения файлов cookie

  • Файлы cookie могут хранить только4 КБ данных
  • Файлы cookieчастный для домена. Сайт может читать только установленные им файлы cookie, но не файлы cookie других доменов.
  • У вас может быть до 20 лимитов файлов cookie на домен (но точное количество зависит от конкретной реализации браузера).
  • Общее количество файлов cookie ограничено (но точное количество зависит от конкретной реализации браузера). Если это число превышено, новые файлы cookie заменяют старые.

Файлы cookie могут быть установлены либо на стороне сервера, либо на стороне клиента.

На стороне клиента файлы cookie предоставляютсяобъект документав качествеdocument.cookie

Установить куки

Самый простой пример установки cookie:

document.cookie = 'name=Flavio'

Это добавит новый файл cookie к существующим (он не перезаписывает существующие файлы cookie).

Значение файла cookie должно быть закодировано с помощьюencodeURIComponent(), чтобы убедиться, что он не содержит пробелов, запятых или точек с запятой, которые недопустимы в значениях файлов cookie.

Если вы не установите ничего другого, срок действия cookie истечет при закрытии браузера. Чтобы этого не произошло, добавьте дату истечения срока, выраженную в формате UTC (Mon, 26 Mar 2018 17:04:05 UTC)

document.cookie = 'name=Flavio; expires=Mon, 26 Mar 2018 17:04:05 UTC'

Вот простой фрагмент кода JavaScript для установки файла cookie, срок действия которого истекает через 24 часа:

const date = new Date()
date.setHours(date.getHours() + 24)
document.cookie = 'name=Flavio; expires=' + date.toUTCString()

В качестве альтернативы вы можете использоватьmax-ageпараметр для установки срока действия, выраженного в секундах:

document.cookie = 'name=Flavio; max-age=3600' //expires in 60 minutes
document.cookie = 'name=Flavio; max-age=31536000' //expires in 1 year

ВpathПараметр указывает местоположение документа для файла cookie, поэтому он назначается конкретному пути и отправляется на сервер только в том случае, если путь совпадает с текущим местоположением документа или родительским:

document.cookie = 'name=Flavio; path=/dashboard'

этот файл cookie отправляется/dashboard,/dashboard/todayи другие под-URL/dashboard/, но не на/postsНапример.

Если вы не укажете путь, по умолчанию используется текущее местоположение документа. Это означает, что для применения глобального файла cookie с внутренней страницы вам необходимо указатьpath=/.

Вdomainможно использовать для указания поддомена для вашего файла cookie.

document.cookie = 'name=Flavio; domain=mysite.com;'

Если не установлен, по умолчанию используется часть хоста, даже если используется поддомен (если на subdomain.mydomain.com, по умолчанию он установлен на mydomain.com). Файлы cookie домена включены в субдомены.

Secure

ДобавлениеSecureПараметр гарантирует, что файл cookie может быть безопасно передан только через HTTPS, и он не будет отправлен через незашифрованные HTTP-соединения:

document.cookie = 'name=Flavio; Secure;'

Обратите внимание, что это никоим образом не делает файлы cookie безопасными - всегда избегайте добавления конфиденциальной информации в файлы cookie.

HttpOnly

Один полезный параметр:HttpOnly, что делает файлы cookie недоступными черезdocument.cookieAPI, поэтому они доступны для редактирования только сервером:

document.cookie = 'name=Flavio; Secure; HttpOnly'

SameSite

SameSite, к сожалению, по-прежнему поддерживается не всеми браузерами (но многие поддерживают!https://caniuse.com/#feat=same-site-cookie-attribute, позволяет серверам требовать, чтобы файл cookie не отправлялся по межсайтовым запросам, а только на ресурсах, источником которых является домен cookie, что должно быть большим подспорьем в снижении риска атак CSRF (подделка межсайтовых запросов).

Чтобы обновить значение файла cookie, просто назначьте новое значение имени файла cookie:

document.cookie = 'name=Flavio2'

Подобно обновлению значения, чтобы обновить дату истечения срока, переназначьте значение новымexpiresили жеmax-ageсвойство:

document.cookie = 'name=Flavio; max-age=31536000' //expires in 1 year

Просто не забудьте также добавить любые дополнительные параметры, которые вы добавили в первую очередь, напримерpathили жеdomain.

Чтобы удалить файл cookie, сбросьте его значение и передайте дату в прошлом:

document.cookie = 'name=; expires=Thu, 01 Jan 1970 00:00:00 UTC;'

(и снова со всеми параметрами, которые вы использовали для его настройки)

Доступ к значениям файлов cookie

Чтобы получить доступ к cookie, найдитеdocument.cookie:

const cookies = document.cookie

Это вернет строку со всеми файлами cookie, установленными для страницы, разделенными точкой с запятой:

'name1=Flavio1; name2=Flavio2; name3=Flavio3'

//ES5
if (
  document.cookie.split(';').filter(item => {
    return item.indexOf('name=') >= 0
  }).length
) {
  //name exists
}

//ES2016
if (
document.cookie.split(’;’).filter(item => {
return item.includes(‘name=’)
}).length
) {
//name exists
}

Библиотеки абстракций

Существует ряд различных библиотек, которые предоставят более удобный 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’, { name: ‘Flavio’ })
Cookies.getJSON(‘name’) // => { name: ‘Flavio’ }

Использовать это или собственный API файлов cookie?

Все сводится к добавлению дополнительных килобайт для загрузки для каждого пользователя, так что это ваш выбор.

Использовать файлы cookie на стороне сервера

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

PHP имеет $ _COOKIE Go имеет средства cookie вnet/httpстандартная библиотека

и так далее.

Давайте сделаем пример с Node.js

При использовании Express.js вы можете создавать файлы cookie с помощьюres.cookieAPI:

res.cookie('name1', '1Flavio', {
  domain: '.example.com',
  path: '/admin',
  secure: true
})
res.cookie('name2', 'Flavio2', {
  expires: new Date(Date.now() + 900000),
  httpOnly: true
})
res.cookie('name3', 'Flavio3', { maxAge: 900000, httpOnly: true })

//takes care of serializing JSON
res.cookie(‘name4’, { items: [1, 2, 3] }, { maxAge: 900000 })

Для анализа файлов cookie рекомендуется использоватьhttps://github.com/expressjs/cookie-parserпромежуточное ПО. Каждый объект запроса будет иметь информацию о файлах cookie вreq.cookieсвойство:

req.cookies.name //Flavio
req.cookies.name1 //Flavio1

Если вы создаете файлы cookie с помощьюsigned: true:

res.cookie('name5', 'Flavio5', { signed: true })

они будут доступны вreq.signedCookiesобъект вместо этого. Подписанные файлы cookie защищены от изменений на клиенте. Подпись, используемая для подписи значения cookie, гарантирует, что вы можете узнать на стороне сервера, изменил ли его клиент.

https://github.com/expressjs/sessionиhttps://github.com/expressjs/cookie-session- это два разных варианта промежуточного программного обеспечения для создания аутентификации на основе файлов cookie, выбор из которых зависит от ваших потребностей.

Проверяйте файлы cookie с помощью Browser DevTools

Все браузеры в своихDevToolsпредоставить интерфейс для проверки и редактирования файлов cookie.

Хром

Chrome devtools cookies

Fire Fox

Firefox devtools cookies

Сафари

Safari devtools cookies

Альтернативы куки

Являются ли файлы cookie единственным способом создания аутентификации и сеансов в Интернете?

Нет! Недавно стала популярной технология, которая называетсяВеб-токены JSON(JWT), что являетсяАутентификация на основе токенов.

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по браузеру:


Tech Wiki Online!