Множество разных следов на снегу. Намек на то, кто там был.

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

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

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

Updated
Appears in: Safe and secure

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

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

Предыстория #

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

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

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

Представляем новое расширение User-Agent Client Hints #

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

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

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

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

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. Чтобы узнать все подробности, начните с пояснения, а затем погрузитесь в полное описание проекта.

Client Hints отправляются только через защищенные соединения, поэтому убедитесь, что вы перенесли свой сайт на HTTPS.

Новый набор подсказок доступен в Chromium 84, поэтому давайте рассмотрим, как всё это работает.

User-Agent Client Hints в Chromium 84 #

User-Agent Client Hints будут постепенно включаться в стабильную версию Chrome по мере решения проблем с совместимостью. Чтобы включить эту функцию для тестирования:

  • используйте бета-версию Chrome 84 или аналогичную;
  • включите флаг about://flags/#enable-experimental-web-platform-features.

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

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

Sec-CH-UA: "Chromium";v="84", "Google Chrome";v="84"
Sec-CH-UA-Mobile: ?0

Caution: Эти свойства сложнее, чем просто одно значение, поэтому для представления списков и логических значений используются структурированные заголовки.

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

⬇️Ответ Accept-CH

⬆️ Заголовок запроса
⬆️ Запрос
Пример значения
Описание
Sec-CH-UA"Chromium";v="84",
"Google Chrome";v="84"
Список брендов браузеров и их основные версии.
Sec-CH-UA-Mobile?1Логическое значение, указывающее, находится ли браузер на мобильном устройстве ( ?1истина) или нет ( ?0ложь).
Sec-CH-UA-Full-Version"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"Модель устройства.
Gotchas!

По соображениям конфиденциальности и совместимости значение может быть пустым, не возвращаться или заполняться изменяющимся значением. Это называется GREASE.

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

Обмен будет выглядеть следующим образом:

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

GET /downloads HTTP/1.1
Host: example.site

Sec-CH-UA: "Chromium";v="84", "Google Chrome";v="84"
Sec-CH-UA-Mobile: ?0

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

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

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

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

Sec-CH-UA: "Chromium";v="84", "Google Chrome";v="84"
Sec-CH-UA-Mobile: ?0
Sec-CH-UA-Full-Version: "84.0.4143.2"
Sec-CH-UA-Platform: "Android"

JavaScript API #

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

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

// output
[
{
brand: 'Chromium',
version: '84',
},
{
brand: 'Google Chrome',
version: '84',
},
];

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

// output
false;

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

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

// output
{
"architecture": "x86",
"model": "",
"platform": "Linux",
"platformVersion": "",
"uaFullVersion": "84.0.4143.2"
}

Запустите демоверсию #

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

Убедитесь, что вы используете версию Chrome 84 Beta или аналогичную с включенным флагом about://flags/#enable-experimental-web-platform-features.

Срок службы подсказки и сброс #

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

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

⬇️ Ответ

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

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

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

Sec-CH-UA-Full-Version: "84.0.4143.2"

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

⬇️ Ответ

Accept-CH: Sec-CH-UA-Platform

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

Sec-CH-UA-Platform: "Android"

Запрошенная ранее Sec-CH-UA-Full-Version не будет отправлена.

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

Success: Следите за тем, чтобы и без этой информации вы могли предоставлять пользователю качественный опыт взаимодействия. Это сделано для улучшения пользовательского опыта, а не для его определения. Вот почему их называют «подсказками», а не «ответами» или «требованиями»!

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

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

Область применения подсказок и запросов между разными источниками #

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

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

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

Accept-CH: Sec-CH-UA-Platform, DPR
Feature-Policy: ch-ua-platform downloads.example.com;
ch-dpr cdn.provider img.example.com

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

Sec-CH-UA-Platform: "Android"

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

DPR: 2

Где использовать User-Agent Client Hints? #

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

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

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

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

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

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

Вы можете протестировать эту версию, включив флаг 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

Last updated: Improve article