Nieuw in Chroom 83

Pete LePage

Chrome 83 wordt nu uitgerold naar stabiele versies.

Dit is wat u moet weten:

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

Vertrouwde typen

DOM-gebaseerde cross-site scripting is een van de meest voorkomende beveiligingslekken op het web. Het is gemakkelijk om er per ongeluk een 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 ik vertrouwde typen heb ingeschakeld, mislukt de invoer als ik een string wil doorgeven. Er wordt dan een TypeError gegenereerd, omdat de browser niet weet of de string vertrouwd kan worden.

// 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 aanmaken 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 report-only .

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

Zodra je alles hebt geregeld, kun je het volledig inschakelen. De volledige details vind je in Voorkom DOM-gebaseerde cross-site scripting kwetsbaarheden met vertrouwde typen op web.dev.

Updates voor formulierbesturingselementen

We gebruiken dagelijks HTML-formulierelementen en ze zijn essentieel voor een groot deel van de interactiviteit op het web. Ze zijn gebruiksvriendelijk, hebben ingebouwde toegankelijkheid en zijn vertrouwd voor onze gebruikers. De vormgeving van formulierelementen kan inconsistent zijn tussen browsers en besturingssystemen. Bovendien moeten we vaak meerdere CSS-regels implementeren om een ​​consistente weergave op alle apparaten te krijgen.

Voorheen standaardstyling van formulierbesturingselementen.
Daarna is de styling van de formulierbesturingselementen bijgewerkt.

Ik ben echt onder de indruk van het werk dat Microsoft heeft verricht om het uiterlijk van formulierbesturingselementen te moderniseren. Naast de mooiere visuele stijl bieden ze ook betere ondersteuning voor aanrakingen en een betere toegankelijkheid, inclusief verbeterde toetsenbordondersteuning!

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

Oorsprongsproeven

Meet het geheugen met measureMemory()

We starten een oorsprongsproef in Chrome 83 performance.measureMemory() is een nieuwe API waarmee u het geheugengebruik van uw pagina kunt meten en geheugenlekken kunt detecteren.

Geheugenlekken zijn eenvoudig te veroorzaken:

  • Vergeten een gebeurtenislistener af te melden
  • Objecten vastleggen vanuit een iframe
  • Een werknemer niet sluiten
  • Objecten in arrays verzamelen
  • enzovoort.

Geheugenlekken zorgen ervoor dat pagina's er voor gebruikers traag en opgeblazen uitzien.

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 over de nieuwe API.

Updates voor de Native File System API

De Native File System API is met een nieuwe proef gestart in Chrome 83 met ondersteuning voor schrijfbare streams en de mogelijkheid om bestands-handles 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.
}

Met schrijfbare stromen is het veel eenvoudiger om naar een bestand te schrijven. En omdat het een stroom is, kunt u eenvoudig reacties van de ene stroom naar de andere sturen.

Door bestandshandles op te slaan in IndexedDB kunt u de status opslaan of onthouden aan welke bestanden een gebruiker werkte. Zo kunt u bijvoorbeeld een lijst bijhouden van recent bewerkte bestanden, het laatste bestand openen waaraan de gebruiker werkte, enzovoort.

Om deze functies te kunnen gebruiken, hebt u een nieuwe Origin-proeftoken nodig. Bekijk daarom mijn bijgewerkte artikel The Native File System API: Simplifying access to local files on web.dev met alle details en hoe u uw nieuwe Origin-proeftoken kunt bemachtigen.

Andere oorsprongsproeven

Rekening voor een complete lijst met functies in de oorspronkelijke proefversie.

Nieuwe cross-origin-beleidslijnen

Sommige web-API's verhogen het risico op side-channel-aanvallen zoals Spectre. Om dat risico te beperken, bieden browsers een opt-in-gebaseerde geïsoleerde omgeving aan, genaamd cross-origin-isolated. Deze cross-origin-isolated status voorkomt ook wijzigingen in document.domain . Het kunnen wijzigen van document.domain maakt communicatie tussen documenten op dezelfde site mogelijk en wordt beschouwd als een maas in het same-origin-beleid.

Bekijk Eiji's bericht Making your website "cross-origin isolate" using COOP and COEP voor meer informatie.

Web-vitale gegevens

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 set signalen – " Core Web Vitals " – die cruciaal is voor alle webervaringen. Deze kernbehoeften van de gebruikerservaring omvatten de laadervaring, interactiviteit en visuele stabiliteit van paginacontent. Deze vormen samen de basis van de Core Web Vitals 2020.

  • Largest Contentful Paint meet de waargenomen laadsnelheid en markeert het punt in de laadtijdlijn van de pagina waarop de belangrijkste inhoud 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 interacteren.
  • Cumulatieve lay-outverschuiving meet de visuele stabiliteit en kwantificeert de hoeveelheid onverwachte lay-outverschuiving van zichtbare pagina-inhoud.

Al deze statistieken leggen belangrijke gebruikersgerichte resultaten vast, zijn meetbaar in het veld en hebben ondersteunende equivalenten en tools voor laboratoriumdiagnostiek. Hoewel Largest Contentful Paint bijvoorbeeld de belangrijkste laadstatistiek is, is deze ook sterk afhankelijk van First Contentful Paint (FCP) en Time to First Byte (TTFB), die cruciaal blijven om te monitoren en te verbeteren.

Voor meer informatie kunt u het artikel 'Web Vitals: essentiële statistieken voor een gezonde site' op de Chromium-blog raadplegen voor alle details.

En meer

Benieuwd wat er in de toekomst gaat gebeuren? Bekijk de Fugu API Tracker !

Verder lezen

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

Abonneren

Wilt u op de hoogte blijven van onze video's? Abonneer u dan op ons Chrome Developers YouTube-kanaal . U ontvangt dan een e-mailmelding wanneer we een nieuwe video lanceren.

Ik ben Pete LePage en ik heb een knipbeurt nodig , maar zodra Chrome 84 uitkomt, vertel ik je wat er nieuw is in Chrome!