Migra a Client Hints de usuario-agente

Estrategias para que tu sitio no dependa de la cadena usuario-agente a la nuevos User-Agent Client Hints.

Rowan Merewood

El rol de usuario-agente string es una importante creación de huellas digitales pasiva de la plataforma en los navegadores, además de ser difíciles de procesar. Sin embargo, existen todo tipo de documentos importantes para recopilar y procesar datos de usuario-agente, por lo que lo que se necesita es un el camino hacia una mejor solución. Las Client Hints de Usuario-Agente son una forma explícita para declarar tu necesidad de datos de usuario-agente y métodos para devolver los datos de una fácil de usar.

En este artículo, se explica cómo auditar tu acceso a los datos del usuario-agente y Migrar el uso de cadenas de usuario-agente a Client Hints de usuario-agente

Audita la recopilación y el uso de los datos del usuario-agente

Al igual que con cualquier forma de recopilación de datos, siempre debes comprender por qué los están recopilando. El primer paso, independientemente de si alguna acción, es comprender dónde y por qué usas los datos de usuario-agente.

Si no sabes si se usan los datos de usuario-agente ni dónde se usan, considera buscarlos el código de frontend para usar navigator.userAgent y el código de backend para con el encabezado HTTP User-Agent. También deberías revisar el código de frontend para usar funciones ya obsoletas, como navigator.platform y navigator.appVersion

Desde un punto de vista funcional, piensa en cualquier parte del código en la que te encuentres grabación o procesamiento:

  • Nombre o versión del navegador
  • Nombre o versión del sistema operativo
  • Marca o modelo del dispositivo
  • Tipo de CPU, arquitectura o valor de bits (por ejemplo, 64 bits)

También es probable que uses una biblioteca o un servicio de terceros para procesar el usuario-agente. En este caso, comprueba si se están actualizando a es compatible con User-Agent Client Hints.

¿Solo usas datos básicos de usuario-agente?

El conjunto predeterminado de Client Hints de Usuario-Agente incluye lo siguiente:

  • Sec-CH-UA: nombre del navegador y versión principal o significativa
  • Sec-CH-UA-Mobile: valor booleano que indica un dispositivo móvil
  • Sec-CH-UA-Platform: Es el nombre del sistema operativo.
    • Ten en cuenta que esto se actualizó en la especificación y se reflejará en Chrome y otros navegadores basados en Chromium.

La versión reducida de la cadena usuario-agente que se propone también conservará esta información básica de forma retrocompatible. Por ejemplo, en lugar de Chrome/90.0.4430.85: la cadena incluiría Chrome/90.0.0.0.

Si solo verificas el nombre del navegador, la versión principal en la cadena usuario-agente o sistema operativo, tu código seguirá funcionando, aunque es probable que para ver advertencias de baja.

Si bien puedes y debes migrar a Client Hints de usuario-agente, es posible que tengas de código o recursos que lo impiden. La reducción de la información en La cadena usuario-agente de esta forma retrocompatible permite garantizar que, si bien el código existente recibirá información menos detallada, conservar la funcionalidad básica.

Estrategia: API de JavaScript del cliente a pedido

Si actualmente usas navigator.userAgent, debes migrar a prefieren navigator.userAgentData antes de volver a analizar el usuario-agente.

if (navigator.userAgentData) {
  // use new hints
} else {
  // fall back to user-agent string parsing
}

Si estás verificando dispositivos móviles o computadoras de escritorio, usa el valor booleano mobile:

const isMobile = navigator.userAgentData.mobile;

userAgentData.brands es un array de objetos con brand y version. propiedades en las que el navegador puede indicar su compatibilidad con aquellas marcas. Puedes acceder a él directamente como un array o puedes usar un Llamada some() para verificar si hay una entrada específica presente:

function isCompatible(item) {
  // In real life you most likely have more complex rules here
  return ['Chromium', 'Google Chrome', 'NewBrowser'].includes(item.brand);
}
if (navigator.userAgentData.brands.some(isCompatible)) {
  // browser reports as compatible
}

Si necesitas uno de los valores de usuario-agente más detallados y con alta entropía, debes especificarlo y verificar el resultado en el Promise que se muestra:

