Neu in Chrome 83

Pete LePage

Chrome 83 wird jetzt in der stabilen Version eingeführt.

Dazu sollten Sie Folgendes wissen:

Ich bin Pete LePage und arbeite und filme von zu Hause aus. Sehen wir uns an, was es Neues für Entwickler in Chrome 83 gibt.

Vertrauenswürdige Typen

DOM-basiertes Cross-Site-Scripting ist eine der häufigsten Sicherheitslücken im Web. Es kann leicht passieren, dass Sie versehentlich einen auf Ihrer Seite einfügen. Vertrauenswürdige Typen können solche Sicherheitslücken verhindern, da Sie die Daten verarbeiten müssen, bevor Sie sie an eine potenziell gefährliche Funktion übergeben.

Wenn ich beispielsweise innerHTML verwende und Trusted Types aktiviert sind, schlägt der Versuch, einen String zu übergeben, mit einem TypeError fehl, da der Browser nicht weiß, ob er dem String vertrauen kann.

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

Stattdessen muss ich entweder eine sichere Funktion wie textContent verwenden, einen vertrauenswürdigen Typ übergeben oder das Element erstellen und appendChild() verwenden.

// 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);

Bevor Sie Trusted Types aktivieren, sollten Sie alle Verstöße mithilfe eines report-only-CSP-Headers identifizieren und beheben.

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

Wenn Sie alles richtig angeschlossen haben, können Sie das Gerät einschalten. Vollständige Informationen finden Sie unter DOM-basiertes Cross-Site-Scripting mit Trusted Types verhindern auf web.dev.

Aktualisierungen bei Formularsteuerelementen

Wir verwenden HTML-Formularsteuerelemente jeden Tag und sie sind für einen Großteil der Interaktivität des Webs unerlässlich. Sie sind einfach zu bedienen, bieten integrierte Barrierefreiheit und sind unseren Nutzern vertraut. Die Formatierung von Formularsteuerelementen kann je nach Browser und Betriebssystem unterschiedlich sein. Häufig müssen wir eine Reihe von CSS-Regeln bereitstellen, um ein einheitliches Erscheinungsbild auf allen Geräten zu erzielen.

Vorherige Standardformatierung von Formularsteuerelementen.
Nach der Aktualisierung des Stils von Formularsteuerelementen.

Ich bin wirklich beeindruckt von der Arbeit, die Microsoft geleistet hat, um das Erscheinungsbild von Formularsteuerelementen zu modernisieren. Neben dem ansprechenderen visuellen Stil bieten sie eine bessere Touch-Unterstützung und eine bessere Barrierefreiheit, einschließlich einer verbesserten Tastaturunterstützung.

Die neuen Formularsteuerelemente sind bereits in Microsoft Edge verfügbar und jetzt auch in Chrome 83. Weitere Informationen finden Sie im Chromium-Blog unter Updates to Form Controls and Focus.

Ursprungstests

Arbeitsspeicher mit measureMemory() messen

performance.measureMemory() ist eine neue API, die in Chrome 83 als Ursprungstest eingeführt wurde. Mit ihr lässt sich die Speichernutzung Ihrer Seite messen und Speicherlecks erkennen.

Speicherlecks lassen sich leicht verursachen:

  • Event-Listener nicht abmelden
  • Objekte aus einem iFrame erfassen
  • Worker nicht schließen
  • Objekte in Arrays ansammeln
  • usw.

Speicherlecks führen dazu, dass Seiten langsam und aufgebläht wirken.

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

Weitere Informationen zur neuen API finden Sie unter Monitor your web page's total memory usage with measureMemory() auf web.dev.

Aktualisierungen der Native File System API

Für die Native File System API wurde in Chrome 83 ein neuer Ursprungstest mit Unterstützung für beschreibbare Streams und die Möglichkeit zum Speichern von Dateihandles gestartet.

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.
}

Mit Streams, in die geschrieben werden kann, ist es viel einfacher, in eine Datei zu schreiben. Da es sich um einen Stream handelt, können Sie Antworten problemlos von einem Stream in einen anderen weiterleiten.

Wenn Sie Dateihandles in IndexedDB speichern, können Sie den Status speichern oder sich merken, an welchen Dateien ein Nutzer gearbeitet hat. Sie können beispielsweise eine Liste der zuletzt bearbeiteten Dateien führen oder die letzte Datei öffnen, an der der Nutzer gearbeitet hat.

