Neu in Chrome 83

Pete LePage

Chrome 83 wird jetzt als stabile 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 in Chrome 83 für Entwickler Neues 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 Fehler auf Ihrer Seite machen. Vertrauenswürdige Typen können dazu beitragen, diese Art von Sicherheitslücken zu verhindern, da Sie die Daten verarbeiten müssen, bevor Sie sie an eine potenziell gefährliche Funktion übergeben.

Wenn ich beispielsweise innerHTML mit aktivierten vertrauenswürdigen Typen versuche, einen String zu übergeben, wird ein TypeError ausgegeben, 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 alle Verstöße mithilfe einer report-only-CSP-Header-Richtlinie identifizieren und beheben.

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

Wenn Sie alles eingerichtet haben, können Sie das Gerät einschalten. Ausführliche Informationen finden Sie unter DOM-basierte Cross-Site-Scripting-Sicherheitslücken mit vertrauenswürdigen Typen verhindern auf web.dev.

Änderungen an Formularelementen

Wir verwenden HTML-Formularsteuerelemente jeden Tag und sie sind für einen Großteil der Interaktivität des Webs von entscheidender Bedeutung. Sie sind einfach zu verwenden, haben integrierte Bedienungshilfen und sind unseren Nutzern vertraut. Die Formatierung von Formularelementen kann je nach Browser und Betriebssystem variieren. Außerdem müssen wir häufig eine Reihe von CSS-Regeln bereitstellen, um ein einheitliches Erscheinungsbild auf allen Geräten zu erzielen.

Vorher: Standardstil der Formularsteuerelemente.
Nach der Aktualisierung des Stils der Formularsteuerelemente.

Ich bin wirklich beeindruckt von der Arbeit, die Microsoft zur Modernisierung des Erscheinungsbildes von Formularelementen geleistet hat. Neben dem ansprechenderen visuellen Stil bieten sie eine bessere Touch-Unterstützung und Bedienungshilfen, einschließlich verbesserter 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 zu Formularelementen und Fokus.

Ursprungstests

Arbeitsspeicher mit measureMemory() messen

Ab Chrome 83 können Sie mit der performance.measureMemory()-API, einer neuen API, die Speichernutzung Ihrer Seite messen und Speicherlecks erkennen.

Speicherlecks lassen sich leicht verursachen:

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

Speicherlecks führen dazu, dass Seiten für Nutzer langsam und überladen erscheinen.

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

Unter Die Gesamtspeichernutzung Ihrer Webseite mit measureMemory() überwachen auf web.dev finden Sie alle Details zur neuen API.

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 der Möglichkeit zum Speichern von Datei-Handles 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 beschreibbaren Streams können Sie viel einfacher in eine Datei schreiben. Da es sich um einen Stream handelt, können Sie Antworten ganz einfach von einem Stream an einen anderen weiterleiten.

Wenn Sie Datei-Handles in IndexedDB speichern, können Sie den Status speichern oder sich merken, an welchen Dateien ein Nutzer gearbeitet hat. Beispielsweise kann eine Liste der zuletzt bearbeiteten Dateien gespeichert oder die letzte Datei geöffnet werden, an der der Nutzer gearbeitet hat.

Für die Nutzung dieser Funktionen benötigen Sie ein neues Testtoken für den Ursprung. In meinem aktualisierten Artikel The Native File System API: Simplifying access to local files (Die Native File System API: Zugriff auf lokale Dateien vereinfachen) auf web.dev finden Sie alle Details und Informationen dazu, wie Sie ein neues Testtoken für den Ursprung erhalten.

Andere Ursprungstests

Eine vollständige Liste der Funktionen findest du im Test.

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 opt-in-basierte isolierte Umgebung, die als ursprungsübergreifend isoliert bezeichnet wird. Der ursprungsübergreifende isolierte Status verhindert auch Änderungen an document.domain. Die Möglichkeit, document.domain zu ändern, ermöglicht die Kommunikation zwischen Dokumenten auf derselben Website und wurde als Schlupfloch in der Same-Origin-Richtlinie betrachtet.

Ausführliche Informationen finden Sie im Blogpost von Eiji Websites mit COOP und COEP plattformübergreifend isolieren.

Web Vitals

Die Qualität der Nutzerfreundlichkeit lässt sich auf viele Arten messen. Die Nutzerfreundlichkeit hängt zwar in vielerlei Hinsicht von der jeweiligen Website und dem konkreten Kontext ab, es gibt aber eine Reihe von gemeinsamen Signalen – die Core Web Vitals –, die für alle Webnutzungen entscheidend sind. Zu diesen grundlegenden Anforderungen an die Nutzerfreundlichkeit gehören Ladezeit, Interaktivität und visuelle Stabilität der Seiteninhalte. Zusammen bilden sie die Grundlage der Core Web Vitals 2020.

  • Largest Contentful Paint misst die empfundene Ladegeschwindigkeit und markiert den Punkt während des Seitenaufbaus, zu dem der Hauptinhalt einer Seite wahrscheinlich geladen wurde.
  • Der First Input Delay misst die Reaktionsfähigkeit und quantifiziert die Nutzererfahrung, wenn sie zum ersten Mal mit der Seite interagieren.
  • Der Cumulative Layout Shift misst die visuelle Stabilität und quantifiziert die Menge an unerwarteten Layoutverschiebungen sichtbarer Seiteninhalte.

Alle diese Messwerte erfassen wichtige nutzerorientierte Ergebnisse, sind im Feld messbar und haben entsprechende Messwerte und Tools für die Diagnose im Lab. Der Messwert „Largest Contentful Paint“ ist zwar der wichtigste Messwert für die Ladezeit, hängt aber auch stark vom „First Contentful Paint“ (FCP) und der „Zeit bis zum ersten Byte“ (TTFB) ab, die weiterhin wichtig sind, um die Leistung zu überwachen und zu verbessern.

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

Und vieles mehr

Du möchtest wissen, was wir in Zukunft planen? Mehr dazu erfährst du im Fugu API Tracker.

Weitere Informationen

Dies sind nur einige der wichtigsten Highlights. Unter den folgenden Links finden Sie weitere Informationen zu Ä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, sobald wir ein neues Video veröffentlichen.

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