Cette page a été traduite par l'API Cloud Translation.

Améliorer la confidentialité des utilisateurs et l'expérience des développeurs avec les indicateurs client User-Agent

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é.

Rowan Merewood

Yoav Weiss

Les hints client permettent aux développeurs de demander activement des informations sur les un appareil ou des conditions spécifiques, au lieu de devoir les extraire du user-agent (UA). . Fournir cet itinéraire alternatif est la première étape ce qui réduit la précision des chaînes user-agent.

Découvrez comment mettre à jour vos fonctionnalités existantes qui reposent sur l'analyse de la chaîne user-agent pour utiliser les hints client user-agent à la place.

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 l'analyse et personnaliser la réponse. Cela a été défini depuis 1996 (RFC 1945 pour HTTP/1.0), où vous pouvez recherchez 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, une version).

État de la chaîne user-agent

Au cours des décennies qui ont suivi, cette chaîne a accumulé toute une gamme de les détails concernant le client à l'origine de la demande (ainsi que le contenu juridique du client, en raison du la compatibilité). En observant le user-agent actuel de Chrome, chaîne:

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 de l'utilisateur et le modèle de l'appareil, la marque du navigateur et la version complète, suffisamment d'indices pour qu'il s'agit d'un navigateur pour mobile, sans parler d'un certain nombre de références à d'autres les 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 autoriser les utilisateurs à être identifiés de manière unique.

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 il est également essentiel que les utilisateurs la confidentialité est protégée contre les méthodes de suivi dissimulé, et l'envoi par défaut des informations à UA va à l'encontre de cet objectif.

Il est également nécessaire d'améliorer la compatibilité Web en ce qui concerne le user-agent. . Il n'est pas structuré, donc son analyse entraîne une complexité inutile, ce qui est souvent la cause de bugs et de problèmes de compatibilité du site 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 réuss à tester par rapport à leur configuration.

Présentation des nouveaux indicateurs client user-agent

Hints client user-agent permettent d'accéder aux mêmes informations, mais d'une manière plus respectueuse de la confidentialité, activer l'activation des navigateurs pour finir par réduire la valeur par défaut de la chaîne user-agent de tout diffuser. Les indicateurs client appliquent une modèle dans lequel le serveur doit demander au navigateur un ensemble de données sur le client (les conseils) et le navigateur applique ses propres règles ou configuration utilisateur pour déterminer quelles données sont renvoyées. Ainsi, au lieu de tout exposer toutes les informations user-agent par défaut, l'accès est désormais géré de manière explicite et de manière vérifiable. Les développeurs bénéficient également d'une API plus simple : d'une expression.

L'ensemble actuel d'indicateurs clients décrit principalement l'affichage et et des fonctionnalités de connexion réseau. Pour en savoir plus, consultez Automatiser la sélection des ressources avec les hints client. mais voici un bref rappel du 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 alors choisir de renvoyer les en-têtes suivants dans les requêtes:

⧖️ Demande ultérieure

Viewport-Width: 460
Width: 230

Le serveur peut faire varier ses réponses, par exemple en diffusant des images à un la résolution appropriée.

Les hints client user-agent élargissent la gamme de propriétés avec Sec-CH-UA préfixe pouvant être spécifié via l'en-tête de réponse du serveur Accept-CH. Pour tous les détails, commencez par la vidéo explicative, puis puis nous examinerons 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 / majeure, plate-forme et 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 le /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, en plus, demande 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 d'informations supplémentaires et renvoie ces indications dans toutes les requêtes.

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 paramètres par défaut Sec-CH-UA, Sec-CH-UA-Mobile et Les informations d'en-tête Sec-CH-UA-Platform sont accessibles via 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(). La "entropie élevée" est une référence à l'entropie de l'information, dans d'autres mots : la quantité d'informations que ces valeurs révèlent sur navigateur. Comme pour la demande d'en-têtes supplémentaires, cela dépend du 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 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 indices spécifiés via l'en-tête Accept-CH seront envoyés pendant la durée de la 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 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"

Cependant, si un autre en-tête Accept-CH est reçu, cela sera complètement remplacer les indices actuellement 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é.

Considérez l'en-tête Accept-CH comme spécifiant l'ensemble complet des Indices souhaités pour cette page, ce qui signifie que le navigateur envoie ensuite les indications spécifiées pour toutes les sous-ressources de cette page. Même si les indices sont conservés navigation, le site ne doit pas s'appuyer sur leur affichage, ni supposer qu'ils seront livrés.

Vous pouvez également l'utiliser pour effacer efficacement tous les indices envoyés par le navigateur. en envoyant une valeur Accept-CH vide dans la réponse. Pensez à l'ajouter n'importe où 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 le Balise <meta http-equiv="Accept-CH" …>. Les indices demandés ne seront envoyés que le initié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 si vous demandez des indices spécifiques sur https://example.com, mais que les ressources que vous à optimiser sont des https://downloads.example.com, ils ne le feront pas recevoir des indices.

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 indicateur client user-agent, vous devez 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 hints client user-agent ?

La réponse rapide est que vous devez refactoriser toutes les instances où vous analysez soit dans l'en-tête user-agent, soit via les appels JavaScript qui accéder 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 de user-agent. informations et de 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 fonctionnalité ou la conception réactive. Le problème de base avec les 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. Il s'agit d'une surcharge de maintenance pour s'assurer que votre détection est complètes et à 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 divulguées par la chaîne user-agent existante tout en n'entraînant pas de perturbations excessives sur les sites existants. Présentation de l'user-agent Grâce aux hints client, vous pouvez à présent comprendre et tester le nouveau avant d'apporter des modifications aux chaînes user-agent.

À terme, les informations de la chaîne user-agent seront réduites pour maintenir le l'ancien format tout en offrant uniquement le même navigateur de haut niveau et une les informations de version conformément aux indications par défaut. Dans Chromium, cette modification a été reporté à 2022 au moins afin de laisser à l'écosystème plus de temps pour d'é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 de Chrome 93 (remarque: cet indicateur était nommé about://flags/#freeze-user-agent dans les versions Chrome 84 à 92). Cela permettra renvoyer 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 Afficher