Nouveautés de Chrome 83

Pete LePage

Le déploiement de Chrome 83 en version stable commence maintenant.

Voici les informations à retenir :

Je m'appelle Pete LePage. Je travaille et je tourne depuis chez moi. Plongeons-nous dans le vif du sujet et découvrons les nouveautés pour les développeurs dans Chrome 83.

Types de confiance

Les scripts intersites basés sur le DOM sont l'une des failles de sécurité les plus courantes sur le Web. Il est facile d'en introduire un par erreur sur votre page. Les types de confiance peuvent aider à prévenir ces types de failles, car ils nécessitent que vous traitez les données avant de les transmettre à une fonction potentiellement dangereuse.

Prenons l'exemple de innerHTML, lorsque les types approuvés sont activés. Si j'essaie de transmettre une chaîne, la requête échoue avec une erreur de type, car le navigateur ne sait pas s'il peut approuver la chaîne.

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

À la place, je dois utiliser une fonction sécurisée, telle que textContent, transmettre un type approuvé, ou créer l'élément et utiliser appendChild().

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

Avant d'activer les types approuvés, vous devez identifier et corriger les cas de non-respect à l'aide d'un en-tête CSP report-only.

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com

Une fois que tout est configuré, vous pouvez l'activer correctement. Pour en savoir plus, consultez l'article Empêcher les failles de script intersites basé sur le DOM avec les Trusted Types sur web.dev.

Mises à jour des commandes des formulaires

Nous utilisons des commandes de formulaire HTML tous les jours, et elles sont essentielles pour une grande partie de l'interactivité du Web. Ils sont faciles à utiliser, offrent une accessibilité intégrée et sont familiers pour nos utilisateurs. Le style des commandes de formulaire peut varier selon les navigateurs et les systèmes d'exploitation. De plus, nous devons fréquemment proposer un certain nombre de règles CSS afin d'obtenir un aspect cohérent sur tous les appareils.

Auparavant, le style par défaut des commandes de formulaire.
Ensuite, le style des commandes de formulaire a été mis à jour.

J'ai été vraiment impressionné par le travail fourni par Microsoft pour moderniser l'apparence des commandes de formulaire. Au-delà d'un style visuel plus agréable, ils offrent une meilleure prise en charge tactile et une meilleure accessibilité, y compris une meilleure prise en charge du clavier.

Les nouvelles commandes de formulaire ont déjà été intégrées à Microsoft Edge et sont désormais disponibles dans Chrome 83. Pour en savoir plus, consultez l'article Mise à jour des commandes et du focus des formulaires sur le blog Chromium.

Phases d'évaluation

Mesurer la mémoire avec measureMemory()

Lancement d'une phase d'évaluation dans Chrome 83, performance.measureMemory() est une nouvelle API qui permet de mesurer l'utilisation de la mémoire de votre page et de détecter les fuites de mémoire.

Les fuites de mémoire sont faciles à introduire:

  • Oubli d'annuler l'enregistrement d'un écouteur d'événements
  • Capture d'objets à partir d'un iFrame
  • Ne pas fermer un nœud de calcul
  • Accumuler des objets dans des tableaux
  • et ainsi de suite.

Les fuites de mémoire entraînent des pages lentes et gonflées pour les utilisateurs.

