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

Nouveautés de Chrome 83

Pete LePage

Chrome 83 commence à être déployé dans la version stable.

Voici les informations à retenir :

Les types approuvés aident à éviter les failles de script intersites.
Les éléments de formulaire ont fait l'objet d'un relooking important.
Il existe un nouveau moyen de détecter les fuites de mémoire.
L'API du système de fichiers natif lance un nouveau test d'origine avec des fonctionnalités supplémentaires.
Nouvelles règles inter-origines
Nous avons lancé le programme Web Vitals afin de fournir des conseils unifiés concernant les signaux de qualité, qui sont essentiels pour offrir une expérience utilisateur optimale sur le Web.
et bien d'autres encore.

Je m'appelle Pete LePage. Je travaille et filme depuis chez moi. Je vais vous présenter les nouveautés de Chrome 83 pour les développeurs.

Types approuvés

Les attaques par script intersites basées sur le DOM sont l'une des failles de sécurité les plus courantes sur le Web. Il peut être facile d'en ajouter un accidentellement à votre page. Les types approuvés peuvent aider à prévenir ces types de failles, car ils vous obligent à traiter les données avant de les transmettre à une fonction potentiellement dangereuse.

Prenons l'exemple de innerHTML. Si les types approuvés sont activés, et que j'essaie de transmettre une chaîne, l'opération échouera avec une erreur TypeError, car le navigateur ne sait pas s'il peut faire confiance à 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, comme 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 vous avez tout configuré, vous pouvez l'activer correctement. Pour en savoir plus, consultez Prévenir les failles de script intersites basées sur le DOM avec les Trusted Types sur web.dev.

Modifications apportées aux commandes de formulaire

Nous utilisons des commandes de formulaire HTML tous les jours. Elles sont essentielles à une grande partie de l'interactivité du Web. Ils sont faciles à utiliser, intègrent l'accessibilité et sont familiers pour nos utilisateurs. Le style des commandes de formulaire peut être incohérent entre les navigateurs et les systèmes d'exploitation. Nous devons souvent inclure un certain nombre de règles CSS pour obtenir un aspect cohérent sur tous les appareils.

Avant, style par défaut des commandes de formulaire.

Après, style mis à jour des commandes de formulaire.

Je suis vraiment impressionné par le travail que Microsoft a effectué pour moderniser l'apparence des commandes de formulaire. En plus d'un style visuel plus agréable, elles offrent une meilleure compatibilité avec les écrans tactiles et une meilleure accessibilité, y compris une meilleure compatibilité avec le clavier.

Les nouvelles commandes de formulaire sont déjà disponibles dans Microsoft Edge et sont désormais disponibles dans Chrome 83. Pour en savoir plus, consultez Mises à jour des commandes de formulaire et du focus sur le blog Chromium.

Phases d'évaluation

Mesurer la mémoire avec `measureMemory()`

À partir d'une phase d'évaluation d'origine 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 à créer:

Oublier de désenregistrer un écouteur d'événements
Capturer des objets à partir d'un iFrame
Ne pas fermer un nœud de calcul
Accumuler des objets dans des tableaux
entre autres.

Les fuites de mémoire entraînent des pages qui semblent lentes et encombrées aux yeux des 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 pour les origines dans Chrome 83, avec la prise en charge des flux en écriture et la possibilité d'enregistrer des poignées 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 enregistrables facilitent grandement l'écriture dans un fichier. Étant donné qu'il s'agit d'un flux, vous pouvez facilement transmettre les réponses d'un flux à un autre.

Enregistrer des poignées de fichiers dans IndexedDB vous permet de stocker l'état ou de vous souvenir des fichiers sur lesquels un utilisateur travaillait. Par exemple, conservez une liste des fichiers récemment modifiés, ouvrez le dernier fichier sur lequel l'utilisateur travaillait, etc.

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

Autres phases d'évaluation de l'origine

Consultez la liste complète des fonctionnalités disponibles dans le test de l'origine.

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é basé sur l'activation, appelé "isolé multi-origine". L'état isolé multi-origine empêche également les modifications de document.domain. La possibilité de modifier document.domain permet la communication entre les documents du même site et a été considérée comme une faille dans la règle de même origine.

Pour en savoir plus, consultez l'article d'Eiji intitulé Making your website "cross-origin isolated" using COOP and COEP (Rendre votre site Web "isolé entre origines" à l'aide de COOP et COEP).

Signes vitaux Web

La mesure de la qualité de l'expérience utilisateur comporte de nombreuses facettes. Certains aspects de l'expérience utilisateur sont propres au site et au contexte, mais il existe un ensemble commun de signaux (Core Web Vitals) qui est essentiel pour toutes les expériences Web. Ces besoins fondamentaux en termes d'expérience utilisateur incluent l'expérience de chargement, l'interactivité et la stabilité visuelle du contenu de la page. Ils constituent la base des Core Web Vitals 2020.

Largest Contentful Paint mesure la vitesse de chargement perçue et marque le point dans la chronologie de chargement de la page où le contenu principal de la page a probablement été chargé.
Le First Input Delay mesure la réactivité et quantifie l'expérience ressentie par les utilisateurs lorsqu'ils tentent d'interagir pour la première fois avec la page.
Cumulative Layout Shift mesure la stabilité visuelle et quantifie le décalage de mise en page inattendu du contenu visible de la page.

Toutes ces métriques capturent des résultats importants axés sur l'utilisateur, sont mesurables sur le terrain et disposent d'équivalents de métriques de diagnostic en laboratoire et d'outils. Par exemple, bien que le LCP soit la métrique de chargement principale, il est également fortement dépendant du FCP (First Contentful Paint) et du TTFB (Time to First Byte), qui restent essentiels à surveiller et à améliorer.

Pour en savoir plus, consultez Présentation des métriques Web Vitals: des métriques essentielles pour un site performant sur le blog Chromium.

Et bien 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 les fonctionnalités pour les sélecteurs CSS.
Les nouvelles annotations ARIA sont compatibles avec l'accessibilité des lecteurs d'écran pour les commentaires, les suggestions et les surlignages de texte ayant une signification sémantique (comme <mark>).
La requête multimédia prefers-color-scheme permet aux auteurs de prendre en charge leur propre thème sombre afin de contrôler entièrement les expériences qu'ils créent.
JavaScript est désormais compatible avec les modules dans les nœuds de calcul partagés.

Vous voulez en savoir plus sur les nouveautés à venir ? Consultez le Fugu API Tracker pour le savoir.

Documentation complémentaire

Il ne s'agit là que de quelques-uns des points clés. Consultez les liens ci-dessous pour découvrir d'autres modifications apportées à Chrome 83.

Si vous souhaitez rester informé de nos vidéos, abonnez-vous à notre chaîne YouTube pour les développeurs Chrome. Vous recevrez alors une notification par e-mail chaque fois que nous lancerons une nouvelle vidéo.

Je m'appelle Pete LePage et j'ai besoin d'une coupe de cheveux, mais dès que Chrome 84 sera disponible, je serai là pour vous parler des nouveautés de Chrome.