Клиентские подсказки — это набор полей заголовков HTTP-запроса, которые сервер может заранее запросить у клиента, чтобы получить информацию об устройстве, сети, пользователе и предпочтениях, связанных с user-agent. Сервер может определить, какие ресурсы отправить, на основе информации, которой клиент решит поделиться.

Список заголовков-подсказок приведён в разделе «Заголовки HTTP» и кратко представлен ниже.

Обзор

1. При первой загрузке веб-страницы браузер отправляет серверу заголовок User-Agent.

2. Кроме того, серверу отправляется набор заголовков Sec-CH-UA-* по умолчанию; этот набор подсказок называют подсказками с низкой энтропией. Например, устройство Android отправит примерно следующее:

   Sec-CH-UA: "Google Chrome";v="143", "Chromium";v="143", "Not A(Brand";v="24"
   Sec-CH-UA-Platform: "Android"
   Sec-CH-UA-Mobile: ?1
   

   Эти заголовки предоставляют следующую информацию:

   • Sec-CH-UA: основная версия браузера и другие связанные с ним бренды.
   • Sec-CH-UA-Platform: платформа.
   • Sec-CH-UA-Mobile: логическое значение, указывающее, работает ли браузер на мобильном устройстве (?1) или нет (?0).

3. Сервер может сообщить о поддержке клиентских подсказок и запросить дополнительные клиентские подсказки с помощью заголовка ответа Accept-CH, содержащего разделённый запятыми список дополнительных заголовков, которые сервер хотел бы получать в последующих запросах. Например:

   Accept-CH: Sec-CH-UA-Model, Sec-CH-UA-Form-Factors
   

   Набор заголовков по умолчанию отправляется всегда; в данном случае мы также запросили:

   • Sec-CH-UA-Model: модель устройства, на котором работает платформа.
   • Sec-CH-UA-Form-Factors: форм-фактор устройства или устройства, определяющие, как пользователь взаимодействует с user-agent, — размер экрана, элементы управления и т. д.

4. Если браузеру это разрешено, он будет отправлять запрошенные заголовки во всех последующих запросах, пока браузер или вкладка не будут закрыты. Например, наш пример с телефоном Android может отправлять следующие обновлённые заголовки в последующих запросах:

   Sec-CH-UA: "Google Chrome";v="143", "Chromium";v="143", "Not A(Brand";v="24"
   Sec-CH-UA-Platform: "Android"
   Sec-CH-UA-Mobile: ?1
   Sec-CH-UA-Model: "Pixel 9"
   Sec-CH-UA-Form-Factors: "Mobile"
   

Такой подход эффективен, поскольку сервер запрашивает только ту информацию, которую может полезно обработать. Он также в некоторой степени «сохраняет конфиденциальность», поскольку клиент сам решает, какой информацией безопасно делиться.

<meta http-equiv="Accept-CH" content="Width, Downlink, Sec-CH-UA" />

Кэширование и клиентские подсказки

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

Vary: Accept, Width, ECT

Для заголовков клиентских подсказок, значения которых часто меняются, можно не указывать Vary или использовать другую стратегию, поскольку в противном случае ресурс фактически нельзя будет кэшировать. (Для каждого уникального значения создаётся новая запись в кэше.) Это особенно актуально для сетевых клиентских подсказок, таких как Downlink и RTT. Подробнее см. в разделе «Кэширование HTTP > Vary».

Срок действия подсказок

Сервер указывает интересующие его заголовки клиентских подсказок в заголовке ответа Accept-CH. User-agent добавляет запрошенные заголовки клиентских подсказок или, по крайней мере, выбранную им часть, которой он готов поделиться с этим сервером, ко всем последующим запросам в рамках текущего сеанса просмотра.

Иными словами, запрос определённого набора подсказок действует до завершения работы браузера.

Сервер может заменить набор интересующих его клиентских подсказок, повторно отправив заголовок ответа Accept-CH с новым списком. Например, чтобы прекратить запрос всех подсказок, он отправит Accept-CH с пустым списком.

Подсказки с низкой энтропией

Клиентские подсказки в целом делятся на подсказки с высокой и низкой энтропией. Подсказки с низкой энтропией не раскрывают много информации, которую можно использовать для создания цифрового отпечатка пользователя. В зависимости от политики разрешений, они могут отправляться по умолчанию при каждом запросе клиента независимо от заголовка ответа сервера Accept-CH. К подсказкам с низкой энтропией относятся:

• Save-Data,
• Sec-CH-UA,
• Sec-CH-UA-Mobile и
• Sec-CH-UA-Platform.

Подсказки с высокой энтропией

Подсказки с высокой энтропией могут раскрыть больше информации, которую можно использовать для создания цифрового отпечатка пользователя, поэтому их отправка ограничена: user-agent может решить, предоставлять ли их. Решение может зависеть от предпочтений пользователя, запроса разрешения или политики разрешений. Все клиентские подсказки, не относящиеся к подсказкам с низкой энтропией, считаются подсказками с высокой энтропией.

Критически важные клиентские подсказки

Критически важная клиентская подсказка — это подсказка, применение которой может значительно изменить отображаемую страницу, потенциально сделав её неудобной или затруднив использование, поэтому её необходимо применить до отображения содержимого. Например, Sec-CH-Prefers-Reduced-Motion часто считают критически важной подсказкой, поскольку она может заметно повлиять на поведение анимации, а пользователю, выбравшему это предпочтение, важно, чтобы оно учитывалось.

