Google Chrome 100 est disponible avec de nouvelles fonctionnalités Chrome DevTools et une nouvelle API dédiée pour la gestion du placement des fenêtres


Google a publié la mise à jour Chrome 100 pour Windows, macOS, Linux, Android et iOS : l’équipe Chrome est ravie d’annoncer l’arrivée de Chrome 100 dans le canal stable pour Windows, Mac et Linux. Chrome 100 est également arrivé dans notre nouvelle version stable étendue pour Windows et Mac. Il sera déployé progressivement au cours des prochains jours/semaines. Chrome 100 introduit également une nouvelle API dédiée à la gestion du placement des fenêtres dans une configuration multi-écran. Avec cette version, Google a ajouté l’API Digital Goods afin que les applications Web puissent effectuer des achats intégrés via le Google Play Store.

En plus des nouvelles fonctionnalités et améliorations, Chrome 100 corrige 28 vulnérabilités de sécurité, dont neuf sont marquées “de gravité élevée”, ce qui en fait une mise à jour obligatoire pour tous les utilisateurs.

Nouvelle icône chromée

Google Chrome 100 a un nouveau logo avec des changements de couleur subtils, une suppression des ombres et un cercle bleu intérieur légèrement plus grand. Google a déjà prévisualisé le nouveau logo dans les versions de Chrome Canary, mais avec la sortie de Google Chrome 100, il est désormais stable.

Il faut dire que le logo est resté le même depuis 2014. Pour marquer le franchissement d’une nouvelle direction, un designer de Google explique avoir simplifié l’icône principale [] supprimer les ombres, affiner les proportions et éclaircir les couleurs, pour s’aligner sur l’expression la plus moderne de la marque Google.

Effets possibles sur les sites en raison du numéro de version à trois chiffres

Le saut à trois chiffres de Chrome avait conduit Google à penser que certains sites pourraient planter ; Comme certains d’entre eux n’étaient pas adaptés pour gérer les navigateurs avec un numéro de version à trois chiffres, il y avait un risque qu’ils interprètent Chrome 100 comme Chrome 10. Avec Google Chrome 100, la chaîne d’agent utilisateur du navigateur utilise désormais un numéro de version à trois chiffres. . numéro de version au lieu d’une version à deux chiffres, comme indiqué ci-dessous :

"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.60 Safari/537.36"

Depuis septembre 2021, Google teste si le fait de changer l’agent utilisateur de Chrome en “Chrome/100” à trois chiffres casserait les sites ou les empêcherait de fonctionner correctement. Et Pete LePage de Google explique :

Lorsque les navigateurs ont atteint la version 10 pour la première fois, il y a eu quelques problèmes car le numéro de version majeur est passé de un à deux. J’espère que nous avons appris certaines choses qui faciliteront la transition de trois à deux chiffres.

Chrome 100 est disponible dès maintenant et Firefox 100 sera bientôt disponible. Ces numéros de version à trois chiffres peuvent causer des problèmes sur les sites qui s’appuient d’une manière ou d’une autre sur l’identification de la version du navigateur. Au cours des derniers mois, l’équipe Firefox et l’équipe Chrome ont constaté que le navigateur signalait le numéro de version 100, même si ce n’était pas le cas.

Cela a conduit à certains problèmes signalés, dont beaucoup ont maintenant été corrigés. Mais, nous avons encore besoin de votre aide :

  • Si vous êtes un mainteneur de site Web, testez votre site Web avec Chrome et Firefox 100.
  • Si vous développez une bibliothèque d’analyse User-Agent, ajoutez des tests pour analyser les versions supérieures ou égales à 100.

En parlant d’agent utilisateur, Chrome 100 sera la dernière version à prendre en charge une chaîne d’agent utilisateur non réduite par défaut. Cela fait partie d’une stratégie visant à remplacer l’utilisation de la chaîne User-Agent par la nouvelle API User-Agent Client Suggestions. User-Agent Client Hints a été introduit en juin 2020 en tant que 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 conviviale et respectueuse de la vie privée.

