2 pièce(s) jointe(s)
Google Chrome 100 est disponible et s'accompagne de nouvelles fonctionnalités de Chrome DevTools
Google Chrome 100 est disponible et s'accompagne de nouvelles fonctionnalités de Chrome DevTools,
ainsi que d'une nouvelle API dédiée à 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 sur le canal stable pour Windows, Mac et Linux. Chrome 100 est également arrivé dans notre nouveau canal stable étendu pour Windows et Mac. Il sera progressivement déployé dans les jours/semaines à venir ». Chrome 100 inaugure par ailleurs une nouvelle API dédiée à la gestion du placement des fenêtres sur une configuration disposant de plusieurs écrans. Avec cette version, Google a ajouté l'API Digital Goods afin que les applications Web puissent effectuer des achats intégrés à l'aide du 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 comme étant de gravité « élevée », ce qui en fait une mise à niveau obligatoire pour tous les utilisateurs.
Nouvelle icône Chrome
Google Chrome 100 a un nouveau logo avec des changements de couleur subtils, la 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 maintenant arrivé à la version stable.
Il faut dire que le logo est resté le même depuis 2014. Pour marquer la traversée d'un nouveau cap, un designer de Google explique avoir « simplifié l’icône principale […] en supprimant les ombres, en affinant les proportions et en éclaircissant les couleurs, afin de nous aligner sur l’expression plus moderne de la marque Google ».
Des effets potentiels sur des sites à cause du numéro de version à trois chiffres
Le fait que Chrome soit passé à trois chiffres avait conduit Google a pensé que certains sites pourraient planter; étant donné que certains d'entre eux n’étaient pas taillés pour gérer les navigateurs ayant un numéro de version à trois chiffres, il y avait le risque qu’ils interprètent Chrome 100 comme étant Chrome 10. Avec Google Chrome 100, la chaîne de l'agent utilisateur du navigateur utilise désormais un numéro de version à trois chiffres par rapport à un numéro à deux chiffres, comme indiqué ci-dessous :
Code:
"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 Chrome en "Chrome/100" à trois chiffres casserait les sites ou les empêcherait de fonctionner correctement. Et Pete LePage de Google d'expliquer :
« 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é d'un chiffre à deux. J'espère que nous avons appris quelques choses qui faciliteront la transition de deux chiffres à trois.
« 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 mené des expériences dans lesquelles le navigateur a signalé le numéro de version 100, même si ce n'était pas le cas.
« Cela a conduit à quelques problèmes signalés, dont beaucoup ont déjà é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 et égales à 100.
En parlant de l'agent utilisateur, Chrome 100 sera la dernière version à prendre en charge une chaîne User-Agent 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 Hints. User-Agent Client Hints a été présentée en juin 2020 comme étant une nouvelle extension de l'API Client Hints qui « permet aux développeurs d'accéder à des informations sur le navigateur d'un utilisateur de manière ergonomique et respectueuse de la vie privée ».
Les Client Hints (indications du client, en français) permettent aux développeurs de demander activement des informations sur l'appareil ou les conditions de l'utilisateur, plutôt que d'avoir à les analyser à partir de la chaîne User-Agent (UA). Fournir cette route alternative est la première étape pour éventuellement réduire la granularité de la chaîne User-Agent.
Une section est réservée au Client Hints plus bas.
Nouvelles fonctionnalités pour les développeurs
API de placement de fenêtres multi-écrans
Pete LePage a commenté l'utilité de cette API en ces termes :
« Pour certaines applications, ouvrir de nouvelles fenêtres et les placer à des endroits spécifiques ou à des affichages spécifiques est une fonctionnalité importante. Par exemple, lorsque j'utilise Diapositives pour présenter, je souhaite que les diapositives s'affichent en plein écran sur l'écran principal et que mes notes du présentateur s'affichent sur l'autre écran.
« L'API de placement de fenêtres multi-écrans permet d'énumérer les écrans connectés à la machine de l'utilisateur et de placer des fenêtres sur des écrans spécifiques.
« Vous pouvez rapidement vérifier s'il y a plus d'un écran connecté à l'appareil avec window.screen.isExtended
Code:
1
2
| const isExtended = window.screen.isExtended;
// returns true/false |
« Mais la fonctionnalité clé se trouve dans window.getScreenDetails(), qui fournit des détails sur les affichages attachés.
Code:
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 requestFullscreen() pour mettre un élément en plein écran sur cet affichage.
Code:
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, par exemple si un nouvel écran est branché ou retiré, la résolution change, etc.
Code:
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 rajouter à votre site les achats in-app depuis Play Store
Selon Google, il s'agit d'une API pour interroger et gérer les produits numériques afin de faciliter les achats intégrés à partir d'applications Web, en conjonction avec l'API de demande de paiement (qui est utilisée pour effectuer les achats réels). L'API serait liée à un service de distribution 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 puissent accepter les achats de biens numériques (les politiques de Play Store les empêchent d'accepter le paiement via toute autre méthode). Sans cela, les sites Web qui vendent des biens numériques ne peuvent pas être installés via le Play Store.
Nouvelles fonctionnalités de Chrome DevTools
Cette version s'accompagne de plusieurs améliorations et nouveautés à Chrome DevTools. Par exemple, vous pouvez désormais afficher et modifier les règles at CSS @supports dans le volet Styles. Ces modifications facilitent l'expérimentation des règles at en temps réel. Ouvrez cette page de démonstration, inspectez l'élément <div class="box">, affichez les règles at @supports dans le volet Styles. Cliquez sur la déclaration de la règle pour la modifier.
La vidéo ci-dessous en fait un résumé :
User-Agent Client Hints
Pourquoi Google estime le passage vers cette nouvelle forme nécessaire
Lorsque les navigateurs Web font 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. Cet en-tête était destiné à préciser, par ordre d'importance, le produit (par exemple, le navigateur ou la bibliothèque) et un commentaire (par exemple, la 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 effectuant la requête (ainsi que des erreurs, en raison de la rétrocompatibilité). Nous pouvons le voir en regardant une chaîne User-Agent de Chrome :
Code:
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 en 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 diversité des 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 chaîne User-Agent vous identifie. Plus le "rapport de similitude" qui en résulte 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. Comme elle n'est pas structurée, son analyse entraîne donc une complexité inutile, ce qui est souvent à l'origine de bugs 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 répandus, car les sites peuvent avoir échoué à tester leur configuration.
Présentation du nouveau User-Agent Client Hints
User-Agent Client Hints permet d'accéder aux mêmes informations, mais d'une manière plus respectueuse de la vie privée, permettant ainsi aux navigateurs de réduire éventuellement la diffusion par défaut de la chaîne User-Agent. Les Client Hints appliquent un modèle dans lequel le serveur doit demander au navigateur un ensemble de données sur le client (les indications) et le navigateur applique ses propres politiques ou configuration utilisateur pour déterminer quelles données sont renvoyées. Ainsi, 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 auditable. Les développeurs bénéficient également d'une API plus simple, plus besoin d'expressions régulières !
L'ensemble actuel des Client Hints décrit principalement les capacités d'affichage et de connexion du navigateur. Vous pouvez explorer les détails dans Automatisation de la sélection des ressources avec les Client Hints, mais retrouvez ci-dessous un rappel du processus.
Le serveur demande des Client Hints spécifiques via un en-tête :
Réponse du serveur
Code:
Accept-CH: Viewport-Width, Width
Ou une balise meta :
Code:
<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 ultérieures :
Requête ultérieure
Code:
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 appropriée.
User-Agent Client Hints élargit 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.
User-Agent Client Hints est activé par défaut dans Chrome depuis la version 89.
Source : Google (1, 2)
Voir aussi :
:fleche: Chrome désactivera des fonctions telles que alert() dans les frames d'origine croisée, mais les développeurs regrettent qu'un changement aussi important se produise sans discussion approfondie
:fleche: Google Chrome n'affichera plus les indicateurs de sites Web sécurisés alors que l'entreprise continue ses efforts pour obtenir un Web 100 % HTTPS
:fleche: Google Chrome 92 est livré avec une détection de phishing « jusqu'à 50 fois plus rapide », grâce à des améliorations apportées à sa technologie de traitement d'image
:fleche: Chrome 94 va ajouter le mode HTTPS-First et Google prévoit de remplacer l'icône de cadenas affichée lorsqu'un site se charge via HTTPS, l'éditeur estime qu'il prête à confusion
