Las sugerencias de cliente del usuario-agente son una nueva expansión de la API de Client Hints que permite a los desarrolladores acceder a información sobre el navegador de un usuario de una manera ergonómica y que preserva la privacidad.
Las sugerencias del cliente permiten a los desarrolladores solicitar información de forma activa sobre el dispositivo o las condiciones del usuario, en lugar de tener que analizarla de la cadena User-Agent (UA). Proporcionar esta ruta alternativa es el primer paso para reducir, en última instancia, la granularidad de la cadena del usuario-agente.
Obtén información para actualizar la funcionalidad existente que se basa en el análisis de la cadena de usuario-agente para usar las Client Hints de usuario-agente.
Segundo plano
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 User-Agent, 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 de usuario-agente
A lo largo de las décadas, esta cadena acumuló una variedad de detalles adicionales sobre el cliente que realiza la solicitud (además de elementos obsoletos debido a la compatibilidad con versiones anteriores). Podemos ver que, cuando observamos la cadena de usuario-agente actual de Chrome, se cumple lo siguiente:
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 y la versión completa del navegador, suficientes pistas para inferir que se trata de un navegador para dispositivos móviles, sin mencionar una serie de referencias a otros navegadores por motivos históricos.
La combinación de estos parámetros con la gran diversidad de valores posibles significa que la cadena User-Agent podría contener suficiente información para permitir que los usuarios individuales se identifiquen de forma única.
La cadena User-Agent habilita muchos casos de uso legítimos y tiene un propósito importante para los desarrolladores y los propietarios de sitios. Sin embargo, también es fundamental que la privacidad de los usuarios esté protegida contra los métodos de seguimiento encubiertos, y enviar información de UA de forma predeterminada va en contra de ese objetivo.
También es necesario mejorar la compatibilidad web en lo que respecta a la cadena User-Agent. No está estructurado, por lo que analizarlo genera una complejidad innecesaria, que a menudo es la causa de errores y problemas de compatibilidad del sitio que afectan a los usuarios. Estos problemas también afectan de manera desproporcionada a los usuarios de navegadores menos comunes, ya que es posible que los sitios no hayan podido realizar pruebas con su configuración.
Presentamos las nuevas sugerencias de clientes de usuario-agente
Las Client Hints de usuario-agente habilitan el acceso a la misma información, pero de una manera que preserva más la privacidad, lo que, a su vez, permite que los navegadores reduzcan, en última instancia, la configuración predeterminada de la cadena de usuario-agente de transmitir todo. Las sugerencias del cliente aplican un modelo en el que el servidor debe solicitarle al navegador un conjunto de datos sobre el cliente (las sugerencias) y el navegador aplica sus propias políticas o configuración del 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 expresiones regulares!
El conjunto actual de sugerencias para clientes describe principalmente las capacidades de conexión y visualización del navegador. Puedes explorar los detalles en Cómo automatizar la selección de recursos con sugerencias para clientes, pero aquí tienes un repaso rápido del proceso.
El servidor solicita sugerencias de cliente 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 volver a enviar los siguientes encabezados en solicitudes posteriores:
⬆️ Solicitud posterior
Viewport-Width: 460
Width: 230
El servidor puede variar sus respuestas, por ejemplo, a través de la publicación de imágenes con una resolución adecuada.
Las sugerencias del cliente del usuario-agente expanden 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.
Sugerencias de clientes de usuario-agente a partir de Chromium 89
Las sugerencias del cliente de User-Agent se habilitaron de forma predeterminada en Chrome desde la versión 89.
De forma predeterminada, el navegador muestra la marca del navegador, la versión significativa 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 de usuario-agente
⬇️ Encabezado de la solicitud Accept-CH⬆️ Respuesta |
⬆️ Solicitud Valor de ejemplo |
Descripción |
|---|---|---|
Sec-CH-UA |
"Chromium";v="84","Google Chrome";v="84" |
Es la lista de marcas de navegadores y sus versiones significativas. |
Sec-CH-UA-Mobile |
?1 |
Es un valor booleano que indica si el navegador se encuentra en un dispositivo móvil (?1 para verdadero) o no (?0 para falso). |
Sec-CH-UA-Full-Version |
"84.0.4143.2" |
[Obsoleto]Es 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" |
Es la lista de marcas de navegadores y sus versiones completas. |
Sec-CH-UA-Platform |
"Android" |
Es la plataforma del dispositivo, por lo general, el sistema operativo (SO). |
Sec-CH-UA-Platform-Version |
"10" |
La versión de la plataforma o el SO |
Sec-CH-UA-Arch |
"arm" |
La arquitectura subyacente del dispositivo. Si bien esto puede no ser relevante para mostrar la página, es posible que el sitio desee ofrecer una descarga que tenga el formato correcto de forma predeterminada. |
Sec-CH-UA-Model |
"Pixel 3" |
El modelo del dispositivo |
Sec-CH-UA-Bitness |
"64" |
El tamaño en 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 vuelve a enviar 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 otorga al servidor acceso a la información adicional y vuelve a enviar 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 getHighEntropyValues(). El término “entropía alta” hace 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, si los hay, se muestran.
// 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.
Tiempo de vida de las sugerencias y restablecimiento
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 para ese sitio hasta que se cierre.
⬆️ 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, este reemplazará por completo las sugerencias actuales que envía el navegador.
⬇️ Respuesta
Accept-CH: Sec-CH-UA-Bitness
⬆️ Solicitudes posteriores
Sec-CH-UA-Platform: "64"
No se enviará el Sec-CH-UA-Full-Version-List solicitado anteriormente.
Es mejor pensar en el encabezado Accept-CH como la especificación del conjunto completo de sugerencias que se desean para esa página, lo que significa que el navegador envía las sugerencias especificadas para todos los subrecursos de esa página. Si bien las sugerencias persistirán hasta la próxima navegación, el sitio no debe depender de ellas ni suponer que se entregarán.
También puedes usar esto 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 agregar esto en cualquier lugar en el que el usuario restablezca las preferencias o salga de tu sitio.
Este patrón también coincide con la forma en que funcionan las sugerencias a través de la etiqueta <meta http-equiv="Accept-CH" …>. Las sugerencias solicitadas solo se enviarán en las solicitudes que inicie la página y no en ninguna navegación posterior.
Alcance de sugerencias y solicitudes de origen cruzado
De forma predeterminada, las sugerencias del cliente solo se enviarán en solicitudes del mismo origen. Eso 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 solicitudes de origen cruzado, cada sugerencia y origen debe especificarse con un encabezado Permissions-Policy. Para aplicar esto a una sugerencia de cliente de usuario-agente, debes escribir la sugerencia en minúsculas 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 a downloads.example.com
Sec-CH-UA-Platform-Version: "10"
⬆️ Solicitudes a cdn.provider o img.example.com
DPR: 2
¿Dónde usar las sugerencias de clientes de usuario-agente?
La respuesta rápida es que debes refactorizar todas las instancias en las que analizas el encabezado User-Agent o usas cualquiera de las llamadas a JavaScript que acceden a la misma información (es decir, navigator.userAgent, navigator.appVersion o navigator.platform) para usar las sugerencias de cliente de User-Agent.
Para ir un paso más allá, debes volver a examinar el 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 con la mejora progresiva, la detección de atributos o el diseño responsivo. El problema principal de depender de los datos del usuario-agente es que siempre mantienes una asignación entre la propiedad que inspeccionas y el comportamiento que habilita. Es una sobrecarga de mantenimiento para garantizar que tu detección sea completa y se mantenga actualizada.
Con estas advertencias en mente, el repositorio de User-Agent Client Hints enumera algunos casos de uso válidos para los sitios.
¿Qué sucede con la cadena de usuario-agente?
El plan es minimizar la capacidad de seguimiento encubierto en la Web reduciendo la cantidad de información de identificación que expone la cadena de usuario-agente existente sin causar interrupciones innecesarias en los sitios existentes. Presentamos las sugerencias del cliente de User-Agent, que ahora te permiten comprender y experimentar con la nueva función, antes de que se realicen cambios en las cadenas de User-Agent.
Con el tiempo, se reducirá la información en la cadena User-Agent para que mantenga el formato heredado y, al mismo tiempo, solo proporcione la misma información significativa y del navegador de alto nivel según las sugerencias predeterminadas. En Chromium, este cambio se pospuso hasta, al menos, 2022 para brindar tiempo adicional al ecosistema para que evalúe las nuevas capacidades de las sugerencias de cliente de usuario-agente.
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 de Chrome 84 a 92). Esto mostrará una cadena con las entradas históricas por motivos de compatibilidad, pero con detalles limpios. Por ejemplo, algo como 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