Les User-Agent Client Hints sont une nouvelle extension de l'API Client Hints, qui permet aux développeurs d'accéder aux informations sur le navigateur d'un utilisateur de 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 autre route est la première étape pour réduire progressivement la granularité de la chaîne User-Agent.
Découvrez comment mettre à jour votre fonctionnalité existante qui s'appuie sur l'analyse de la chaîne User-Agent pour utiliser plutôt des indications 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 User-Agent Client Hints
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 varier ses réponses, par exemple en diffusant des images à une résolution appropriée.
Les indices 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 regarder la vidéo explicative, puis consultez la proposition complète.
User-Agent Client Hints à partir 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 |
Valeur booléenne indiquant si le navigateur est 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" |
La taille en 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 sur le 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
⬆️ Demandes ultérieures
Le navigateur accorde au serveur l'accès aux informations supplémentaires et renvoie les indices supplémentaires dans toutes les demandes 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 demande des en-têtes supplémentaires, c'est au navigateur de déterminer 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 des indices et réinitialisation
Les indices spécifiés via l'en-tête Accept-CH sont envoyés pendant toute la durée de la session du navigateur ou jusqu'à ce qu'un autre ensemble d'indices soit 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, il remplace complètement les indices actuels que le navigateur envoie.
⬇️ Réponse
Accept-CH: Sec-CH-UA-Bitness
⬆️ Requêtes 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 utiliser cette méthode pour effacer efficacement toutes les suggestions envoyées 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 indices via la balise <meta http-equiv="Accept-CH" …>. Les indices demandés ne seront envoyés que pour les requêtes initiées par la page et non pour toute navigation ultérieure.
Champ d'application de l'indice et requêtes d'origines multiples
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 indices sur les requêtes inter-origines, chaque indice et origine doivent être spécifiés 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 envoyée à downloads.example.com
Sec-CH-UA-Platform-Version: "10"
⬆️ Requêtes envoyées à 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 réduisant la quantité d'informations d'identification exposées par la chaîne User-Agent existante, sans causer de perturbation indue sur les sites existants. L'introduction des indices client User-Agent vous permet désormais de comprendre et d'essayer cette nouvelle fonctionnalité avant que des modifications ne soient apportées 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). Cela renvoie une chaîne avec les entrées de l'historique pour des raisons de compatibilité, mais avec des informations spécifiques nettoyé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