Skip to main content




User-Agent Client Hints es una nueva expansión de la API de Client Hints, que posibilita a los desarrolladores ingresar a información sobre el browser of a Username de una manera ergonómica y que preserva la privacidad.


Updated

It appears in:
Safe and secure

Las sugerencias de client posibilitan a los desarrolladores solicitar activamente información sobre el dispositivo o las condiciones del usuario, en lugar de tener que analizarla fuera de la cadena de usuario-agente (UA). Proporcionar esta ruta alternativa es el primer paso para disminuir eventualmente la granularidad de las cadenas de usuario-agente.

Learn how to upgrade your existing functionality that relies on parsing the user-agent chain to make use of user-agent client hints.

Background

Cuando los browsers Web realizan solicitudes, incluyen información sobre el navegador y su entorno para que los servidores puedan habilitar el análisis y personalizar la respuesta. Esto se definió en 1996 (RFC 1945 para HTTP / 1.0), donde puede hallar el original definition of the string User-Agent, which includes an example:

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

Este encabezado estaba destinado a especificar, en orden de relevance, el producto (a modo de ejemplo, navegador o biblioteca) y un comentario (a modo de ejemplo, versión).

The state of the user-agent string

About the intervention decades, esta cadena ha acumulado una gama de detalles adicionales sobre el cliente que realiza la solicitud (así como cruft, debido a la compatibilidad con versiones anteriores). Podemos ver eso cuando miramos la cadena actual de User-Agent de Chrome:

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

La cadena anterior contiene información sobre el sistema operativo y la versión del usuario, el modelo del dispositivo, la marca del navegador y la versión completa, pistas suficientes para inferir que es un navegador teléfono celular y sin mencionar una serie de referencias a otros navegadores por razones históricas.

The combination of these parameters with the wide diversity of possible values means that the User-Agent string could contain enough information to allow individual users to be uniquely identified. If you test your own browser at
AmIUniqueyou can see how close you
The user-agent string identifies your. Cuanto menor be el «índice de similitud» resultante, más exclusivas serán sus solicitudes, más fácil será para los servidores rastrearlo de forma encubierta.

The user-agent chain enables many use casesy tiene un propósito importante para los desarrolladores y propietarios de sitios. A pesar de todo, además es fundamental que la privacidad de los usuarios esté protegida contra métodos de seguimiento encubiertos, y el envío de información de UA de forma predeterminada va en contra de ese target.

Además existe la necesidad de mejorar la compatibilidad web cuando se trata de la cadena Usuario-Agente. No está estructurado, por lo que analizarlo genera una complejidad innecesaria, que usualmente es la causa de errores y problemas de compatibilidad del sitio que perjudican a los usuarios. Estos problemas además perjudican de forma desproporcionada a los usuarios de navegadores menos habituales, puesto que es factible que los sitios no hayan podido probar su configuración.

Presentación de las nuevas sugerencias de cliente de user agent

User Agent Client Suggestions
permitir el acceso a la misma información pero de una manera más preservada de la privacidad, lo que a su vez posibilita que los navegadores reduzcan eventualmente el valor predeterminado de la cadena Usuario-Agente de transmitir todo. Suggestions for the client Aplicar un modelo en el que el server debe solicitar al navegador un recopilatorio de datos sobre el cliente (las sugerencias) y el navegador aplica sus propias políticas o configuración de usuario para establecer qué datos se devuelven. Esto significa que en lugar de exponer all
La información de Usuario-Agente de forma predeterminada, el acceso ahora se gestiona de forma explícita y auditable. Los desarrolladores además se benefician de una API más simple: ¡no más expresiones regulares!

The current set of Customer Tips primarily describes the browser's connection and display capabilities. You can explore the details in Automate resource selection with customer feedback, pero aquí hay un repaso rápido sobre el procedimiento.

The server requests specific client suggestions via a header:

⬇️ Server response

Accept-CH: Viewport-Width, Width

Or a meta tag:

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

Después, el navegador puede elegir por enviar los siguientes headers en solicitudes posteriores:

⬆️ Subsequent request

Viewport-Width: 460
Width: 230

El servidor puede elegir por variar sus respuestas, a modo de ejemplo, ofreciendo imágenes con una resolución adecuada.

Hay discusiones en curso sobre la habilitación de las sugerencias del cliente en una solicitud inicial, pero debe considerar un diseño receptivo o una progressive improvement antes de seguir esta ruta.

