Novità di Chrome 83

Pete LePage

Chrome 83 sta iniziando a essere implementato 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 aiutarti a evitare questo tipo di vulnerabilità, perché richiedono di elaborare i dati prima di passarli a una funzione potenzialmente pericolosa.

Prendiamo ad esempio innerHTML. Se provo a passare una stringa con i tipi attendibili abilitati, l'operazione non andrà a buon fine con un TypeError perché il browser non sa se può ritenere 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, passare un tipo attendibile o 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, devi identificare e correggere eventuali violazioni utilizzando un report-only intestazione CSP.

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, lo stile predefinito dei controlli dei moduli.
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 ulteriori informazioni, 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
  • Non chiudere 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 Monitora 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 il supporto degli stream scrivibili e la possibilità di salvare i handle dei 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 dei file in IndexedDB ti consente di memorizzare lo stato o di ricordare su quali file un utente stava lavorando. 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.

Nuove norme cross-origin

Alcune API web aumentano il rischio di attacchi lato canale come Spectre. Per ridurre questo rischio, i browser offrono un ambiente isolato basato su attivazione chiamato con isolamento multiorigine. Lo stato con isolamento multiorigine impedisce inoltre le modifiche di document.domain. La possibilità di modificare document.domain consente la comunicazione tra documenti dello stesso sito ed è stata considerata una scappatoia nei criteri 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 di primo livello, è 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 consente 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.

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

Per approfondire

Sono riportati solo alcuni dei punti salienti. Consulta i link di seguito per altre modifiche in Chrome 83.

Iscriviti

Se vuoi rimanere al passo con i nostri video, iscriviti al nostro canale YouTube per sviluppatori di Chrome e riceverai una notifica via email ogni volta che lanceremo 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.