Deze pagina is vertaald door de Cloud Translation API.

Nieuw in Chroom 83

Pete LePage

Chrome 83 begint nu stabiel te worden.

Dit is wat u moet weten:

Vertrouwde typen helpen kwetsbaarheden in cross-site scripting te voorkomen.
Vormelementen krijgen een belangrijke make-over .
Er is een nieuwe manier om geheugenlekken te detecteren .
De native bestandssysteem-API start een nieuwe origin-proefversie met extra functionaliteit.
Er is een nieuw cross-origin-beleid
We hebben het Web Vitals -programma geïntroduceerd om uniforme begeleiding te bieden voor kwaliteitssignalen die, naar onze mening, essentieel zijn voor het leveren van een geweldige gebruikerservaring op internet.
En meer .

Ik ben Pete LePage , ik werk en fotografeer vanuit huis. Laten we erin duiken en kijken wat er nieuw is voor ontwikkelaars in Chrome 83!

Vertrouwde typen

Op DOM gebaseerde cross-site scripting is een van de meest voorkomende beveiligingsproblemen op internet. Het kan gemakkelijk zijn om per ongeluk iemand op uw pagina te introduceren. Vertrouwde typen kunnen dit soort kwetsbaarheden helpen voorkomen, omdat ze vereisen dat u de gegevens verwerkt voordat u deze doorgeeft aan een potentieel gevaarlijke functie.

Neem bijvoorbeeld innerHTML : als vertrouwde typen zijn ingeschakeld, mislukt het als ik een string probeer door te geven met een TypeError, omdat de browser niet weet of hij de string kan vertrouwen.

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

In plaats daarvan moet ik een veilige functie gebruiken, zoals textContent , een vertrouwd type doorgeven of het element maken en appendChild() gebruiken.

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

Voordat u vertrouwde typen inschakelt, moet u eventuele schendingen identificeren en oplossen met behulp van een CSP-header report-only .

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

Als je eenmaal alles hebt dichtgeknoopt, kun je het op de juiste manier inschakelen. Volledige details vindt u in Voorkom DOM-gebaseerde cross-site scripting-kwetsbaarheden met Trusted Types op web.dev.

Updates voor formulierbesturingselementen

We gebruiken elke dag HTML-formulierbesturingselementen en deze zijn van cruciaal belang voor een groot deel van de interactiviteit op internet. Ze zijn gemakkelijk te gebruiken, hebben ingebouwde toegankelijkheid en zijn bekend bij onze gebruikers. De stijl van formulierbesturingselementen kan inconsistent zijn tussen browsers en besturingssystemen. En we moeten regelmatig een aantal CSS-regels verzenden om een consistent beeld op alle apparaten te krijgen.

Voorheen standaardstijl van formulierbesturingselementen.

Daarna bijgewerkte stijl van formulierbesturingselementen.

Ik ben erg onder de indruk van het werk dat Microsoft heeft gedaan om het uiterlijk van formulierbesturingselementen te moderniseren. Naast de mooiere visuele stijl bieden ze betere aanraakondersteuning en betere toegankelijkheid, inclusief verbeterde toetsenbordondersteuning!

De nieuwe formulierbesturingselementen zijn al in Microsoft Edge beland en zijn nu beschikbaar in Chrome 83. Zie Updates voor formulierbesturingselementen en Focus op de Chromium-blog voor meer informatie.

Oorsprongsproeven

Geheugen meten met `measureMemory()`

performance.measureMemory() start een origin-proefperiode in Chrome 83 en is een nieuwe API die het mogelijk maakt om het geheugengebruik van uw pagina te meten en geheugenlekken te detecteren.

Geheugenlekken zijn eenvoudig te introduceren:

Vergeten de registratie van een gebeurtenislistener ongedaan te maken
Objecten vastleggen vanuit een iframe
Een werknemer niet sluiten
Objecten verzamelen in arrays
enzovoort.

Geheugenlekken leiden tot pagina's die traag en opgeblazen lijken voor gebruikers.

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

Bekijk Monitor het totale geheugengebruik van uw webpagina met measureMemory() op web.dev voor alle details van de nieuwe API.

Updates voor de Native File System-API

De Native File System API startte een nieuwe origin-proefperiode in Chrome 83 met ondersteuning voor beschrijfbare streams en de mogelijkheid om bestandshandles op te slaan.

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

Beschrijfbare streams maken het veel gemakkelijker om naar een bestand te schrijven, en omdat het een stream is, kun je reacties gemakkelijk van de ene stream naar de andere doorsturen.