Les conseils client permettent aux développeurs de demander activement des informations sur l’appareil ou les conditions à l’utilisateur, plutôt que d’avoir à les analyser à partir de la chaîne User-Agent (UA). Fournir ce chemin alternatif est la première étape pour éventuellement réduire la granularité de la chaîne utilisateur-agent.

Une section est ensuite réservée aux suggestions des clients.

Nouvelles fonctionnalités pour les développeurs.

API de localisation de fenêtres à plusieurs encoches

Pete LePage commente l’utilité de cette API en ces termes :

Pour certaines applications, ouvrir de nouvelles fenêtres et les placer dans des emplacements spécifiques ou des vues spécifiques est une fonctionnalité importante. Par exemple, lorsque j’utilise Diapositives à présenter, je souhaite que mes diapositives s’affichent en plein écran sur l’écran principal et que mes notes de conférencier s’affichent sur l’autre écran.

L’API Multiple Monitor Window Placement est utilisée pour répertorier les moniteurs connectés à la machine de l’utilisateur et pour placer des fenêtres sur des moniteurs spécifiques.

Vous pouvez rapidement vérifier s’il y a plus d’un écran connecté à l’appareil avec window.display.isExtended

1
2

const isExtended = window.screen.isExtended;
// returns true/false

Mais la fonctionnalité clé est dans window.getScreenDetails()qui fournit des détails sur les écrans joints.

1
2
3
4
5
6
7
8

const x = await window.getScreenDetails();
// returns
// {
//    currentScreen: {...}
//    oncurrentscreenchange: null
//    onscreenschange: null
//    screens: [{...}, {...}]
// }

Par exemple, vous pouvez déterminer l'écran principal, puis utiliser requête plein écran() pour mettre un élément plein écran sur cet écran.

1
2
3
4
5
6
7
8

try {
  const screens = await window.getScreenDetails();
  const primary = screens
         .filter((screen) => screen.primary)[0]
  await elem.requestFullscreen({ screen: primary });
} catch (err) {
  console.error(err);
}

Et il fournit un moyen d'écouter les changements, comme si un nouvel écran est attaché ou retiré, la résolution change, etc.

1
2
3
4
5
6
7
8

const screens = await window.getScreenDetails();
let numScreens = screens.screens.length;
screens.addEventListener('screenschange', (event) => {
  if (screens.screens.length !== numScreens) {
    console.log('Screen count changed');
    numScreens = screens.screens.length;
  }
});

API Digital Goods pour ajouter votre site aux achats intégrés du Play Store

Selon Google, il s'agit d'une requête de produit numérique et d'une API de gestion pour faciliter les achats intégrés à partir d'applications Web, ainsi que de l'API de demande de paiement (qui est utilisée pour effectuer des achats réels). L'API serait liée à un service de livraison numérique connecté via l'agent utilisateur. Dans Chromium, il s'agit spécifiquement d'un wrapper d'API Web autour de l'API Android Play Billing. Pour Google, cela est nécessaire pour que les applications Web du Play Store acceptent les achats de biens numériques (les règles du Play Store les empêchent d'accepter les paiements par toute autre méthode). Sans cela, les sites Web qui vendent des produits numériques ne peuvent pas être installés via le Play Store.

Nouvelles fonctionnalités dans Chrome DevTools

Cette version est livrée avec diverses améliorations et nouvelles fonctionnalités dans Chrome DevTools. Par exemple, vous pouvez désormais afficher et modifier les règles CSS @supports dans le panneau Styles. Ces modifications facilitent l'expérimentation des règles et en temps réel. Ouvrez cette page de démonstration, inspectez l'élément

, consultez les règles @supports dans le panneau Styles. Cliquez sur l'énoncé de règle pour le modifier.

La vidéo suivante le résume :

