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 l'état de l'utilisateur, au lieu de les analyser dans 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 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. Cela a été défini depuis 1996 (RFC 1945 pour HTTP/1.0), où vous pouvez trouver 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, navigateur ou bibliothèque) et un commentaire (par exemple, la version).
État de la chaîne user-agent
Au cours des décennies qui ont suivi, cette chaîne a accumulé plusieurs informations supplémentaires sur le client à l'origine de la requête (ainsi que des données brutes en raison de la rétrocompatibilité). En examinant la chaîne user-agent actuelle de Chrome, nous pouvons constater que:
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 et de la grande diversité des valeurs possibles signifie que la chaîne user-agent peut contenir suffisamment d'informations pour permettre l'identification unique des utilisateurs.
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é. L'envoi par défaut d'informations UA 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. Comme il n'est pas structuré, son analyse entraîne une complexité inutile, ce qui est souvent à l'origine de bugs et de problèmes de compatibilité du site qui nuisent aux utilisateurs. Ces problèmes ont également un impact considérable sur les utilisateurs de navigateurs moins courants, car les sites n'ont peut-être pas testé 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, à terme, réduire la fréquence par défaut de diffusion de la chaîne user-agent. Les indicateurs 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 configuration utilisateur pour déterminer les données renvoyées. Cela signifie qu'au lieu d'exposer toutes les informations sur le 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, qui n'utilise 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 dans la section Automatiser la sélection des ressources avec les hints client, mais voici un bref rappel sur le processus.
Le serveur demande des hints 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 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 affiche la marque du navigateur, la version majeure / principale, la plate-forme et 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 requête et de réponse user-agent
⬇️ Réponse Accept-CH⧖️ En-tête de la demande |
⧖️ Demande Exemple de valeur |
Description |
|---|---|---|
Sec-CH-UA |
"Chromium";v="84","Google Chrome";v="84" |
Liste des marques de navigateurs et de leur version significative. |
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 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. Même si cela n'a pas d'intérêt pour l'affichage de la page, le site peut proposer un téléchargement dont le format par défaut est correct. |
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 de place de marché
Voici un exemple de place de marché:
🔒️ 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 ainsi que 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 suivantes.
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
Outre les en-têtes, l'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, il s'agit de la quantité d'informations que ces valeurs révèlent à propos du 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émonstration
Vous pouvez tester 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 enverra ensuite l'en-tête Sec-CH-UA-Full-Version-List à toutes les requêtes pour ce site jusqu'à la fermeture du navigateur.
🗓️ Demandes 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 remplacera 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'objet Sec-CH-UA-Full-Version-List précédemment demandé ne sera pas envoyé.
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, ce qui signifie que le navigateur envoie ensuite les indicateurs spécifiés pour toutes les sous-ressources de cette page. Bien que les suggestions s'appliquent à la navigation suivante, le site ne doit pas s'appuyer sur ces suggestions ni supposer qu'elles seront affichées.
Vous pouvez également l'utiliser pour effacer efficacement tous les conseils envoyés par le navigateur en envoyant un Accept-CH vide dans la réponse. Pensez à l'ajouter chaque fois que 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 hints client ne sont envoyés que pour des requêtes de même origine. Cela signifie que si vous demandez des indications spécifiques sur https://example.com, mais que les ressources que vous souhaitez optimiser se trouvent sur https://downloads.example.com, elles ne recevront aucune indication.
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 l'appliquer à un hints client user-agent, vous devez le mettre 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 hints client user-agent ?
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 (par exemple, navigator.userAgent, navigator.appVersion ou navigator.platform) pour utiliser les hints 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 dans la mesure du possible. Souvent, vous pouvez atteindre le même objectif en utilisant l'amélioration progressive, la détection de caractéristiques ou le responsive design. Le problème de base lié à l'utilisation des données user-agent est que vous devez toujours maintenir un mappage entre la propriété que vous inspectez et le comportement qu'elle active. Cela représente une surcharge de maintenance pour garantir que votre détection est complète et reste à jour.
En gardant ces mises en garde à l'esprit, le dépôt des hints client user-agent répertorie quelques cas d'utilisation valides pour les sites.
Qu'advient-il de la chaîne user-agent ?
L'objectif est de minimiser 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, tout en ne perturbant pas inutilement 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 pour conserver l'ancien format, tout en ne fournissant que le même navigateur de haut niveau et les mêmes informations de version significatives que conformément aux indications par défaut. Dans Chromium, cette modification a été reportée au moins jusqu'en 2022 afin de laisser plus de temps à l'écosystème pour évaluer les nouvelles fonctionnalités des hints client user-agent.
Vous pouvez tester une version de cette fonctionnalité en activant l'indicateur about://flags/#reduce-user-agent depuis Chrome 93 (Remarque: cet indicateur était nommé 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 détails nettoyés. 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