Door bestandshandles op te slaan in IndexedDB kunt u de status opslaan of onthouden aan welke bestanden een gebruiker aan het werken was. Houd bijvoorbeeld een lijst bij van recentelijk bewerkte bestanden, open het laatste bestand waar de gebruiker aan heeft gewerkt, enzovoort.

Je hebt een nieuwe origin-proeftoken nodig om deze functies te gebruiken, dus lees mijn bijgewerkte artikel The Native File System API: Vereenvoudiging van de toegang tot lokale bestanden op web.dev met alle details en hoe je je nieuwe origin-proeftoken kunt krijgen.

Andere oorsprongsproeven

Rekening voor een volledige lijst met functies in de origin-proefversie.

Nieuw cross-origin-beleid

Sommige web-API's vergroten het risico op zijkanaalaanvallen zoals Spectre. Om dat risico te beperken, bieden browsers een op opt-in gebaseerde geïsoleerde omgeving die cross-origin geïsoleerd wordt genoemd. De geïsoleerde cross-origin-status voorkomt ook wijzigingen in document.domain . De mogelijkheid om document.domain te wijzigen maakt communicatie tussen documenten op dezelfde site mogelijk en wordt beschouwd als een maas in het beleid voor dezelfde oorsprong.

Bekijk Eiji's bericht Making your website "cross-origin isolation" met behulp van COOP en COEP voor volledige details.

Webvitaliteit

Het meten van de kwaliteit van de gebruikerservaring kent vele facetten. Hoewel sommige aspecten van de gebruikerservaring site- en contextspecifiek zijn, is er een gemeenschappelijke reeks signalen (' Core Web Vitals ') die van cruciaal belang zijn voor alle webervaringen. Dergelijke kernbehoeften op het gebied van gebruikerservaring omvatten laadervaring, interactiviteit en visuele stabiliteit van pagina-inhoud, en gecombineerd vormen ze de basis van de 2020 Core Web Vitals.

Largest Contentful Paint meet de waargenomen laadsnelheid en markeert het punt in de laadtijdlijn van de pagina waarop de hoofdinhoud van de pagina waarschijnlijk is geladen.
First Input Delay meet de responsiviteit en kwantificeert de ervaring die gebruikers ervaren wanneer ze voor het eerst met de pagina proberen te communiceren.
Cumulatieve lay-outverschuiving meet de visuele stabiliteit en kwantificeert de hoeveelheid onverwachte lay-outverschuiving van zichtbare pagina-inhoud.

Al deze meetgegevens leggen belangrijke, op de gebruiker gerichte resultaten vast, zijn in het veld meetbaar en beschikken over ondersteunende laboratoriumdiagnostische meetwaarde-equivalenten en -tools. Hoewel Largest Contentful Paint bijvoorbeeld de topline-laadstatistiek is, is deze ook sterk afhankelijk van First Contentful Paint (FCP) en Time to First Byte (TTFB), die van cruciaal belang blijven om te monitoren en te verbeteren.

Voor meer informatie, ga naar Introductie van Web Vitals: essentiële statistieken voor een gezonde site op de Chromium Blog voor volledige details.

En meer

Chrome ondersteunt nu de Barcode Detection API , die de mogelijkheid biedt om streepjescodes te detecteren en te decoderen.
De nieuwe CSS @supports -functie biedt functiedetectie voor CSS-selectors.
Nieuwe ARIA-annotaties ondersteunen de toegankelijkheid van schermlezers voor opmerkingen, suggesties en tekstmarkeringen met semantische betekenissen (vergelijkbaar met <mark> ).
Met de mediaquery prefers-color-scheme kunnen auteurs hun eigen donkere thema ondersteunen, zodat ze volledige controle hebben over de ervaringen die ze opbouwen.
JavaScript ondersteunt nu modules in gedeelde werkers .

Benieuwd naar wat er in de toekomst gaat gebeuren? Bekijk de Fugu API Tracker om te zien!

Verder lezen

Dit behandelt slechts enkele van de belangrijkste hoogtepunten. Controleer de onderstaande links voor aanvullende wijzigingen in Chrome 83.

Wil je op de hoogte blijven van onze video's, abonneer je dan op ons Chrome Developers YouTube-kanaal en je ontvangt een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en ik heb een knipbeurt nodig , maar zodra Chrome 84 uitkomt, ben ik hier om je te vertellen: wat er nieuw is in Chrome!