navigator.userAgentData.getHighEntropyValues(['model'])
  .then(ua => {
    // requested hints available as attributes
    const model = ua.model
  });

También puede ser útil si desea pasar de del servidor al procesamiento del cliente. La API de JavaScript no requieren acceso a los encabezados de solicitud HTTP, para que se puedan solicitar valores de usuario-agente en en cualquier momento.

Estrategia: Encabezado estático del servidor

Si usas el encabezado de solicitud User-Agent en el servidor y tus necesidades de esos datos sean relativamente consistentes en todo su sitio, entonces puede especificar las sugerencias de clientes deseadas como un conjunto estático en tus respuestas. Este es un relativamente sencillo, ya que, por lo general, solo se necesita configurarlo ubicación. Por ejemplo, puede estar en la configuración de tu servidor web si ya aquí los encabezados, tu configuración de hosting o la configuración de nivel superior de la de la plataforma o el framework que usas para tu sitio.

Considera esta estrategia si estás transformando o personalizando las respuestas. se entrega en función de los datos usuario-agente.

Los navegadores y otros clientes pueden optar por proporcionar diferentes sugerencias predeterminadas, una buena práctica para especificar todo lo que necesitas, incluso si, en general, lo proporciona de forma predeterminada.

Por ejemplo, la configuración predeterminada actual para Chrome se representaría de la siguiente manera:

⬇️ Encabezados de respuesta

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

Si también quieres recibir el modelo del dispositivo en las respuestas, debes enviar:

⬇️ Encabezados de respuesta

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Model, Sec-CH-UA-Platform, Sec-CH-UA

Cuando proceses esto en el servidor, primero debes comprobar si el estado Se envió el encabezado Sec-CH-UA y, luego, se recurre al encabezado User-Agent. y analizar si no están disponibles.

Estrategia: Delegación de sugerencias a solicitudes de origen cruzado

Si solicitas subrecursos entre dominios o entre sitios que requieren Deberás enviar User-Agent Client Hints en sus solicitudes: especificar explícitamente las sugerencias deseadas con una política de permisos.

Por ejemplo, supongamos que https://blog.site aloja recursos en https://cdn.site, que puede mostrar recursos optimizados para un dispositivo específico. https://blog.site puede solicitar la sugerencia de Sec-CH-UA-Model, pero debe delegalo explícitamente a https://cdn.site usando Permissions-Policy encabezado. La lista de sugerencias controladas por políticas está disponible en Clients Hints Infraestructura borrador

⬇️ Respuesta de blog.site delegando la pista

Accept-CH: Sec-CH-UA-Model
Permissions-Policy: ch-ua-model=(self "https://cdn.site")

⬆️ La solicitud a los subrecursos de cdn.site incluye la sugerencia delegada

Sec-CH-UA-Model: "Pixel 5"

Puedes especificar varias sugerencias para varios orígenes, y no solo desde el rango ch-ua:

🔍️ Respuesta de blog.site en la que se delegan varias sugerencias a varios orígenes

Accept-CH: Sec-CH-UA-Model, DPR
Permissions-Policy: ch-ua-model=(self "https://cdn.site"),
                    ch-dpr=(self "https://cdn.site" "https://img.site")

Estrategia: Delega sugerencias a iframes

Los iframes de origen cruzado funcionan de forma similar a los recursos de origen cruzado, pero especifica las sugerencias que deseas delegar en el atributo allow.

⬇️ Respuesta de blog.site

Accept-CH: Sec-CH-UA-Model

↪️ HTML para blog.site

<iframe src="https://widget.site" allow="ch-ua-model"></iframe>

⬆️ Solicitud para widget.site

Sec-CH-UA-Model: "Pixel 5"

El atributo allow del iframe anulará cualquier encabezado Accept-CH que Es posible que widget.site se envíe a sí mismo, así que asegúrate de haber especificado todo el sitio iframe'd.

Estrategia: Sugerencias dinámicas del servidor

Si tienes partes específicas del recorrido del usuario en las que necesitas una selección más amplia de sugerencias que en el resto del sitio, puedes solicitarlas a pedido en lugar de hacerlo de forma estática en todo el sitio. Esto es más complejo pero, si ya configuraste diferentes encabezados por ruta, puede ser factible.

