Neu in Chrome 83

Pete LePage

Die Einführung von Chrome 83 in der stabilen Version hat begonnen.

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 eine solche Farbe auf Ihrer Seite verwenden. 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 fertig 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 veröffentlichen, damit wir für einen einheitlichen Look auf allen Geräten sorgen können.

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

Ich war wirklich beeindruckt von der Arbeit von Microsoft zur Modernisierung des Aussehens von Formularsteuerelementen. 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 wird ein Ursprungstest für die performance.measureMemory()-API durchgeführt. Mit dieser neuen API können Sie die Speichernutzung Ihrer Seite messen und Speicherlecks erkennen.

Speicherlecks können leicht auftreten:

  • Event-Listener nicht abgemeldet
  • Objekte aus einem iframe erfassen
  • Worker nicht schließen
  • Objekte in Arrays akkumulieren
  • 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 web.dev finden Sie unter Die Gesamtspeichernutzung Ihrer Webseite mit measureMemory() überwachen 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. Sie können beispielsweise eine Liste der zuletzt bearbeiteten Dateien erstellen oder die Datei öffnen, an der der Nutzer zuletzt 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 Messung der Qualität der Nutzererfahrung umfasst viele Facetten. 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 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. Sie bilden zusammen 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 unerwarteten Layoutverschiebungen des sichtbaren Seiteninhalts.

Alle diese Messwerte erfassen wichtige nutzerbezogene Ergebnisse, sind messbar und unterstützen Laborwerte und Tools für Diagnosemesswerte. Largest Contentful Paint ist zwar der wichtigste Messwert für die Ladezeit, hängt aber auch stark von First Contentful Paint (FCP) und Time to First 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

Hier werden nur einige der wichtigsten Vorteile behandelt. Unter den folgenden Links finden Sie weitere Informationen zu Änderungen in Chrome 83.

Abonnieren

Wenn du über unsere Videos auf dem Laufenden bleiben möchtest, kannst du unseren YouTube-Kanal für Chrome-Entwickler abonnieren. Dann wirst du per E-Mail benachrichtigt, sobald wir ein neues Video veröffentlichen.

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