User-Agent Client Hints est une nouvelle extension de l'API Client Hints. Il permet aux développeurs d'accéder aux informations sur le navigateur d'un utilisateur d'une manière ergonomique et respectueuse de la confidentialité.
Les hints client permettent aux développeurs de demander activement des informations sur l'appareil ou les conditions de l'utilisateur, au lieu de les extraire de la chaîne User-Agent (UA). Fournir cette route alternative est la première étape pour réduire à terme la précision de la chaîne user-agent.
Découvrez comment mettre à jour une fonctionnalité existante qui repose sur l'analyse de la chaîne user-agent pour utiliser les hints client user-agent.
Contexte
Lorsque les navigateurs Web envoient des requêtes, ils incluent des informations sur le navigateur et son environnement afin que les serveurs puissent activer l'analyse et personnaliser la réponse. Cette valeur a été définie dès 1996 (RFC 1945 pour HTTP/1.0), où vous trouverez la définition d'origine de la chaîne User-Agent, qui comprend un exemple:
User-Agent: CERN-LineMode/2.15 libwww/2.17b3
Cet en-tête était destiné à spécifier, par ordre d'importance, le produit (par exemple, le navigateur ou la bibliothèque) et un commentaire (par exemple, la version).
État de la chaîne user-agent
Au cours des décennies qui se sont écoulées, cette chaîne a accumulé divers détails supplémentaires sur le client à l'origine de la requête (ainsi que des éléments inutiles, en raison de la rétrocompatibilité). Nous pouvons le voir en examinant la chaîne User-Agent actuelle 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 chaîne ci-dessus contient des informations sur le système d'exploitation et la version de l'utilisateur, le modèle de l'appareil, la marque et la version complète du navigateur, suffisamment d'indices pour déduire qu'il s'agit d'un navigateur mobile, sans parler d'un certain nombre de références à d'autres navigateurs pour des raisons historiques.
La combinaison de ces paramètres et de la diversité des valeurs possibles signifie que la chaîne User-Agent peut contenir suffisamment d'informations pour permettre d'identifier de manière unique les utilisateurs individuels.
La chaîne User-Agent permet de nombreux cas d'utilisation légitimes et joue un rôle important pour les développeurs et les propriétaires de sites. Toutefois, il est également essentiel que la confidentialité des utilisateurs soit protégée contre les méthodes de suivi masquées. L'envoi d'informations UA par défaut va à l'encontre de cet objectif.
Il est également nécessaire d'améliorer la compatibilité Web en ce qui concerne la chaîne user-agent. Il est non structuré. L'analyse de ce type de données entraîne donc une complexité inutile, ce qui est souvent à l'origine de bugs et de problèmes de compatibilité des sites qui nuisent aux utilisateurs. Ces problèmes affectent également de manière disproportionnée les utilisateurs de navigateurs moins courants, car les sites peuvent ne pas avoir été testés avec leur configuration.
Présentation des nouveaux indicateurs client user-agent
Les indicateurs client User-Agent permettent d'accéder aux mêmes informations, mais de manière plus respectueuse de la confidentialité. Les navigateurs peuvent ainsi réduire progressivement la diffusion par défaut de la chaîne User-Agent. Les indices client appliquent un modèle dans lequel le serveur doit demander au navigateur un ensemble de données sur le client (les indices), et le navigateur applique ses propres règles ou sa configuration utilisateur pour déterminer les données renvoyées. Autrement dit, au lieu d'exposer toutes les informations User-Agent par défaut, l'accès est désormais géré de manière explicite et vérifiable. Les développeurs bénéficient également d'une API plus simple : plus d'expressions régulières !
L'ensemble actuel d'indices client décrit principalement les fonctionnalités d'affichage et de connexion du navigateur. Vous pouvez en savoir plus dans Automatiser la sélection de ressources avec des indices client, mais voici un bref rappel du processus.
Le serveur demande des indices client spécifiques via un en-tête:
⬇️ Réponse du serveur
Accept-CH: Viewport-Width, Width
Ou une balise Meta :
<meta http-equiv="Accept-CH" content="Viewport-Width, Width" />
Le navigateur peut ensuite choisir de renvoyer les en-têtes suivants dans les requêtes ultérieures :
⬆️ Demande ultérieure
Viewport-Width: 460
Width: 230
Le serveur peut choisir de faire varier ses réponses, par exemple en diffusant des images à une résolution appropriée.
Les hints client user-agent étendent la plage de propriétés avec le préfixe Sec-CH-UA qui peut être spécifié via l'en-tête de réponse du serveur Accept-CH. Pour en savoir plus, commencez par la présentation, puis explorez la proposition complète.
Hints client user-agent de Chromium 89
Les indicateurs client User-Agent sont activés par défaut dans Chrome depuis la version 89.
Par défaut, le navigateur renvoie la marque du navigateur, la version importante/principale, la plate-forme et un indicateur indiquant si le client est un appareil mobile :
⬆️ Toutes les demandes
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"
En-têtes de requête et de réponse User-Agent
⬇️ En-tête de requête Accept-CH⬆️ Réponse |
⬆️ Requête Exemple de valeur |
Description |
|---|---|---|
Sec-CH-UA |
"Chromium";v="84","Google Chrome";v="84" |
Liste des marques de navigateurs et de leurs versions importantes. |
Sec-CH-UA-Mobile |
?1 |
Booléen indiquant si le navigateur est utilisé sur un appareil mobile (?1 pour "true") ou non (?0 pour "false"). |
Sec-CH-UA-Full-Version |
"84.0.4143.2" |
[Obsolète] Version complète du navigateur. |
Sec-CH-UA-Full-Version-List |
"Chromium";v="84.0.4143.2","Google Chrome";v="84.0.4143.2" |
Liste des marques de navigateurs et de leurs versions complètes. |
Sec-CH-UA-Platform |
"Android" |
Plate-forme de l'appareil, généralement le système d'exploitation (OS). |
Sec-CH-UA-Platform-Version |
"10" |
Version de la plate-forme ou de l'OS. |
Sec-CH-UA-Arch |
"arm" |
Architecture sous-jacente de l'appareil. Bien que cela ne soit pas pertinent pour l'affichage de la page, le site peut proposer un téléchargement qui utilise par défaut le bon format. |
Sec-CH-UA-Model |
"Pixel 3" |
Modèle de l'appareil. |
Sec-CH-UA-Bitness |
"64" |
Le nombre de bits de l'architecture sous-jacente (c'est-à-dire la taille en bits d'un entier ou d'une adresse mémoire) |
Exemple d'échange
Voici un exemple d'échange :
🅰️ Demande initiale du navigateur
Le navigateur demande la page /downloads du site et envoie son user-agent de base par défaut.
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"
⬇️ Réponse du serveur
Le serveur renvoie la page et demande également la version complète du navigateur et la plate-forme.
HTTP/1.1 200 OK
Accept-CH: Sec-CH-UA-Full-Version-List
⧖️ Requêtes ultérieures
: le navigateur accorde au serveur l'accès aux informations supplémentaires et renvoie les indications supplémentaires dans toutes les requêtes ultérieures.
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 JavaScript
En plus des en-têtes, l'User-Agent est également accessible en JavaScript via navigator.userAgentData. Vous pouvez accéder aux informations d'en-tête Sec-CH-UA, Sec-CH-UA-Mobile et Sec-CH-UA-Platform par défaut via les propriétés brands et mobile, respectivement :
// 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";
Les valeurs supplémentaires sont accessibles via l'appel getHighEntropyValues(). Le terme "entropie élevée" fait référence à l'entropie de l'information, c'est-à-dire à la quantité d'informations que ces valeurs révèlent sur le navigateur de l'utilisateur. Comme pour la requête des en-têtes supplémentaires, c'est au navigateur les valeurs renvoyées, le cas échéant.
// 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"
}
Démo
Vous pouvez tester à la fois les en-têtes et l'API JavaScript sur votre propre appareil à l'adresse user-agent-client-hints.glitch.me.
Durée de vie et réinitialisation de l'indice
Les conseils spécifiés via l'en-tête Accept-CH sont envoyés pendant la durée de la session de navigateur ou jusqu'à ce qu'un autre ensemble d'indicateurs ait été spécifié.
Cela signifie que si le serveur envoie:
⬇️ Réponse
Accept-CH: Sec-CH-UA-Full-Version-List
Le navigateur envoie ensuite l'en-tête Sec-CH-UA-Full-Version-List pour toutes les requêtes de ce site jusqu'à ce qu'il soit fermé.
⬆️ Requêtes ultérieures
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"
Toutefois, si un autre en-tête Accept-CH est reçu, cela remplace complètement les indices actuels envoyés par le navigateur.
⬇️ Réponse
Accept-CH: Sec-CH-UA-Bitness
⧖️ Demandes ultérieures
Sec-CH-UA-Platform: "64"
L'Sec-CH-UA-Full-Version-List demandée précédemment ne sera pas envoyée.
Il est préférable de considérer l'en-tête Accept-CH comme spécifiant l'ensemble complet d'indices souhaités pour cette page. Cela signifie que le navigateur envoie ensuite les indices spécifiés pour toutes les sous-ressources de cette page. Bien que les indices persistent jusqu'à la prochaine navigation, le site ne doit pas s'appuyer sur eux ni supposer qu'ils seront diffusés.
Vous pouvez également l'utiliser pour effacer efficacement tous les indices envoyés par le navigateur en envoyant un Accept-CH vide dans la réponse. Envisagez d'ajouter cette section partout où l'utilisateur réinitialise ses préférences ou se déconnecte de votre site.
Ce modèle correspond également au fonctionnement des indications via la balise <meta http-equiv="Accept-CH" …>. Les optimisations demandées ne sont envoyées que lors des requêtes lancées par la page, et non lors d'une navigation ultérieure.
Champ d'application des indications et requêtes multi-origines
Par défaut, les indices client ne sont envoyés que pour les requêtes de même origine. Cela signifie que si vous demandez des conseils spécifiques sur https://example.com, mais que les ressources que vous souhaitez optimiser se trouvent sur https://downloads.example.com, elles ne recevront pas de conseils.
Pour autoriser les indications sur les requêtes multi-origines, chaque indication et origine doivent être spécifiées par un en-tête Permissions-Policy. Pour appliquer cela à un hint client User-Agent, vous devez mettre l'hint en minuscules et supprimer le préfixe sec-. Exemple :
⬇️ Réponse 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");
⧖️ Demande de downloads.example.com
Sec-CH-UA-Platform-Version: "10"
⧖️ Demandes à cdn.provider ou img.example.com
DPR: 2
Où utiliser les User-Agent Client Hints ?
La réponse rapide est que vous devez refactoriser toutes les instances où vous analysez l'en-tête User-Agent ou utilisez l'un des appels JavaScript qui accèdent aux mêmes informations (navigator.userAgent, navigator.appVersion ou navigator.platform) pour utiliser plutôt des hints client User-Agent.
Pour aller plus loin, vous devez réexaminer votre utilisation des informations User-Agent et les remplacer par d'autres méthodes dans la mesure du possible. Souvent, vous pouvez atteindre le même objectif en utilisant l'amélioration progressive, la détection de fonctionnalités ou le design responsif. Le problème de base lié à l'utilisation des données User-Agent est que vous maintenez toujours une mise en correspondance entre la propriété que vous inspectez et le comportement qu'elle active. Il s'agit d'un coût de maintenance pour vous assurer que votre détection est complète et reste à jour.
Compte tenu de ces mises en garde, le dépôt des indicateurs client User-Agent liste certains cas d'utilisation valides pour les sites.
Qu'advient-il de la chaîne User-Agent ?
L'objectif est de réduire au maximum le suivi secret sur le Web en limitant la quantité d'informations permettant d'identifier l'utilisateur exposées par la chaîne User-Agent existante, sans perturber les sites existants. L'introduction des hints client user-agent vous permet désormais de comprendre et de tester cette nouvelle fonctionnalité avant d'apporter des modifications aux chaînes user-agent.
À terme, les informations de la chaîne User-Agent seront réduites afin de conserver le format précédent, tout en ne fournissant que les mêmes informations de navigateur et de version importantes de haut niveau que les indications par défaut. Dans Chromium, ce changement a été reporté jusqu'en 2022 au moins pour laisser l'écosystème évaluer les nouvelles fonctionnalités des indicateurs client User-Agent.
Vous pouvez tester une version de cette fonctionnalité en activant l'indicateur about://flags/#reduce-user-agent à partir de Chrome 93 (remarque : cet indicateur s'appelait about://flags/#freeze-user-agent dans les versions Chrome 84 à 92). Cette commande renvoie une chaîne avec les entrées historiques pour des raisons de compatibilité, mais avec des spécificités rectifiées. Par exemple :
Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.0.0 Mobile Safari/537.36
Miniature par Sergey Zolkin sur Unsplash