Les indicateurs client User-Agent sont une nouvelle extension de l'API Client Hints. Ils permettent aux développeurs d'accéder à des informations sur le navigateur d'un utilisateur de manière ergonomique et protégeant la confidentialité.
Les indications client permettent aux développeurs de demander activement des informations sur l'appareil ou les conditions de l'utilisateur, plutôt que de les analyser à partir de la chaîne user-agent (UA). Fournir ce routage alternatif constitue la première étape pour, à terme, réduire la précision de la chaîne user-agent.
Découvrez comment mettre à jour votre fonctionnalité existante qui repose sur l'analyse de la chaîne user-agent pour utiliser les indicateurs client user-agent à la place.
Contexte
Lorsque des navigateurs Web effectuent des requêtes, ils incluent des informations sur le navigateur et son environnement afin que les serveurs puissent activer les analyses et personnaliser la réponse. Elle a été définie depuis 1996 (RFC 1945 pour HTTP/1.0), où vous pouvez trouver la définition d'origine de la chaîne user-agent, qui inclut 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, navigateur ou bibliothèque) et un commentaire (par exemple, la version).
État de la chaîne user-agent
Au cours des décennies écoulées, cette chaîne a accumulé plusieurs informations supplémentaires sur le client à l'origine de la requête (tout en étant peu complexe, en raison de la rétrocompatibilité). Nous pouvons voir qu'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, et sans mentionner un certain nombre de références à d'autres navigateurs pour des raisons historiques.
La combinaison de ces paramètres avec la grande diversité des valeurs possibles signifie que la chaîne user-agent peut contenir suffisamment d'informations pour permettre à chaque utilisateur d'être identifié de manière unique. Si vous testez votre propre navigateur sur AmIUnique, vous pouvez voir à quel point votre chaîne user-agent vous identifie vous. Plus le "ratio de similarité" obtenu est faible, plus vos requêtes sont uniques, plus il est facile pour les serveurs de vous suivre discrètement.
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. Cependant, il est également essentiel que la confidentialité des utilisateurs soit protégée contre les méthodes de suivi dissimulées, et l'envoi d'informations UA par défaut va à l'encontre de cet objectif.
Vous devez également améliorer la compatibilité Web en ce qui concerne la chaîne user-agent. Il n'est pas structuré. Par conséquent, son analyse engendre une complexité inutile, qui est souvent à l'origine de bugs et de problèmes de compatibilité avec les sites qui nuisent aux utilisateurs. Ces problèmes nuisent également de manière disproportionnée aux utilisateurs de navigateurs moins courants, car les sites n'ont peut-être pas pu vérifier leur configuration.
Présentation des nouveaux indicateurs client User-Agent
Les indications client User-Agent permettent d'accéder aux mêmes informations, mais d'une manière plus protégeant la confidentialité. Les navigateurs peuvent ainsi réduire la diffusion par défaut de la chaîne user-agent, qui consiste à tout diffuser. Les suggestions de client appliquent un modèle dans lequel le serveur doit demander au navigateur un ensemble de données sur le client (les suggestions), et le navigateur applique ses propres règles ou configuration utilisateur pour déterminer les données renvoyées. Cela signifie qu'au lieu d'exposer toutes les informations du user-agent par défaut, l'accès est désormais géré de manière explicite et contrôlable. Les développeurs bénéficient également d'une API plus simple : il n'y a plus d'expressions régulières.
L'ensemble actuel d'indicateurs client décrit principalement les fonctionnalités d'affichage et de connexion du navigateur. Vous pouvez explorer les détails de la section Automatiser la sélection des ressources avec des conseils client, mais voici un rappel rapide du processus.
Le serveur demande des indications 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 suivantes:
⬆️ Demande ultérieure
Viewport-Width: 460
Width: 230
Le serveur peut choisir de varier ses réponses, par exemple en diffusant des images à une résolution appropriée.
Les indicateurs 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 obtenir tous les détails, commencez par la description, puis examinez la proposition complète.
Indices 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 affiche la marque du navigateur, sa version importante / majeure et la plate-forme, ainsi qu'un indicateur 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 réponse et de requête user-agent
⬇️ Réponse Accept-CH⬆️ En-tête de demande |
⬆️ Demande Exemple de valeur |
Description |
|---|---|---|
Sec-CH-UA |
"Chromium";v="84","Google Chrome";v="84" |
Liste des marques de navigateurs et leur version importante |
Sec-CH-UA-Mobile |
?1 |
Booléen indiquant si le navigateur est installé 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 leur version complète. |
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 dont le format est le bon par défaut. |
Sec-CH-UA-Model |
"Pixel 3" |
Modèle de l'appareil. |
Sec-CH-UA-Bitness |
"64" |
Le niveau de bits de l'architecture sous-jacente (c'est-à-dire la taille en bits d'un entier ou d'une adresse mémoire) |
Exemple de place de marché
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 autorise le serveur à accéder aux informations supplémentaires et les renvoie 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, le user-agent est également accessible en JavaScript via navigator.userAgentData. Les informations d'en-tête Sec-CH-UA, Sec-CH-UA-Mobile et Sec-CH-UA-Platform par défaut sont accessibles 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 des informations, en d'autres termes : la quantité d'informations que ces valeurs révèlent sur le navigateur de l'utilisateur. Comme pour la demande d'en-têtes supplémentaires, le navigateur détermine 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émonstration
Vous pouvez tester les en-têtes et l'API JavaScript sur votre propre appareil sur user-agent-client-hints.glitch.me.
Indice à vie et réinitialisation
Les indications spécifiées dans l'en-tête Accept-CH sont envoyées pendant la durée de la session de navigateur ou jusqu'à ce qu'un autre ensemble d'indicateurs soit spécifié.
Cela signifie que si le serveur envoie:
⬇️ Réponse
Accept-CH: Sec-CH-UA-Full-Version-List
Le navigateur enverra ensuite l'en-tête Sec-CH-UA-Full-Version-List sur toutes les requêtes pour ce site jusqu'à ce que le navigateur soit fermé.
⬆️ Demandes suivantes
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, il remplace complètement les indications actuelles envoyées par le navigateur.
⬇️ Réponse
Accept-CH: Sec-CH-UA-Bitness
⬆️ Demandes suivantes
Sec-CH-UA-Platform: "64"
Les informations de Sec-CH-UA-Full-Version-List demandées précédemment ne seront pas envoyées.
Il est préférable de considérer l'en-tête Accept-CH comme spécifiant l'ensemble complet des indications souhaitées pour cette page, ce qui signifie que le navigateur envoie ensuite les indications spécifiées pour toutes les sous-ressources de cette page. Bien que les indications s'appliquent à la navigation suivante, le site ne doit pas s'appuyer sur ces indications ni supposer qu'elles seront diffusées.
Vous pouvez également l'utiliser pour effacer efficacement toutes les indications envoyées par le navigateur en envoyant un Accept-CH vide dans la réponse. Pensez à l'ajouter partout où l'utilisateur réinitialise ses préférences ou se déconnecte de votre site.
Ce schéma correspond également au fonctionnement des indications via la balise <meta http-equiv="Accept-CH" …>. Les indications demandées ne seront envoyées que lors des requêtes lancées par la page et non lors de toute navigation ultérieure.
Champ d'application des indications et requêtes multi-origines
Par défaut, les indications client ne sont envoyées que pour des requêtes de même origine. Cela signifie que si vous demandez des indices spécifiques sur https://example.com, mais que les ressources que vous souhaitez optimiser sont sur https://downloads.example.com, elles ne recevront pas d'indices.
Pour autoriser les indications dans les requêtes multi-origines, chaque indice et chaque origine doivent être spécifiés par un en-tête Permissions-Policy. Pour l'appliquer à un indicateur client user-agent, vous devez mettre l'indice 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 indicateurs client User-Agent ?
La réponse rapide est que vous devez refactoriser toutes les instances dans lesquelles vous analysez l'en-tête user-agent ou l'un des appels JavaScript qui accèdent aux mêmes informations (par exemple, navigator.userAgent, navigator.appVersion ou navigator.platform) afin d'utiliser les indicateurs client user-agent à la place.
Pour aller plus loin, vous devez réexaminer votre utilisation des informations user-agent et les remplacer par d'autres méthodes autant que possible. Souvent, vous pouvez atteindre le même objectif en utilisant l'amélioration progressive, la détection de fonctionnalités ou le responsive design. Le problème principal lié à l'utilisation des données user-agent est que vous conservez toujours un mappage entre la propriété que vous inspectez et le comportement qu'elle autorise. Cela représente un coût de maintenance supplémentaire pour garantir que votre détection est complète et à jour.
En tenant compte de ces mises en garde, le dépôt User-Agent Client Hints répertorie certains cas d'utilisation valides pour les sites.
Qu'advient-il de la chaîne user-agent ?
L'objectif est de réduire la capacité du suivi dissimulé sur le Web en réduisant la quantité d'informations d'identification exposées par la chaîne user-agent existante, sans perturber inutilement les sites existants. Avec les indicateurs client user-agent, vous pouvez désormais comprendre et tester cette nouvelle fonctionnalité avant d'apporter des modifications aux chaînes user-agent.
Par la suite, les informations contenues dans la chaîne user-agent seront réduites afin de conserver l'ancien format tout en ne fournissant que le même navigateur de haut niveau et les mêmes informations de version importantes que dans les suggestions par défaut. Dans Chromium, cette modification a été reportée au moins en 2022 afin de laisser plus de temps à l'écosystème pour évaluer les nouvelles fonctionnalités des indicateurs client pour les user-agents.
Vous pouvez tester une version de cette fonctionnalité en activant l'indicateur about://flags/#reduce-user-agent dans Chrome 93 (Remarque: cet indicateur s'appelait about://flags/#freeze-user-agent dans les versions 84 à 92 de Chrome). Cette commande renvoie une chaîne avec les entrées historiques pour des raisons de compatibilité, mais avec des spécificités propres. 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 de Sergey Zolkin sur Unsplash