Sie benötigen ein neues Origin-Trial-Token, um diese Funktionen zu verwenden. In meinem aktualisierten Artikel The Native File System API: Simplifying access to local files auf web.dev finden Sie alle Details und Informationen dazu, wie Sie Ihr neues Origin-Trial-Token erhalten.

Weitere Ursprungstests

Eine vollständige Liste der Funktionen im Ursprungstest finden Sie unter.

Neue Cross-Origin-Richtlinien

Einige Web-APIs erhöhen das Risiko von Side-Channel-Angriffen wie Spectre. Um dieses Risiko zu mindern, bieten Browser eine isolierte Umgebung an, die auf Opt-in basiert und als „ursprungsübergreifend isoliert“ bezeichnet wird. Der Status „ursprungsübergreifend isoliert“ verhindert auch Änderungen an document.domain. Die Möglichkeit, document.domain zu ändern, ermöglicht die Kommunikation zwischen SameSite-Dokumenten und wurde als Schlupfloch in der Same-Origin-Policy betrachtet.

Weitere Informationen finden Sie im Beitrag von Eiji Making your website "cross-origin isolated" using COOP and COEP.

Web Vitals

Die Qualität der Nutzerfreundlichkeit lässt sich auf viele Arten messen. Die Erfahrung der Nutzer hängt zwar in vielerlei Hinsicht von der jeweiligen Website und dem konkreten Kontext ab, es gibt aber eine Reihe von Messwerten, die für alle Webseiten entscheidend sind: die Core Web Vitals. Zu diesen grundlegenden Nutzerfreundlichkeitsanforderungen gehören die Ladezeiten, die Interaktivität und die visuelle Stabilität von Seiteninhalten. Sie bilden die Grundlage der Core Web Vitals von 2020.

  • Der Messwert Largest Contentful Paint misst die empfundene Ladegeschwindigkeit und markiert den Punkt während des Seitenaufbaus, zu dem der Hauptinhalt einer Seite wahrscheinlich geladen wurde.
  • First Input Delay misst die Reaktionsfähigkeit und quantifiziert die Erfahrung von Nutzern, wenn sie versuchen, zum ersten Mal mit der Seite zu interagieren.
  • Der Cumulative Layout Shift misst die visuelle Stabilität und quantifiziert das Ausmaß unerwarteter Layoutverschiebungen sichtbarer Seiteninhalte.

Alle diese Messwerte erfassen wichtige nutzerorientierte Ergebnisse, sind im Feld messbar und haben entsprechende Labordiagnosemesswerte und ‑tools. „Largest Contentful Paint“ ist beispielsweise der wichtigste Messwert für das Laden, hängt aber auch stark von „First Contentful Paint“ (FCP) und „Time to First Byte“ (TTFB) ab. Diese Messwerte müssen weiterhin im Blick behalten und verbessert werden.

Weitere Informationen finden Sie im Chromium-Blog.

Und vieles mehr

  • Chrome unterstützt jetzt die Barcode Detection API, mit der Barcodes erkannt und decodiert werden können.
  • Die neue CSS-Funktion @supports bietet die Möglichkeit, Funktionen für CSS-Selektoren zu erkennen.
  • Neue ARIA-Anmerkungen unterstützen die Barrierefreiheit für Screenreader für Kommentare, Vorschläge und Texthervorhebungen mit semantischen Bedeutungen (ähnlich wie <mark>).
  • Mit der prefers-color-scheme-Media-Query können Autoren ihr eigenes dunkles Design unterstützen und haben so die volle Kontrolle über die von ihnen entwickelten Funktionen.
  • JavaScript unterstützt jetzt Module in Shared Workers.

Neugierig, was als Nächstes kommt? Im Fugu API Tracker können Sie sich einen Überblick verschaffen.

Weitere Informationen

Dies sind nur einige der wichtigsten Neuerungen. Unter den folgenden Links finden Sie weitere Änderungen in Chrome 83.

Abonnieren

Wenn Sie über unsere Videos auf dem Laufenden bleiben möchten, abonnieren Sie unseren YouTube-Kanal für Chrome-Entwickler. Sie erhalten dann eine E-Mail-Benachrichtigung, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und ich brauche einen Haarschnitt. Aber sobald Chrome 84 veröffentlicht wird, bin ich wieder da, um euch zu erzählen, was es Neues in Chrome gibt.