Novità di Chrome 83

Pete LePage

Stiamo iniziando a rendere disponibile Chrome 83 nella versione stabile.

Tieni presente quanto segue:

Sono Pete LePage, lavoro e filmo da casa. Diamo un'occhiata alle novità per gli sviluppatori in Chrome 83.

Tipi attendibili

Il cross-site scripting basato su DOM è una delle vulnerabilità di sicurezza più comuni sul web. Può essere facile introdurne uno accidentalmente nella tua pagina. I tipi attendibili possono aiutare a prevenire questo tipo di vulnerabilità, in quanto richiedono l'elaborazione dei dati prima di passarli a una funzione potenzialmente pericolosa.

Prendi ad esempio innerHTML, con i tipi attendibili attivati, se provo a passare una stringa, l'operazione non riuscirà con un TypeError perché il browser non sa se può considerare attendibile la stringa.

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

Devo invece utilizzare una funzione sicura, come textContent, trasmettere un tipo attendibile oppure creare l'elemento e utilizzare appendChild().

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

Prima di attivare i tipi attendibili, è opportuno identificare e correggere eventuali violazioni utilizzando un'intestazione CSP report-only.

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

Una volta completata la configurazione, puoi attivarlo correttamente. Per informazioni dettagliate, consulta Prevenire le vulnerabilità di cross-site scripting basate su DOM con i tipi attendibili su web.dev.

Aggiornamenti ai controlli dei moduli

Utilizziamo i controlli dei moduli HTML ogni giorno e sono fondamentali per gran parte dell'interattività del web. Sono facili da usare, hanno l'accessibilità integrata e sono familiari ai nostri utenti. Lo stile dei controlli dei moduli può essere incoerente tra browser e sistemi operativi. Inoltre, spesso dobbiamo pubblicare un numero di regole CSS solo per ottenere un aspetto coerente su tutti i dispositivi.

In precedenza, stile predefinito dei controlli del modulo.
Dopo, stile aggiornato dei controlli dei moduli.

Sono rimasto davvero colpito dal lavoro svolto da Microsoft per modernizzare l'aspetto dei controlli dei moduli. Oltre a uno stile visivo più gradevole, offrono un migliore supporto touch e una migliore accessibilità, incluso il supporto della tastiera.

I nuovi controlli dei moduli sono già disponibili in Microsoft Edge e ora lo sono anche in Chrome 83. Per saperne di più, consulta Aggiornamenti ai controlli dei moduli e allo stato attivo sul blog di Chromium.

Prove dell'origine

Misura la memoria con measureMemory()

A partire da una prova dell'origine in Chrome 83, performance.measureMemory() è una nuova API che consente di misurare l'utilizzo della memoria della pagina e di rilevare le perdite di memoria.

Le perdite di memoria sono facili da introdurre:

  • Dimenticare di annullare la registrazione di un listener di eventi
  • Acquisizione di oggetti da un iframe
  • Mancata chiusura di un worker
  • Accumulare oggetti in array
  • e così via.

Le perdite di memoria comportano pagine che appaiono lente e gonfie per gli utenti.

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

Consulta Monitorare l'utilizzo totale della memoria della tua pagina web con measureMemory() su web.dev per tutti i dettagli della nuova API.

Aggiornamenti all'API Native File System

L'API Native File System ha avviato una nuova prova dell'origine in Chrome 83 con supporto per flussi scrivibili e possibilità di salvare handle di file.

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

Gli stream scrivibili semplificano notevolmente la scrittura in un file e, poiché si tratta di uno stream, puoi incanalare facilmente le risposte da uno stream all'altro.

Il salvataggio degli handle di file in IndexedDB ti consente di archiviare lo stato o ricordare i file a cui stava lavorando un utente. Ad esempio, mantieni un elenco dei file modificati di recente, apri l'ultimo file su cui l'utente stava lavorando e così via.

Per utilizzare queste funzionalità, avrai bisogno di un nuovo token di prova dell'origine, quindi consulta il mio articolo aggiornato L'API Native File System: semplificare l'accesso ai file locali su web.dev con tutti i dettagli e su come ottenere il nuovo token di prova dell'origine.

Altre prove dell'origine

Consulta l'elenco completo delle funzionalità nella prova dell'origine.

Nuovi criteri cross-origin

Alcune API web aumentano il rischio di attacchi lato canale come Spectre. Per mitigare questo rischio, i browser offrono un ambiente isolato multiorigine basato su attivazione, detto "isolato multiorigine". Lo stato isolato multiorigine impedisce anche le modifiche di document.domain. La possibilità di modificare document.domain consente la comunicazione tra documenti dello stesso sito ed è stata considerata una via d'accesso nel criterio della stessa origine.

Per informazioni dettagliate, consulta il post di Eiji Rendere il sito web "isolato da origini diverse" utilizzando COOP e COEP.

Parametri vitali web

La misurazione della qualità dell'esperienza utente ha molte sfaccettature. Sebbene alcuni aspetti dell'esperienza utente siano specifici del sito e del contesto, esiste un insieme comune di indicatori, "Core Web Vitals", che è fondamentale per tutte le esperienze web. Questi bisogni fondamentali dell'esperienza utente includono l'esperienza di caricamento, l'interattività e la stabilità visiva dei contenuti della pagina e, se combinati, costituiscono la base dei Core Web Vitals 2020.

  • Largest Contentful Paint misura la velocità di caricamento percepita e indica il punto nella sequenza temporale di caricamento della pagina in cui è probabile che siano stati caricati i contenuti principali della pagina.
  • First Input Delay misura la reattività e quantifica l'esperienza vissuta dagli utenti quando tentano di interagire per la prima volta con la pagina.
  • Cumulative Layout Shift misura la stabilità visiva e quantifica la quantità di variazione del layout imprevista dei contenuti visibili della pagina.

Tutte queste metriche acquisiscono risultati importanti incentrati sull'utente, sono misurabili sul campo e hanno strumenti e metriche di diagnostica di laboratorio di supporto. Ad esempio, sebbene Largest Contentful Paint sia la metrica di caricamento principale, è anche molto dipendente da First Contentful Paint (FCP) e Time to First Byte (TTFB), che rimangono fondamentali da monitorare e migliorare.

Per scoprire di più, consulta Introduzione a Web Vitals: le metriche essenziali per il buon funzionamento di un sito sul blog di Chromium per informazioni complete.

E altro ancora

  • Chrome ora supporta l'API Barcode Detection, che offre la possibilità di rilevare e decodificare i codici a barre.
  • La nuova funzione CSS @supports fornisce il rilevamento delle funzionalità per i selettori CSS.
  • Le nuove annotazioni ARIA supportano l'accessibilità degli screen reader per commenti, suggerimenti ed evidenziazioni di testo con significati semantici (in modo simile a <mark>).
  • La prefers-color-scheme query media consente agli autori di supportare il proprio tema scuro, in modo da avere il pieno controllo sulle esperienze che creano.
  • JavaScript ora supporta i moduli nei worker condivisi.

Ti incuriosisce sapere cosa ti aspetta in futuro? Dai un'occhiata al tracker API Fugu per scoprirlo.

Per approfondire

Sono riportati solo alcuni punti salienti. Controlla i link riportati di seguito per ulteriori modifiche in Chrome 83.

Iscriviti

Vuoi tenerti al corrente sui nostri video, iscriviti al nostro canale YouTube Chrome Developers e riceverai una notifica via email ogni volta che viene lanciato un nuovo video.

Sono Pete LePage e ho bisogno di un taglio di capelli, ma non appena verrà rilasciato Chrome 84, sarò qui per raccontarti le novità di Chrome.