Las sugerencias de cliente de agente de usuario amplían la gama de propiedades que se pueden especificar a través de el Accept-CH server response header. When the browser returns information, it will use the Sec-CH-UA prefix. For all the details, start with the explainer y posteriormente sumergirse en el iniciativa completa.

El nuevo conjunto de sugerencias se encuentra disponible en Chromium 84, por lo tanto exploremos cómo funciona todo.

User Agent Client Tips in Chromium 84

User Agent Client Suggestions will only be gradually enabled in stable Chrome like
compatibility concerns are resolved. To force test functionality, make sure to:

  • are on Chrome 84 beta o idéntico
  • enable the chrome://flags/#enable-experimental-web-platform-features flag

De manera predeterminada, el navegador devuelve la marca del navegador, la versión significativa / principal y un indicador si el cliente es un dispositivo teléfono celular:

⬆️ All requests

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

Caution:
Estas propiedades son más complejas que un solo valor, por lo que Encabezados estructurados
se usan para representar listas y valores booleanos.

User agent responses and request headers

⬇️ Answer
Accept-CH
⬆️ Request
header
⬆️ Request
Example value
Description
UA Sec-CH-UA "Chromium"; v = "84",
"Google Chrome"; v = "84"
List of browser brands and their significant version.
UA-Mobile Sec-CH-UA-Mobile ?1 Booleano que indica si el navegador está en un dispositivo teléfono celular (?1 really) or not (?0 by false).
UA-Full-Version Sec-CH-UA-Full-Version "84.0.4143.2" The full version for the browser.
UA-Platform Sec-CH-UA-Platform "Android" La plataforma del dispositivo, de forma general el sistema operativo (SO).
UA-Platform-Version Sec-CH-UA-Platform-Version "10" The version for the platform or operating system.
UA-Arch Sec-CH-UA-Arch "ARM64" La arquitectura subyacente del dispositivo. Aunque esto puede no ser relevante para mostrar la página, es factible que el sitio desee ofrecer una descarga con el formato correcto de forma predeterminada.
UA-Model Sec-CH-UA-Model "Pixel 3" The device model.
Gotchas!

Privacy and compatibility considerations mean that the value can be blank, not returned, or populated with a variable value. This is known as
GREASE.

Example exchange

An example exchange would look like this:

⬆️ Initial browser request
The browser requests the / downloads
site page and submits your default basic 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

⬇️ Server response
El servidor devuelve la página y, al mismo tiempo, solicita la versión completa del navegador y la plataforma.

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

⬆️ Subsequent requests
The browser grants the server access to the additional information and sends the additional suggestions in all subsequent responses.

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"

API de JavaScript

Al mismo tiempo de los encabezados, además se puede ingresar al User-Agent en JavaScript a través de
navigator.userAgentData. The default value Sec-CH-UA and Sec-CH-UA-Mobile se puede ingresar a la información del encabezado a través del brands and mobile properties, respectively:


console.log(navigator.userAgentData.brands);


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


console.log(navigator.userAgentData.mobile);


false;

Additional values are accessed through the getHighEntropyValues () call. The term "high entropy" is a reference to information entropy, dicho de otra forma, la cantidad de información que estos valores revelan sobre el navegador del usuario. Del mismo modo que con la solicitud de encabezados adicionales, depende del navegador qué valores, si corresponde, se devuelven.


navigator
.userAgentData.getHighEntropyValues(
["architecture", "model", "platform", "platformVersion",
"uaFullVersion"])
.then(ua => { console.log(ua) });


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

Manifestation

You can test both the headers and the JavaScript API on your own device at
user-agent-client-hints.glitch.me.

Asegúrese de que está usando Chrome 84 Beta o idéntico con
chrome://flags/#enable-experimental-web-platform-features enabled.

Lifetime suggestion and reset

Sugerencias especificadas a través de el Accept-CH El encabezado se enviará durante la sesión del navegador o hasta que se especifique un recopilatorio distinto de sugerencias.

That means if the server sends:

⬇️ Answer

Accept-CH: UA-Full-Version

Then the browser will send the Sec-CH-UA-Full-Version header on all requests for that site until the browser is closed.

⬆️ Subsequent requests

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

A pesar de todo, si otro Accept-CH header is received, then that reemplazar absolutamente current suggestions sent by the browser.

