Принципы взаимодействия клиента и сервера в вебе

Принципы взаимодействия клиента и сервера в вебе

HTTP — «беспамятный» протокол без хранения состояния. В HTTP запросы никак не связаны друг с другом. Для сервера это просто набор независимых пар запрос‑ответ, он не отличает их друг от друга и не помнит предыдущие запросы.

По умолчанию сервер не запоминает клиентов и то, что они делали на сайте, обрабатывая каждый запрос «с чистого листа». Если добавить товар в корзину и обновить страницу, корзина окажется пустой. Если заполнить форму заявки на кредит и перезагрузить страницу до её отправки, форма будет пустой. Если открыть соцсеть в режиме инкогнито, браузер покажет страницу входа, а не мой профиль.

Куки и персонализация

Чтобы сервер помнил клиента, придумали куки — небольшие кусочки текста, связанные с конкретным сайтом, хранящиеся в браузере:

Все куки, связанные с текущей страницей, можно посмотреть в веб‑инспекторе

Куки обычно устанавливает веб‑сервер при первом посещении сайта, а браузер сохраняет их и добавляет в (почти) каждый запрос к сайту. Грубо говоря, куки — это беджик на конференции: охранник выдал на входе, прицепил себе на футболку, теперь все тебя узнают. Куки состоит из названия, значения, адреса сайта и страницы, на которой куки установлена и на которой браузер должен предъявить её серверу, и даты, до которой куки должна храниться в браузере.

Веб‑сервер устанавливает куки с помощью заголовка Set‑Cookie:

Set-Cookie: user=vasya; path=/; domain=bureau.ru

Так веб‑сервер просит браузер запомнить куки с именем user и значением vasya.

Параметр path — это префикс, начало пути на сайте, для которого куки будет доступна. Обычно ставят /, чтобы куки была доступна на всём сайте.

path

/

Где доступна

На всём сайте

path

/admin/

Где доступна

/admin/users/, /admin/subscriptions/, /admin/subscriptions/cancelled и прочие в /admin/

path

Не указан

Где доступна

Только на текущей странице

Параметр domain — это домен, имя в адресе сайта, для которого куки будет доступна. Обычно не указывают. Представим, что куки устанавливает сервер на bureau.ru, тогда возможны следующие варианты:

domain

bureau.ru

Где доступна

bureau.ru, cloud.bureau.ru, ai.bureau.ru и любые другие поддомены — .bureau.ru

domain

cloud.bureau.ru

Где доступна

Только на cloud.bureau.ru

domain

Не указан

Где доступна

Только на bureau.ru

domain

yandex.ru

Где доступна

Нигде, браузер проигнорирует чужой домен

По умолчанию куки хранятся, пока пользователь не закроет браузер. Чтобы куки «пережили» его закрытие, используют expires или max‑age — параметры, задающие время жизни куки. Параметр expires указывают датой, а max‑age — в секундах. При этом если указать и expires, и max‑age, браузер использует только max‑age — это современный стандарт. Чтобы куки хранилась условно бесконечно, можно задать сильно отдалённую дату.

Set-Cookie: user=vasya; path=/; max-age=3600
Set-Cookie: email=vasya@mail.ru; path=/; expires=Sat, 19 Jul 2126 09:30:00 GMT
Куки user истечёт через 3600 секунд, 1 час, а куки с почтой — 19 июля 2126 года

В нашем примере при каждом запросе к серверу, браузер автоматически отправит все установленные ранее куки, и сервер узнает пользователя:

GET / HTTP/1.0
Host: example.com
User-Agent: Chrome
Cookie: user=vasya; email=vasya@mail.ru

Конечно, в реальной жизни в куках не хранят имя пользователя.

Злоумышленник легко может отредактировать куку в своём браузере и выдать себя за другого. Обычно в куках хранят зашифрованный идентификатор пользователя или сложный, составной идентификатор, который не подобрать.

С помощью кук работаёт вся персонализация в интернете от входа на сайт до истории покупок и персональных рекомендаций:

  1. Пользователь вводит логин и пароль в форме входа

  2. Сервер проверяет данные

  3. Если всё верно, сервер создаёт «сессию» — запись в базе данных, связывающую пользователя с уникальным идентификатором сессии

  4. Сервер устанавливает куки с идентификатором сессии

  5. Браузер сохраняет куки с идентификатором сессии и передаёт её во всех последующих запросах

  6. Сервер видит куки и находит с помощью неё текущего пользователя

  7. Сервер отдаёт персонализированную страницу, например, с рекомендациями для текущего пользователя на базе его предыдущих покупок

Так как куки хранит браузер, то в двух разных браузерах на одном компе будут разные наборы кук и сессий. Например, в Хроме и Яндекс.Браузере я залогинен с личной почтой, а в Сафари — с рабочей. Поэтому в куках хранят состояние и данные, связанные только с текущим пользователем.

Передача состояния между пользователями

Куки — это персональная и невидимая штука. Они не видны в урле, а два разных пользователя по одному и тому же адресу получают разное состояние — видят отличающиеся страницы, например, с разным набором рекомендаций.

Чтобы состоянием, например выбором пользователя в фильтрах, можно было поделиться, используют урлы. Всю нужную информацию кодируют и дописывают в урл:

https://www.aviasales.ru/search/MOW2903MSQ3103 Из Москвы (MOW) в Минск (MSQ), 29 марта туда (2903), 31 — обратно (3103)

Или в параметры поиска:

https://www.ozon.ru/category/elektronika-15500/?delivery=1&is_promo=t&sorting=new
Все новинки (sorting=new) электроники (elektronika‑15500) на Озоне по распродаже (is_promo=t) и с доставкой сегодня (delivery=1)

Так состоянием можно делиться с другими пользователями: скопировал ссылку, скинул другу, он открыл и увидел ту же выдачу с теми же параметрами. Такие ссылки можно смело добавлять в закладки — если браузер забудет куки или пользователь сотрёт её, откроется та же выдача с теми же параметрами.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы