Эта страница переведена с помощью 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 позволяет использовать её во многих законных целях и играет важную роль для разработчиков и владельцев сайтов. Однако крайне важно также защитить конфиденциальность пользователей от скрытых методов отслеживания, а отправка информации User-Agent по умолчанию противоречит этой цели.

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

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

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

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

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

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

Accept-CH: Viewport-Width, Width

Или метатег:

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

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

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

Viewport-Width: 460
Width: 230

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

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

Подсказки по использованию User-Agent Client из Chromium 89

Подсказки клиента User-Agent включены по умолчанию в 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"
}

Демо

Вы можете протестировать как заголовки, так и JavaScript API на своем устройстве по адресу 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, необходимо преобразовать подсказку в нижний регистр и удалить префикс 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 дает вам возможность понять и поэкспериментировать с новой возможностью, прежде чем вносить какие-либо изменения в строки User-Agent.

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

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

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

Миниатюра предоставлена Сергеем Золкиным на Unsplash.