⬇️ Answer

Accept-CH: UA-Platform

⬆️ Subsequent requests

Sec-CH-UA-Platform: "Android"

El anteriormente solicitado Sec-CH-UA-Full-Version will not be sent.

It is better to think about him Accept-CH encabezado que especifica el conjunto completo de sugerencias deseadas para esa página, lo que significa que el navegador envía las sugerencias especificadas para todos los subrecursos en esa página. Aunque las sugerencias persistirán hasta la siguiente navegación, el sitio no debe confiar ni hacerse cargo que se entregarán.

Success:
Asegúrese siempre de poder ofrecer una experiencia significativa sin esta información. Esto es para impulsar la experiencia del usuario, no para definirla. ¡Es por esto que se llaman «pistas» y no «respuestas» o «requerimientos»!

Además puede utilizar esto para eliminar de manera efectiva todas las sugerencias enviadas por el navegador enviando un espacio en blanco Accept-CH in response. Consider adding this anywhere the user is resetting preferences or logging out of your site.

Este patrón además coincide con el funcionamiento de las sugerencias a través del
hashtag. The requested suggestions will only be sent in requests initiated by the page and not in any subsequent navigation.

Scope of suggestion and cross-origin requests

De manera predeterminada, las sugerencias del cliente solo se enviarán en solicitudes del mismo origen. Eso significa que si pide sugerencias específicas sobre https://example.com, pero los recursos que desea aprovechar al máximo están en https://downloads.example.com they I will not do it
receive suggestions.

Para permitir sugerencias en solicitudes de origen cruzado, cada sugerencia y origen deben especificarse a través de un Feature-Policy header. This specifies each suggestion (prefixed ch-) y la lista permitida de orígenes que deberían recibir la sugerencia. A modo de ejemplo:

⬇️ Answer of example.com

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

⬆️ Application downloads.example.com

Sec-CH-UA-Platform: "Android"

⬆️ Requests for cdn.provider or img.example.com

DPR: 2

¿Dónde usar las sugerencias de cliente de agente de usuario?

La solución rápida es que debe refactorizar cualquier instancia en la que esté analizando el encabezado User-Agent o haciendo uso de cualquiera de las llamadas de JavaScript que acceden a la misma información (dicho de otra forma, navigator.userAgent, navigator.appVersionor navigator.platform) to make use of the user agent client hints instead.

Llevando esto un paso más adelante, debe volver a evaluar el uso que hace de la información del agente de usuario y reemplazarla por otros métodos siempre y cuando sea factible. Habitualmente, puede alcanzar el mismo objetivo haciendo uso de la mejora progresiva, la detección de funciones o el diseño receptivo. El problema básico de confiar en los datos de usuario-agente es que siempre mantiene un mapeo entre la propiedad que está inspeccionando y el comportamiento que habilita. Es una sobrecarga de mantenimiento para asegurar que su detección sea completa y esté actualizada.

With these caveats in mind, the The User-Agent Client Hints repository lists some valid use cases for sites.

What about the user-agent chain?

El plan es minimizar la capacidad de rastreo encubierto en la web reduciendo la cantidad de información de identificación expuesta por la cadena de Usuario-Agente existente sin causar interrupciones indebidas en los sitios existentes. La introducción de sugerencias de cliente de agente de usuario ahora le brinda la posibilidad de entender y experimentar con la nueva capacidad, antes de que se realicen cambios en las cadenas de agente de usuario.

Por último, la información en la cadena Usuario-Agente se reducirá para que mantenga el formato heredado y, a la vez, solo proporcione el mismo navegador de alto nivel y la información de versión significativa según las sugerencias predeterminadas. En Chromium, este cambio se ha pospuesto hasta al menos 2021 para proporcionar tiempo adicional para que el ecosistema evalúe las nuevas capacidades de User Agent Client Hints.

You can test a version of this by enabling the
chrome://flags/#freeze-user-agent flag de Chrome 84. Esto devolverá una cadena con las entradas históricas por razones de compatibilidad, pero con detalles específicos. A modo de ejemplo, algo como:

Mozilla / 5.0 (Linux; Android 9; Unspecified Device) AppleWebKit / 537.36 (KHTML, like Gecko) Chrome / 85.0.0.0 Mobile Safari / 537.36

Photo by Sergey zolkin
in
Unsplash