Эта страница переведена с помощью Cloud Translation API.

Улучшение конфиденциальности пользователей и удобства разработки с помощью подсказок клиента User-Agent.

User-Agent Client Hints — это новое расширение API Client Hints, которое позволяет разработчикам получать доступ к информации о браузере пользователя с сохранением конфиденциальности и эргономичным способом.

Rowan Merewood

Yoav Weiss

Client Hints позволяет разработчикам активно запрашивать информацию об устройстве или условиях пользователя, вместо того, чтобы извлекать ее из строки User-Agent (UA). Предоставление этого альтернативного маршрута является первым шагом к постепенному уменьшению гранулярности строки User-Agent.

Узнайте, как обновить существующую функциональность, которая основана на анализе строки User-Agent, чтобы вместо этого использовать клиентские подсказки User-Agent.

Фон

Когда веб-браузеры делают запросы, они включают информацию о браузере и его среде, чтобы серверы могли включить аналитику и настроить ответ. Это было определено еще в 1996 году (RFC 1945 для HTTP/1.0), где вы можете найти оригинальное определение для строки User-Agent , которое включает пример:

User-Agent: CERN-LineMode/2.15 libwww/2.17b3

Этот заголовок предназначался для указания, в порядке значимости, продукта (например, браузера или библиотеки) и комментария (например, версии).

Состояние строки User-Agent

За прошедшие десятилетия эта строка накопила множество дополнительных сведений о клиенте, сделавшем запрос (а также хлам из-за обратной совместимости). Мы можем это увидеть, если посмотрим на текущую строку User-Agent Chrome:

Mozilla/5.0 (Linux; Android 10; Pixel 3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4076.0 Mobile Safari/537.36

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

Сочетание этих параметров с огромным разнообразием возможных значений означает, что строка User-Agent может содержать достаточно информации, чтобы обеспечить уникальную идентификацию отдельных пользователей.

Строка User-Agent допускает множество законных вариантов использования и служит важной цели для разработчиков и владельцев сайтов. Однако также важно, чтобы конфиденциальность пользователей была защищена от скрытых методов отслеживания, и отправка информации UA по умолчанию противоречит этой цели.

Также необходимо улучшить веб-совместимость, когда дело касается строки User-Agent. Она неструктурирована, поэтому ее разбор приводит к ненужной сложности, что часто является причиной ошибок и проблем с совместимостью сайтов, которые наносят вред пользователям. Эти проблемы также непропорционально сильно наносят вред пользователям менее распространенных браузеров, поскольку сайты могли не выполнить проверку на соответствие их конфигурации.

Представляем новые подсказки для клиента User-Agent

User-Agent Client Hints обеспечивает доступ к той же информации, но более конфиденциальным способом, что в свою очередь позволяет браузерам в конечном итоге уменьшить значение по умолчанию строки User-Agent, транслирующей все. Client Hints реализует модель, в которой сервер должен запросить у браузера набор данных о клиенте (подсказки), а браузер применяет свои собственные политики или пользовательскую конфигурацию, чтобы определить, какие данные возвращаются. Это означает, что вместо того, чтобы по умолчанию раскрывать всю информацию User-Agent, доступ теперь управляется явным и проверяемым образом. Разработчики также получают выгоду от более простого API — больше никаких регулярных выражений!

Текущий набор клиентских подсказок в первую очередь описывает возможности отображения и подключения браузера. Вы можете изучить подробности в разделе Автоматизация выбора ресурсов с клиентскими подсказками , но вот краткое напоминание о процессе.

Сервер запрашивает определенные клиентские подсказки через заголовок:

⬇️ Ответ сервера

Accept-CH: Viewport-Width, Width

Или метатег:

<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />

Затем браузер может выбрать отправку следующих заголовков в последующих запросах:

⬆️ Последующий запрос

Viewport-Width: 460
Width: 230

Сервер может варьировать свои ответы, например, предоставляя изображения с соответствующим разрешением.

User-Agent Client Hints расширяет диапазон свойств с помощью префикса Sec-CH-UA , который может быть указан через заголовок ответа сервера Accept-CH . Для получения всех подробностей начните с объяснения , а затем погрузитесь в полное предложение .

Подсказки User-Agent Client от Chromium 89

Подсказки User-Agent Client включены в Chrome по умолчанию, начиная с версии 89.

По умолчанию браузер возвращает марку браузера, основную/основную версию, платформу и индикатор, является ли клиент мобильным устройством:

⬆️ Все запросы

Sec-CH-UA: "Chromium";v="93", "Google Chrome";v="93", " Not;A Brand";v="99"
Sec-CH-UA-Mobile: ?0
Sec-CH-UA-Platform: "macOS"

Заголовки ответов и запросов User-Agent

⬇️ Ответ `Accept-CH` ⬆️ Запросить заголовок	⬆️ Запросить Пример значения	Описание
`Sec-CH-UA`	`"Chromium";v="84",` `"Google Chrome";v="84"`	Список марок браузеров и их основных версий.
`Sec-CH-UA-Mobile`	`?1`	Логическое значение, указывающее, находится ли браузер на мобильном устройстве ( `?1` для true) или нет ( `?0` для false).
`Sec-CH-UA-Full-Version`	`"84.0.4143.2"`	[ Устарело ] Полная версия для браузера.
`Sec-CH-UA-Full-Version-List`	`"Chromium";v="84.0.4143.2",` `"Google Chrome";v="84.0.4143.2"`	Список марок браузеров и их полные версии.
`Sec-CH-UA-Platform`	`"Android"`	Платформа устройства, обычно операционная система (ОС).
`Sec-CH-UA-Platform-Version`	`"10"`	Версия для платформы или ОС.
`Sec-CH-UA-Arch`	`"arm"`	Базовая архитектура для устройства. Хотя это может не иметь значения для отображения страницы, сайт может захотеть предложить загрузку, которая по умолчанию будет в правильном формате.
`Sec-CH-UA-Model`	`"Pixel 3"`	Модель устройства.
`Sec-CH-UA-Bitness`	`"64"`	Разрядность базовой архитектуры (т.е. размер в битах целого числа или адреса памяти)

Пример обмена

Пример обмена будет выглядеть так:

⬆️ Первоначальный запрос от браузера
Браузер запрашивает страницу /downloads с сайта и отправляет свой базовый User-Agent по умолчанию.

GET /downloads HTTP/1.1
Host: example.site

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

⬇️ Ответ сервера
Сервер отправляет страницу обратно и дополнительно запрашивает полную версию браузера и платформу.

HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version-List

⬆️ Последующие запросы
Браузер предоставляет серверу доступ к дополнительной информации и отправляет дополнительные подсказки обратно во всех последующих запросах.

GET /downloads/app1 HTTP/1.1
Host: example.site

Sec-CH-UA: " Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"
Sec-CH-UA-Mobile: ?1
Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4738.0", "Google Chrome";v="98.0.4738.0"
Sec-CH-UA-Platform: "Android"

API-интерфейс JavaScript

Наряду с заголовками, User-Agent также может быть доступен в JavaScript через navigator.userAgentData . Информация заголовков Sec-CH-UA , Sec-CH-UA-Mobile и Sec-CH-UA-Platform по умолчанию может быть доступна через свойства brands и mobile устройств соответственно:

// Log the brand data
console.log(navigator.userAgentData.brands);

// output
[
  {
    brand: 'Chromium',
    version: '93',
  },
  {
    brand: 'Google Chrome',
    version: '93',
  },
  {
    brand: ' Not;A Brand',
    version: '99',
  },
];

// Log the mobile indicator
console.log(navigator.userAgentData.mobile);

// output
false;

// Log the platform value
console.log(navigator.userAgentData.platform);

// output
"macOS";

Дополнительные значения доступны через вызов getHighEntropyValues() . Термин «высокая энтропия» относится к информационной энтропии , другими словами — объему информации, которую эти значения раскрывают о браузере пользователя. Как и в случае с запросом дополнительных заголовков, браузер решает, какие значения возвращать, если таковые имеются.

// Log the full user-agent data
navigator
  .userAgentData.getHighEntropyValues(
    ["architecture", "model", "bitness", "platformVersion",
     "fullVersionList"])
  .then(ua => { console.log(ua) });

// output
{
   "architecture":"x86",
   "bitness":"64",
   "brands":[
      {
         "brand":" Not A;Brand",
         "version":"99"
      },
      {
         "brand":"Chromium",
         "version":"98"
      },
      {
         "brand":"Google Chrome",
         "version":"98"
      }
   ],
   "fullVersionList":[
      {
         "brand":" Not A;Brand",
         "version":"99.0.0.0"
      },
      {
         "brand":"Chromium",
         "version":"98.0.4738.0"
      },
      {
         "brand":"Google Chrome",
         "version":"98.0.4738.0"
      }
   ],
   "mobile":false,
   "model":"",
   "platformVersion":"12.0.1"
}

Демо

Вы можете опробовать оба заголовочных файла и API JavaScript на своем собственном устройстве по адресу user-agent-client-hints.glitch.me .

Подсказка срок службы и сброс

Подсказки, указанные через заголовок Accept-CH будут отправляться в течение всего сеанса браузера или до тех пор, пока не будет указан другой набор подсказок.

Это означает, что если сервер отправляет:

⬇️ Ответ

Accept-CH: Sec-CH-UA-Full-Version-List

Затем браузер будет отправлять заголовок Sec-CH-UA-Full-Version-List во всех запросах к этому сайту до тех пор, пока браузер не будет закрыт.

⬆️ Последующие запросы

Sec-CH-UA-Full-Version-List: " Not A;Brand";v="99.0.0.0", "Chromium";v="98.0.4738.0", "Google Chrome";v="98.0.4738.0"

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

⬇️ Ответ

Accept-CH: Sec-CH-UA-Bitness

⬆️ Последующие запросы

Sec-CH-UA-Platform: "64"

Ранее запрошенный Sec-CH-UA-Full-Version-List не будет отправлен .

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

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

Этот шаблон также соответствует тому, как работают подсказки через тег <meta http-equiv="Accept-CH" …> . Запрошенные подсказки будут отправлены только по запросам, инициированным страницей, а не при какой-либо последующей навигации.

Область действия подсказки и запросы кросс-источника

По умолчанию клиентские подсказки будут отправляться только по запросам того же источника. Это означает, что если вы запросите конкретные подсказки на https://example.com , но ресурсы, которые вы хотите оптимизировать, находятся на https://downloads.example.com они не получат никаких подсказок.

Чтобы разрешить подсказки для запросов кросс-источника, каждая подсказка и источник должны быть указаны заголовком Permissions-Policy . Чтобы применить это к подсказке User-Agent Client, вам нужно сделать подсказку строчной и удалить префикс sec- . Например:

⬇️ Ответ от example.com

Accept-CH: Sec-CH-UA-Platform-Version, DPR
Permissions-Policy: ch-ua-platform-version=(self "downloads.example.com"),
                    ch-dpr=(self "cdn.provider" "img.example.com");

⬆️ Запрос на downloads.example.com

Sec-CH-UA-Platform-Version: "10"

⬆️ Запросы к cdn.provider или img.example.com

DPR: 2

Где использовать клиентские подсказки User-Agent?

Короткий ответ заключается в том, что вам следует провести рефакторинг всех случаев, когда вы анализируете заголовок User-Agent или используете какие-либо вызовы JavaScript, которые обращаются к той же информации (например, navigator.userAgent , navigator.appVersion или navigator.platform ), чтобы вместо этого использовать клиентские подсказки User-Agent.

Если пойти еще дальше, вам следует пересмотреть использование информации User-Agent и заменить ее другими методами, когда это возможно. Часто вы можете достичь той же цели, используя прогрессивное улучшение, обнаружение функций или адаптивный дизайн . Основная проблема с использованием данных User-Agent заключается в том, что вы всегда поддерживаете сопоставление между проверяемым свойством и поведением, которое оно обеспечивает. Это накладные расходы на обслуживание, чтобы гарантировать, что ваше обнаружение является всеобъемлющим и остается актуальным.

Учитывая эти предостережения, в репозитории User-Agent Client Hints перечислены некоторые допустимые варианты использования для сайтов.

Что происходит со строкой User-Agent?

План состоит в том, чтобы минимизировать возможность скрытого отслеживания в Интернете путем сокращения объема идентифицирующей информации, раскрываемой существующей строкой User-Agent, не вызывая при этом неоправданных сбоев на существующих сайтах. Введение User-Agent Client Hints теперь дает вам возможность понять и поэкспериментировать с новой возможностью, прежде чем будут внесены какие-либо изменения в строки User-Agent.

В конечном итоге информация в строке User-Agent будет сокращена, чтобы сохранить устаревший формат, предоставляя только ту же высокоуровневую информацию о браузере и важной версии, как в подсказках по умолчанию. В Chromium это изменение было отложено как минимум до 2022 года, чтобы предоставить экосистеме дополнительное время для оценки новых возможностей User Agent Client Hints.

Вы можете протестировать версию этого, включив флаг about://flags/#reduce-user-agent из Chrome 93 (Примечание: этот флаг назывался about://flags/#freeze-user-agent в версиях Chrome 84 - 92). Это вернет строку с историческими записями для совместимости, но с очищенными подробностями. Например, что-то вроде:

Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Mobile Safari/537.36

Миниатюра Сергея Золкина на Unsplash