if (performance.measureMemory) {
  try {
    const result = await performance.measureMemory();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

Pour en savoir plus sur la nouvelle API, consultez Surveiller l'utilisation totale de la mémoire de votre page Web avec measureMemory() sur web.dev.

Mises à jour de l'API Native File System

L'API Native File System a lancé une nouvelle phase d'évaluation dans Chrome 83 avec la prise en charge des flux accessibles en écriture et la possibilité d'enregistrer des identifiants de fichiers.

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

Les flux accessibles en écriture facilitent considérablement l'écriture dans un fichier et, comme il s'agit d'un flux, vous pouvez facilement canaliser les réponses d'un flux à un autre.

L'enregistrement des descripteurs de fichier dans IndexedDB vous permet de stocker un état ou de vous souvenir des fichiers sur lesquels un utilisateur travaillait. Par exemple, vous pouvez conserver la liste des fichiers récemment modifiés, ouvrir le dernier fichier sur lequel l'utilisateur travaillait, etc.

Vous aurez besoin d'un nouveau jeton d'évaluation pour utiliser ces fonctionnalités. Consultez mon article mis à jour L'API Native File System: simplifier l'accès aux fichiers locaux sur web.dev pour en savoir plus et découvrir comment obtenir votre nouveau jeton d'évaluation.

Autres phases d'évaluation

Consultez la liste complète des fonctionnalités en phase d'évaluation.

Nouvelles règles multi-origines

Certaines API Web augmentent le risque d'attaques par canal auxiliaire, comme Spectre. Pour atténuer ce risque, les navigateurs proposent un environnement isolé nécessitant une activation et appelé "isolation multi-origine". L'état isolé multi-origine empêche également la modification de document.domain. Pouvoir modifier document.domain permet la communication entre des documents sur le même site et a été considéré comme une faille dans la règle de même origine.

Pour en savoir plus, consultez l'article d'Eiji Making your website "cross-origin isolé" à l'aide de COOP et COEP.

Signaux Web

Mesurer la qualité de l'expérience utilisateur comporte de nombreux aspects. Bien que certains aspects de l'expérience utilisateur soient propres au site et au contexte, un ensemble commun de signaux, les Signaux Web essentiels, est essentiel à toutes les expériences Web. Ces besoins essentiels en termes d'expérience utilisateur incluent l'expérience de chargement, l'interactivité et la stabilité visuelle du contenu de la page. Combinés, ils constituent la base des Signaux Web essentiels de 2020.

  • Largest Contentful Paint mesure la vitesse de chargement perçue et marque le moment dans la chronologie de chargement de la page lorsque le contenu principal de la page est susceptible de s'être chargé.
  • Le délai de première entrée mesure la réactivité et quantifie l'expérience que les utilisateurs ressentent lorsqu'ils essaient d'interagir pour la première fois avec la page.
  • Cumulative Layout Shift mesure la stabilité visuelle et quantifie la quantité de décalages de mise en page inattendus dans le contenu visible de la page.

Toutes ces métriques capturent des résultats importants centrés sur l'utilisateur, sont mesurables sur le terrain, et disposent d'outils et d'équivalents pour les métriques de diagnostic de laboratoire. Par exemple, bien que Largest Contentful Paint soit la métrique de chargement de la ligne supérieure, elle dépend également fortement du First Contentful Paint (FCP) et du TTFB (Time to First Byte), qui restent essentiels à surveiller et à améliorer.

Pour en savoir plus, consultez l'article Présentation des Signaux Web: des métriques essentielles pour un site sain sur le blog Chromium.

Et plus encore

  • Chrome est désormais compatible avec l'API Barcode Detection, qui permet de détecter et de décoder les codes-barres.
  • La nouvelle fonction CSS @supports permet de détecter des fonctionnalités pour les sélecteurs CSS.
  • Les nouvelles annotations ARIA sont compatibles avec l'accessibilité par lecteur d'écran pour les commentaires, les suggestions et la mise en surbrillance de texte avec des significations sémantiques (semblable à <mark>).
  • La requête média prefers-color-scheme permet aux auteurs d'utiliser leur propre thème sombre afin de disposer d'un contrôle total sur les expériences qu'ils créent.
  • JavaScript est désormais compatible avec les modules des workers partagés.

Vous voulez en savoir plus ? Découvrez l'outil Fugu API Tracker.

Complément d'informations

Nous n'abordons ici que certains des points forts. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 83.

S'abonner

Pour suivre l'actualité de nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome afin de recevoir une notification par e-mail chaque fois qu'une nouvelle vidéo est mise en ligne.

Je m'appelle Pete LePage et j'ai besoin d'une coupe. Cependant, dès la sortie de Chrome 84, je serai là pour vous dire les nouveautés de Chrome.