Веб-браузеры взаимодействуют с веб-сайтами, следуя протоколу HTTP . Это стандартизированный набор правил для обмена данными:
- Когда вы посещаете веб-страницу, ваш браузер отправляет HTTP-запросы для доступа к ресурсам страницы, таким как HTML, CSS, JavaScript и изображения.
- Когда HTTP-сервер (веб-сервер, на котором размещен веб-сайт) получает действительный HTTP-запрос от браузера, сервер отвечает браузеру HTTP-ответом .
- Запросы и ответы могут содержать дополнительную информацию, известную как HTTP-заголовки .
Например, рассмотрим сайт cats.example.
Запрос
При доступе к странице cats.example запускается цепочка запросов к различным доменам. Это включает в себя запрос изображения, размещенного на самой странице cats.example , запрос скрипта аналитики с сайта analytics.example , а также другие запросы к дополнительным ресурсам с других доменов.
HTTP-запросы могут быть дополнены заголовками HTTP-запроса для передачи дополнительной информации от браузера к веб-серверу. Например, часто включаются заголовки, подобные следующим:
-
Accept-Language: en-US
В этом заголовке указан предпочтительный язык пользователя, в данном случае английский (США). -
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36
В этом заголовке содержится информация о браузере и операционной системе пользователя, в данном случае "Mozilla/5.0" (семейство браузеров), "Macintosh" (операционная система) и "Chrome/127.0.0.0" (версия браузера).
Ответ
Когда веб-сервер получает действительный запрос от браузера, он отправляет браузеру ответ, содержащий запрошенный ресурс («полезную нагрузку»): HTML, CSS, JavaScript, файл изображения, видео или другие данные. Подобно тому, как каждый запрос от браузера может включать заголовки запроса , каждый ответ от сервера может включать заголовки ответа . Эти заголовки ответа отправляются вместе с полезной нагрузкой.
В ответ на запрос добавляется заголовок Set-Cookie , который указывает браузеру сохранить текст: имя и значение. Это называется HTTP-куки. В ответ на запрос cats.example/images/cat.jpg сервер cats.example добавляет заголовок Set-Cookie:cat=tabby . Это указывает браузеру сохранить куки с именем cat и значением tabby.
Этот cookie-файл будет добавляться к последующим запросам к cats.example, пока не истечет срок его действия или он не будет удален . Это позволяет серверу сохранять информацию о пользователе на разных веб-страницах или в разных сессиях: например, о том, что пользователю было показано изображение полосатой кошки.
| Заголовок | Действие | Пример | Эффект | |
|---|---|---|---|---|
| HTTP-ответ Сервер — браузер | Set‑Cookie | Веб-сервер запрашивает у вашего браузера сохранение файла cookie. | Set‑Cookie:cat=tabby | Файл cookie сохраняется вашим браузером и передается в последующих запросах к серверу, который его установил. |
| HTTP-запрос От браузера к серверу | Cookie | Ваш браузер предоставляет файл cookie. | Cookie:cat=tabby | Файл cookie предоставляется серверу, на который направлен запрос. |
Демонстрации
- 1pc.glitch.me : демонстрация использования файлов cookie от первого лица
- 3pc.glitch.me : демонстрация сторонних файлов cookie
Инструменты
- Просмотр, добавление, редактирование и удаление файлов cookie в инструментах разработчика Chrome.
- Инструмент анализа конфиденциальности в песочнице
Узнать больше
- Что такое файлы cookie?
- Атрибуты файлов cookie
- Что такое сторонние файлы cookie?
- инструменты для работы с файлами cookie
- Демонстрация работы с печеньем
- Использование HTTP-куки