Nouveautés de Chrome 83

Pete LePage

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

Voici les informations à retenir :

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 de confiance

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 contrôles de formulaire peut varier selon 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.

J'ai été vraiment impressionné par le travail de Microsoft 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()

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 à 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 démarré une nouvelle phase d'évaluation dans Chrome 83, avec la prise en charge des flux accessibles en écriture et la possibilité d'enregistrer les 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 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, vous pouvez conserver une liste des fichiers récemment modifiés, ouvrir le dernier fichier sur lequel l'utilisateur a travaillé, 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

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 réduire ce risque, les navigateurs proposent un environnement isolé multi-origine, basé sur l'activation. 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 provenant d'un même site et a été considérée comme une faille dans la règle d'origine commune.

Pour en savoir plus, consultez l'article d'Eiji intitulé Rendre votre site Web isolé multi-origine à l'aide de COOP et COEP.

Signes vitaux Web

La mesure de la qualité de l'expérience utilisateur présente de nombreux aspects. Bien que certains aspects de l'expérience utilisateur soient spécifiques au site et au contexte, il existe un ensemble commun de signaux, les Core Web Vitals, qui sont essentiels à toutes les expériences Web. Ces besoins principaux en matière 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

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

Documentation complémentaire

Cette présentation ne porte que sur certains points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires dans Chrome 83.

S'abonner

Ne manquez pas nos dernières vidéos, puis abonnez-vous à notre chaîne YouTube pour les développeurs Chrome. Vous recevrez 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 présenter les nouveautés de Chrome.