Сервер может использовать заголовок ответа Critical-CH вместе с Accept-CH, чтобы указать, что принятая клиентская подсказка также является критически важной клиентской подсказкой (заголовок из Critical-CH должен также присутствовать в Accept-CH). Получив ответ с Critical-CH, user-agent должен проверить, были ли указанные критически важные заголовки отправлены в исходном запросе. Если нет, user-agent повторит запрос, а не отобразит страницу. Такой подход гарантирует, что предпочтения пользователя, заданные с помощью критически важных клиентских подсказок, всегда учитываются, даже если они не были включены в первый запрос или если изменилась конфигурация сервера.

Например, в данном случае сервер сообщает клиенту с помощью Accept-CH, что принимает Sec-CH-Prefers-Reduced-Motion, а Critical-CH используется, чтобы указать, что Sec-CH-Prefers-Reduced-Motion считается критически важной клиентской подсказкой:

HTTP/1.1 200 OK
Content-Type: text/html
Accept-CH: Sec-CH-Prefers-Reduced-Motion
Vary: Sec-CH-Prefers-Reduced-Motion
Critical-CH: Sec-CH-Prefers-Reduced-Motion

Поскольку Sec-CH-Prefers-Reduced-Motion — критически важная подсказка, отсутствовавшая в исходном запросе, клиент автоматически повторяет запрос — на этот раз сообщая серверу с помощью Sec-CH-Prefers-Reduced-Motion, что пользователь предпочитает анимацию с уменьшенным количеством движения.

GET / HTTP/1.1
Host: example.com
Sec-CH-Prefers-Reduced-Motion: "reduce"

В итоге Accept-CH запрашивает все значения, которые вы хотели бы использовать на странице, а Critical-CH запрашивает только те значения, которые обязательно должны быть доступны при загрузке, чтобы страница отображалась правильно.

Типы подсказок

Клиентские подсказки user-agent

Заголовки клиентских подсказок user-agent (UA) позволяют серверу изменять ответы в зависимости от user-agent (браузера), операционной системы и устройства. Список заголовков Sec-CH-UA-* см. в разделе «Заголовки клиентских подсказок user-agent».

Клиентские подсказки доступны JavaScript веб-страницы через API клиентских подсказок User-Agent.

Клиентские подсказки о медиапараметрах предпочтений пользователя

Клиентские подсказки о медиапараметрах предпочтений пользователя позволяют серверу изменять ответы в зависимости от предпочтений user-agent для медиахарактеристик CSS, таких как цветовая схема или уменьшение движения. К ним относятся заголовки: Sec-CH-Prefers-Reduced-Motion, Sec-CH-Prefers-Color-Scheme.

Клиентские подсказки об устройстве

Клиентские подсказки об устройстве позволяют серверу изменять ответы в зависимости от характеристик устройства, включая доступную память и свойства экрана. К ним относятся заголовки: Sec-CH-Device-Memory, Sec-CH-DPR, Sec-CH-Viewport-Height, Sec-CH-Viewport-Width.

Сетевые клиентские подсказки

Сетевые клиентские подсказки позволяют серверу изменять ответы в зависимости от выбора пользователя, пропускной способности сети и задержки. К ним относятся заголовки: Save-Data, Downlink, ECT, RTT.

Использование клиентских подсказок для адаптивного дизайна

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

Телефон Android отправит следующие клиентские подсказки по умолчанию:

Sec-CH-UA: "Google Chrome";v="143", "Chromium";v="143", "Not A(Brand";v="24"
Sec-CH-UA-Platform: "Android"
Sec-CH-UA-Mobile: ?1

Планшет Android, напротив, отправит следующее:

Sec-CH-UA: "Google Chrome";v="143", "Chromium";v="143", "Not A(Brand";v="24"
Sec-CH-UA-Platform: "Android"
Sec-CH-UA-Mobile: ?0

Заголовок Sec-CH-UA-Mobile можно использовать, чтобы определить, является ли устройство мобильным. Для сценариев, зависящих от аппаратного обеспечения, можно запросить название модели устройства и форм-фактор с помощью подсказок с высокой энтропией Sec-CH-UA-Model и Sec-CH-UA-Form-Factors.

Во многих случаях для адаптивного дизайна удобнее и гибче использовать медиазапросы. Однако бывают ситуации, когда у вас нет возможности управлять отдельными таблицами стилей сайта и нужно менять отправляемую таблицу стилей на основе характеристик устройства или предпочтений пользователя. Существуют клиентские подсказки, соответствующие некоторым медиазапросам «предпочтений пользователя», например Sec-CH-Prefers-Color-Scheme, Sec-CH-Prefers-Reduced-Motion и Sec-CH-Prefers-Reduced-Transparency.

См. также

• Заголовки клиентских подсказок
• Заголовок HTTP Vary
• Инфраструктура клиентских подсказок
• API клиентских подсказок User-Agent
• Повышение конфиденциальности пользователей и удобства работы разработчиков с помощью клиентских подсказок User-Agent на developer.chrome.com (2020)
• Переход на клиентские подсказки User-Agent на web.dev (2021)