Neu in Chrome 83

Chrome 83 wird als stabile Version eingeführt.

Dazu sollten Sie Folgendes wissen:

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

Vertrauenswürdige Typen

Das DOM-basierte Cross-Site-Scripting ist eine der häufigsten Sicherheitslücken im Web. Es kann passieren, dass Sie versehentlich einen auf Ihre Seite stellen. Vertrauenswürdige Typen können dazu beitragen, diese Art von Sicherheitslücken zu verhindern, da Sie die Daten vor der Übergabe an eine potenziell gefährliche Funktion verarbeiten müssen.

Nehmen wir als Beispiel innerHTML, wenn vertrauenswürdige Typen aktiviert sind. Wenn ich versuche, einen String zu übergeben, schlägt er beispielsweise 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 vertrauenswürdige Typen aktivieren, sollten Sie Verstöße mithilfe des CSP-Headers report-only ermitteln und beheben.

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

Sobald Sie alles betätigt haben, können Sie die Funktion korrekt einschalten. Ausführliche Informationen finden Sie unter DOM-basierte Cross-Site-Scripting-Sicherheitslücken mit vertrauenswürdigen Typen verhindern auf web.dev.

Änderungen an Formularsteuerelementen

Wir verwenden jeden Tag HTML-Formularsteuerelemente, die für einen Großteil der Interaktivität des Webs wichtig sind. Sie sind einfach zu verwenden, verfügen über integrierte Bedienungshilfen und sind unseren Nutzenden vertraut. Der Stil der Formularsteuerelemente kann je nach Browser und Betriebssystem unterschiedlich sein. Und häufig müssen wir eine Reihe von CSS-Regeln versenden, nur um eine einheitliche Darstellung auf allen Geräten zu haben.

Früher: Standardstil der Formularsteuerelemente.
Danach wurde der Stil der Formularsteuerelemente aktualisiert.

Ich war wirklich beeindruckt von der Arbeit von Microsoft zur Modernisierung der Darstellung von Formularsteuerelementen. Neben dem ansprechenden visuellen Stil bieten sie auch eine bessere Touchbedienung und eine bessere Barrierefreiheit, einschließlich einer verbesserten Tastaturunterstützung.

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

Ursprungstests

Arbeitsspeicher mit measureMemory() messen

Die neue API performance.measureMemory(), die einen Ursprungstest in Chrome 83 startet, ermöglicht es Ihnen, die Arbeitsspeichernutzung Ihrer Seite zu messen und Speicherlecks zu erkennen.

Speicherlecks sind leicht einzuführen:

  • Aufheben der Registrierung eines Event-Listeners
  • Objekte aus einem iFrame erfassen
  • Worker nicht schließen
  • Objekte in Arrays akkumulieren
  • usw.

Speicherlecks führen zu Seiten, die langsam und für Nutzer aufgebläht erscheinen.

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 Überwachen Sie die gesamte Arbeitsspeichernutzung Ihrer Webseite mit measureMemory() auf web.dev.

Updates für die Native File System API

Die Native File System API hat in Chrome 83 einen neuen Ursprungstest gestartet, der beschreibbare Streams unterstützt und Datei-Handles speichern konnte.

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

Beschreibbare Streams erleichtern das Schreiben in eine Datei erheblich. Da es sich um einen Stream handelt, können Sie Antworten ganz einfach von einem Stream an einen anderen übertragen.

Wenn Sie Datei-Handles 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 beibehalten, die letzte Datei öffnen, an der der Nutzer gearbeitet hat, usw.

Sie benötigen ein neues Ursprungstesttoken, um diese Funktionen nutzen zu können. In meinem aktualisierten Artikel The Native File System API: Vereintert den Zugriff auf lokale Dateien auf web.dev wird beschrieben, wie Sie ein neues Ursprungstesttoken erhalten.

Andere Ursprungstests

Eine vollständige Liste der Features im Ursprungstest finden Sie hier.

Neue ursprungsübergreifende Richtlinien

Einige Web-APIs erhöhen das Risiko von Seitenkanalangriffen wie Spectre. Um dieses Risiko zu minimieren, bieten Browser eine auf Opt-in-basierte isolierte Umgebung, die als ursprungsübergreifend isoliert wird. Der ursprungsübergreifende isolierte Zustand verhindert auch Änderungen von document.domain. Die Möglichkeit, document.domain zu ändern, ermöglicht die Kommunikation zwischen Dokumenten auf derselben Website und gilt als Sicherheitslücke in der Richtlinie für denselben Ursprung.

Ausführliche Informationen finden Sie in Eijis Beitrag Ihre Website „ursprungsübergreifend isoliert“ mit COOP und COEP isoliert“.

Web Vitals

Die Messung der Qualität der User Experience hat viele Aspekte. Einige Aspekte der Nutzererfahrung sind zwar website- und kontextspezifisch, es gibt jedoch eine Reihe von Signalen, die sogenannte Core Web Vitals, die für alle Nutzererfahrungen im Web entscheidend sind. Zu diesen wichtigen Anforderungen an die Nutzerfreundlichkeit gehören die Nutzerfreundlichkeit beim Laden, die Interaktivität und die visuelle Stabilität von Seiteninhalten. Zusammen bilden sie die Grundlage der Core Web Vitals von 2020.

  • Largest Contentful Paint misst die wahrgenommene Ladegeschwindigkeit und markiert den Punkt in der Zeitleiste für den Seitenaufbau, an dem der Hauptinhalt der Seite wahrscheinlich geladen wurde.
  • First Input Delay misst die Reaktionsfähigkeit und quantifiziert die Erfahrung der Nutzer, wenn sie zum ersten Mal mit der Seite interagieren möchten.
  • Cumulative Layout Shift misst die visuelle Stabilität und quantifiziert die Menge an unerwarteten Layoutverschiebungen des sichtbaren Seiteninhalts.

Alle diese Messwerte erfassen wichtige benutzerorientierte Ergebnisse, sind feld messbar und haben unterstützende Äquivalente zu den Diagnosemesswerten und Tools für Lab-Diagnosen. Beispiel: Während „Largest Contentful Paint“ der Topline-Lademesswert ist, hängt er auch stark von First Contentful Paint (FCP) und Time to First Byte (TTFB) ab, die weiterhin unbedingt überwacht und verbessert werden müssen.

Weitere Informationen finden Sie im Chromium-Blog unter Web Vitals: wichtige Messwerte für eine fehlerfreie Website.

Und noch mehr

Sind Sie neugierig auf die Zukunft? Sehen Sie sich dazu den Fugu API Tracker an.

Weitere Informationen

Hier sind nur einige der wichtigsten Punkte aufgeführt. 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 werden per E-Mail benachrichtigt, wenn wir ein neues Video veröffentlichen.

Ich bin Pete LePage und brauche einen Haarschnitt. Sobald Chrome 84 veröffentlicht wird, erfahre ich, was es bei Chrome Neues gibt.