User-Agent Client Hints es una nueva expansión de la API de Client Hints que permite que los desarrolladores accedan a la información del navegador de un usuario de una forma ergonómica y que preserva la privacidad.
Las Sugerencias de clientes permiten a los desarrolladores solicitar información de forma activa sobre el dispositivo o las condiciones del usuario, en lugar de tener que analizarla fuera de la cadena Usuario-agente (UA). Proporcionar esta ruta alternativa es el primer paso para reducir el nivel de detalle de la cadena de usuario-agente.
Obtén más información sobre cómo actualizar la funcionalidad existente que se basa en el análisis de la string de usuario-agente para usar las Sugerencias de clientes de usuario-agente en su lugar.
Información general
Cuando los navegadores web realizan solicitudes, incluyen información sobre el navegador y su entorno para que los servidores puedan habilitar las estadísticas y personalizar la respuesta. Esto se definió en 1996 (RFC 1945 para HTTP/1.0), donde puedes encontrar la definición original de la cadena de usuario-agente, que incluye un ejemplo:
User-Agent: CERN-LineMode/2.15 libwww/2.17b3
El objetivo de este encabezado era especificar, en orden de importancia, el producto (p.ej., navegador o biblioteca) y un comentario (p.ej., versión).
El estado de la cadena usuario-agente
En las décadas correspondientes, esta cadena acumuló una variedad de detalles adicionales sobre el cliente que realiza la solicitud (además de la versión no confiable, debido a la retrocompatibilidad). Podemos ver que cuando miramos la cadena de usuario-agente actual 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, suficientes pistas para inferir que se trata de un navegador para dispositivos móviles y, además, incluye referencias a otros navegadores por razones históricas.
La combinación de estos parámetros con la gran diversidad de valores posibles significa que la string de usuario-agente podría contener suficiente información para permitir que se identifique a cada usuario de forma única.
La cadena usuario-agente habilita muchos casos de uso legítimos y cumple un propósito importante para los desarrolladores y los propietarios de sitios. Sin embargo, también es fundamental que la privacidad del usuario 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 objetivo.
También es necesario mejorar la compatibilidad web cuando se trata de la cadena de usuario-agente. No es estructurado, por lo que analizarlo genera una complejidad innecesaria, que suele ser la causa de errores y problemas de compatibilidad de sitios que perjudican a los usuarios. Estos problemas también perjudican de manera desproporcionada a los usuarios de navegadores menos comunes, ya que es posible que los sitios no hayan podido probar su configuración.
Presentación de los nuevos User-Agent Client Hints
User-Agent Client Hints permite acceder a la misma información, pero de una manera que preserva la privacidad, lo que, a su vez, permite que los navegadores reduzcan con el tiempo la configuración predeterminada de transmitir todo el contenido de la cadena de usuario-agente. Las Sugerencias de clientes aplican un modelo en el que el servidor debe solicitar al navegador un conjunto de datos sobre el cliente (las sugerencias) y el navegador aplica sus propias políticas o configuración de usuario para determinar qué datos se muestran. Esto significa que, en lugar de exponer toda la información del usuario-agente de forma predeterminada, el acceso ahora se administra de forma explícita y auditable. Los desarrolladores también se benefician de una API más simple, sin más expresiones regulares.
El conjunto actual de Client Hints describe principalmente las capacidades de visualización y conexión del navegador. Puedes explorar los detalles en Cómo automatizar la selección de recursos con sugerencias de clientes, pero aquí encontrarás un repaso rápido del proceso.
El servidor solicita Client Hints específicas a través de un encabezado:
⬇️ Respuesta del servidor
Accept-CH: Viewport-Width, Width
O una metaetiqueta:
<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />
Luego, el navegador puede elegir enviar los siguientes encabezados de vuelta en las solicitudes posteriores:
🕜️ Solicitud posterior
Viewport-Width: 460
Width: 230
El servidor puede optar por variar sus respuestas, por ejemplo, entregando imágenes en una resolución adecuada.
User-Agent Client Hints amplía el rango de propiedades con el prefijo Sec-CH-UA
que se puede especificar a través del encabezado de respuesta del servidor Accept-CH. Para obtener todos los detalles, comienza con la explicación y, luego, profundiza en la propuesta completa.
Client Hints de Usuario-Agente de Chromium 89
Las Sugerencias de clientes de usuario-agente están habilitadas de forma predeterminada en Chrome desde la versión 89.
De forma predeterminada, el navegador muestra la marca del navegador, la versión importante o principal, la plataforma y un indicador si el cliente es un dispositivo móvil:
⬆️ Todas las solicitudes
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"
Encabezados de respuesta y solicitud del usuario-agente
⬇️ Respuesta Accept-CH⬆️ Encabezado de la solicitud |
⬆️ Solicitud Valor de ejemplo |
Descripción |
|---|---|---|
Sec-CH-UA |
"Chromium";v="84","Google Chrome";v="84" |
Lista de marcas de navegadores y sus versiones importantes |
Sec-CH-UA-Mobile |
?1 |
Es un valor booleano que indica si el navegador está en un dispositivo móvil (?1 para verdadero) o no (?0 para falso). |
Sec-CH-UA-Full-Version |
"84.0.4143.2" |
[Obsoleto]La versión completa del navegador. |
Sec-CH-UA-Full-Version-List |
"Chromium";v="84.0.4143.2","Google Chrome";v="84.0.4143.2" |
Lista de marcas de navegadores y su versión completa. |
Sec-CH-UA-Platform |
"Android" |
Es la plataforma del dispositivo, generalmente el sistema operativo (SO). |
Sec-CH-UA-Platform-Version |
"10" |
Indica la versión de la plataforma o del SO. |
Sec-CH-UA-Arch |
"arm" |
Arquitectura subyacente del dispositivo. Si bien esto puede no ser relevante para mostrar la página, es posible que el sitio quiera ofrecer una descarga con el formato correcto de forma predeterminada. |
Sec-CH-UA-Model |
"Pixel 3" |
El modelo del dispositivo |
Sec-CH-UA-Bitness |
"64" |
El valor de bits de la arquitectura subyacente (es decir, el tamaño en bits de un número entero o una dirección de memoria) |
Ejemplo de intercambio
Un ejemplo de intercambio se vería de la siguiente manera:
⬆️ Solicitud inicial del navegador
El navegador solicita la página /downloads
del sitio y envía su usuario-agente básico predeterminado.
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"
⬇️ Respuesta del servidor
El servidor devuelve la página y, además, solicita la versión completa del navegador y la plataforma.
HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version-List
⬆️ Solicitudes posteriores
El navegador le otorga al servidor acceso a la
información adicional y envía las sugerencias adicionales en todas las solicitudes
posteriores.
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 de JavaScript
Además de los encabezados, también se puede acceder al usuario-agente en JavaScript a través de navigator.userAgentData. Se puede acceder a la información predeterminada de los encabezados Sec-CH-UA, Sec-CH-UA-Mobile y Sec-CH-UA-Platform a través de las propiedades brands y mobile, respectivamente:
// 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";
Se puede acceder a los valores adicionales a través de la llamada a getHighEntropyValues(). El término "entropía alta" es una referencia a la entropía de la información, es decir, la cantidad de información que estos valores revelan sobre el navegador del usuario. Al igual que con la solicitud de encabezados adicionales, depende del navegador qué valores se muestran, si los hay.
// 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"
}
Demostración
Puedes probar los encabezados y la API de JavaScript en tu propio dispositivo en user-agent-client-hints.glitch.me.
Duración y restablecimiento de la pista
Las sugerencias especificadas a través del encabezado Accept-CH se enviarán durante la sesión del navegador o hasta que se especifique un conjunto diferente de sugerencias.
Esto significa que, si el servidor envía lo siguiente:
▢️ Respuesta
Accept-CH: Sec-CH-UA-Full-Version-List
Luego, el navegador enviará el encabezado Sec-CH-UA-Full-Version-List en todas las solicitudes de ese sitio hasta que se cierre el navegador.
⬆️ Solicitudes posteriores
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"
Sin embargo, si se recibe otro encabezado Accept-CH, eso reemplazará por completo las sugerencias actuales que el navegador está enviando.
▢️ Respuesta
Accept-CH: Sec-CH-UA-Bitness
⬆️ Solicitudes posteriores
Sec-CH-UA-Platform: "64"
No se enviará el Sec-CH-UA-Full-Version-List que se solicitó anteriormente.
Lo mejor es pensar en el encabezado Accept-CH como que especifica el conjunto completo de sugerencias deseadas para esa página, lo que significa que el navegador luego envía las sugerencias especificadas para todos los subrecursos de esa página. Si bien las sugerencias se conservarán durante la siguiente navegación, el sitio no debe confiar ni suponer que se entregarán.
También puedes usar esta opción para borrar de forma eficaz todas las sugerencias que envía el navegador. Para ello, envía un Accept-CH en blanco en la respuesta. Considera agregarla en todos los lugares en los que el usuario restablezca las preferencias o salga de tu sitio.
Este patrón también coincide con el funcionamiento de las sugerencias mediante la etiqueta <meta http-equiv="Accept-CH" …>. Las sugerencias solicitadas solo se enviarán en las solicitudes que inicia la página y no en ninguna navegación posterior.
Sugerencias de permisos y solicitudes de origen cruzado
Según la configuración predeterminada, las Client Hints solo se enviarán en las solicitudes del mismo origen. Esto significa que, si solicitas sugerencias específicas en https://example.com, pero los recursos que deseas optimizar están en https://downloads.example.com, no recibirán ninguna sugerencia.
Para permitir sugerencias en las solicitudes de origen cruzado, cada sugerencia y origen se debe especificar con un encabezado Permissions-Policy. Para aplicar esto a una sugerencia de cliente de usuario-agente, debes
poner la sugerencia en minúscula y quitar el prefijo sec-. Por ejemplo:
⬇️ Respuesta de 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");
📊️ Solicitud para downloads.example.com
Sec-CH-UA-Platform-Version: "10"
⬆️ Solicitudes a cdn.provider o img.example.com
DPR: 2
¿Dónde usar User-Agent Client Hints?
La respuesta rápida es que debes refactorizar cualquier instancia en la que analices el encabezado de usuario-agente o uses cualquiera de las llamadas de JavaScript que accedan a la misma información (es decir, navigator.userAgent, navigator.appVersion o navigator.platform) para usar User-Agent Client Hints.
Si vamos un paso más allá, debes volver a examinar tu uso de la información del usuario-agente y reemplazarla por otros métodos siempre que sea posible. A menudo, puedes lograr el mismo objetivo si usas la mejora progresiva, la detección de funciones o el diseño responsivo. El problema básico de depender de los datos del usuario-agente es que siempre se mantiene una asignación entre la propiedad que inspeccionas y el comportamiento que habilita. Es una sobrecarga de mantenimiento que garantiza que la detección sea integral y se mantenga actualizada.
Teniendo en cuenta estas advertencias, el repositorio de User-Agent Client Hints muestra algunos casos de uso válidos para los sitios.
¿Qué sucede con la cadena usuario-agente?
El plan es minimizar la capacidad del seguimiento encubierto en la Web reduciendo la cantidad de información de identificación que expone la cadena usuario-agente existente sin causar interrupciones indebidas en los sitios existentes. Presentamos User-Agent Client Hints ahora te da la oportunidad de comprender y experimentar con la nueva capacidad, antes de que se realicen cambios en las cadenas de usuario-agente.
Con el tiempo, se reducirá la información en la cadena usuario-agente para que se mantenga el formato heredado y se proporcione solo el mismo navegador de alto nivel y la misma información significativa de la versión según las sugerencias predeterminadas. En Chromium, este cambio se postergó al menos hasta 2022 para brindar tiempo adicional para que el ecosistema evalúe las nuevas funciones de User-Agent Client Hints.
Para probar una versión de esto, habilita la marca about://flags/#reduce-user-agent desde Chrome 93 (Nota: Esta marca se llamaba about://flags/#freeze-user-agent en las versiones 84 a 92 de Chrome). Esto mostrará una cadena con las entradas históricas por razones de compatibilidad, pero con información específica depurada. Por ejemplo, haz lo siguiente:
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Mobile Safari/537.36
Miniatura de Sergey Zolkin en Unsplash