Conseils pour le client de l'agent utilisateur

Pourquoi Google considère le passage à ce nouveau formulaire nécessaire

Lorsque les navigateurs Web font des demandes, ils incluent des informations sur le navigateur et son environnement afin que les serveurs puissent permettre l'analyse et personnaliser la réponse. Cet en-tête était destiné à préciser, par ordre d'importance, le produit (ex. navigateur ou bibliothèque) et un commentaire (ex. version).

Au cours des décennies qui ont suivi, cette chaîne a accumulé une variété de détails supplémentaires sur le client demandeur (ainsi que des erreurs, en raison de la rétrocompatibilité). Nous pouvons le voir en regardant une chaîne Chrome User-Agent :

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 avec la grande variété de valeurs possibles signifie que la chaîne User-Agent pourrait contenir suffisamment d'informations pour permettre aux utilisateurs individuels d'être identifiés de manière unique. Si vous testez votre propre navigateur sur AmIUnique, vous pouvez voir à quel point votre canal User-Agent l'identifie. Plus "l'indice de similarité" résultant est faible, plus vos requêtes sont uniques, plus il est facile pour les serveurs de vous suivre secrè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 secrètes, et 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. Parce qu'il n'est pas structuré, son analyse crée une complexité inutile, qui est souvent la cause de bogues et de problèmes de compatibilité de site qui nuisent aux utilisateurs. Ces problèmes affectent également de manière disproportionnée les utilisateurs de navigateurs moins populaires, car les sites peuvent ne pas avoir testé leurs paramètres.

Présentation de nouvelles astuces pour le client User-Agent

Les conseils du client de l'agent utilisateur donnent accès aux mêmes informations, mais d'une manière plus respectueuse de la vie privée, permettant aux navigateurs de réduire éventuellement la transmission par défaut de la chaîne de l'agent utilisateur. Les conseils client appliquent un 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 politiques ou paramètres utilisateur pour déterminer quelles données sont renvoyées. Ainsi, au lieu d'exposer toutes les informations de l'agent utilisateur par défaut, l'accès est désormais géré de manière explicite et auditable. Les développeurs bénéficient également d'une API plus simple, fini les expressions régulières !

L'ensemble actuel d'astuces client décrit principalement les capacités de connexion et d'affichage du navigateur. Vous pouvez explorer les détails dans Automatisation de la sélection des ressources avec des conseils aux clients, mais un rappel du processus suit.

Le serveur demande des suggestions spécifiques au client via un en-tête :

réponse du serveur

Accept-CH: Viewport-Width, Width

Ou une balise mta :

Le navigateur peut choisir de renvoyer les en-têtes suivants lors des requêtes suivantes :

Publier une demande

1
2

Viewport-Width: 460
Width: 230

Le serveur peut choisir de varier ses réponses, par exemple en proposant des images à une résolution adaptée.

Les conseils du client de l'agent utilisateur étendent la gamme de propriétés avec le préfixe Sec-CH-UA qui peut être spécifié via l'en-tête de réponse Accept-CH du serveur.

Les conseils du client de l'agent utilisateur sont activés par défaut dans Chrome depuis la version 89.

Source : Google (1, deux)

Voir également :

Chrome désactivera des fonctionnalités telles que alert () sur les frameworks d'origine croisée, mais les développeurs déplorent qu'un changement aussi important se produise sans discussion approfondie.
Google Chrome n'affichera plus d'indicateurs de sites Web sécurisés car l'entreprise continue de s'efforcer d'avoir un site Web 100 % HTTPS.
Google Chrome 92 est livré avec une détection de phishing jusqu'à 50 fois plus rapide, grâce aux améliorations de sa technologie de traitement d'image
Chrome 94 ajoutera le mode HTTPS-First, et Google prévoit de remplacer l'icône de verrouillage qui s'affiche lorsqu'un site se charge via HTTPS, ce qui, selon l'éditeur, est déroutant.

Leave a Comment