Lo importante que debes recordar aquí es que cada instancia de Accept-CH reemplazará el conjunto existente de forma eficaz. Por lo tanto, si usas dinámicamente establecer el encabezado, cada página deberá solicitar el conjunto completo de sugerencias necesarias.

Por ejemplo, puedes tener una sección en tu sitio en la que quieras proporcionar íconos y controles que coincidan con el sistema operativo del usuario. Para ello, puedes también incorporar Sec-CH-UA-Platform-Version para publicar anuncios subrecursos.

⬇️ Encabezados de respuesta para /blog

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA

⬇️ Encabezados de respuesta para /app

Accept-CH: Sec-CH-UA-Mobile, Sec-CH-UA-Platform, Sec-CH-UA-Platform-Version, Sec-CH-UA

Estrategia: Se requieren sugerencias del servidor en la primera solicitud

Puede haber casos en los que necesites más sugerencias que el conjunto predeterminado de sugerencias en la primera solicitud; sin embargo, es probable que esto sea poco común, así que revisó el razonamiento.

La primera solicitud en realidad se refiere a la primera solicitud de nivel superior para ese origen enviados en esa sesión de navegación. El conjunto predeterminado de sugerencias incluye el navegador con la versión principal, la plataforma y el indicador de dispositivos móviles. Entonces, la pregunta es si necesita datos extendidos durante la carga inicial de la página.

Para obtener sugerencias adicionales sobre la primera solicitud, hay dos opciones. Primero, puedes Usa el encabezado Critical-CH. Toma el mismo formato que Accept-CH pero le indica al navegador que debe reintentar la solicitud de inmediato si la primera se envió uno sin la pista crítica.

⬆️ Solicitud inicial

[With default headers]

⬇️ Encabezados de respuesta

Accept-CH: Sec-CH-UA-Model
Critical-CH: Sec-CH-UA-Model

🔃 El navegador vuelve a intentar la solicitud inicial con el encabezado adicional

[With default headers + …]
Sec-CH-UA-Model: Pixel 5

Esto generará la sobrecarga del reintento en la primera solicitud, pero el costo de implementación es relativamente bajo. Enviar el encabezado adicional y el navegador se encargará del resto.

Para situaciones en las que lo necesitas, realmente necesitas pistas adicionales sobre el carga de la primera página, el recurso Client Hints Reliability propuesta está diseñando una ruta para especificar sugerencias en la configuración a nivel de conexión. Esta usa el Protocolo de la capa de aplicaciones Extensión Settings(ALPS) en TLS 1.3 para habilitar este pase anticipado de sugerencias en conexiones HTTP/2 y HTTP/3. Esta aún se encuentra en una etapa muy temprana, pero si administras activamente tu propia TLS y de conexión, este es el momento ideal para contribuir.

Estrategia: Asistencia heredada

Es posible que tenga código heredado o de terceros en su sitio que dependa de: navigator.userAgent, incluidas las partes de la cadena de usuario-agente que se usarán se reducen. A largo plazo, deberías planear cambiar a la versión equivalente Llama a navigator.userAgentData, pero hay una solución provisional.

El reverso de UA-CH es una pequeña Biblioteca que te permite reemplazar navigator.userAgent por una cadena nueva compilada a partir de los valores de navigator.userAgentData solicitados.

Por ejemplo, este código generará una cadena usuario-agente que incluye el “modelo” pista:

import { overrideUserAgentUsingClientHints } from './uach-retrofill.js';
overrideUserAgentUsingClientHints(['model'])
  .then(() => { console.log(navigator.userAgent); });

La cadena resultante mostraría el modelo Pixel 5, pero igualmente mostrará la reducción No se solicitó 92.0.0.0 como la sugerencia uaFullVersion:

Mozilla/5.0 (Linux; Android 10.0; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.0.0 Mobile Safari/537.36

Más asistencia

Si estas estrategias no cubren tu caso de uso, inicia un debate en privacy-sandbox-dev-support repositorio para que podamos analizar el problema juntos.

Foto de Ricardo Rocha en Unsplash