Novità di Chrome 83

Pete LePage

Inizia ora l'implementazione di Chrome 83 nella versione stabile.

Tieni presente quanto segue:

Mi chiamo Pete LePage e lavoro da casa. Vediamo le novità di Chrome 83 per gli sviluppatori.

Tipi attendibili

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

Prendiamo ad esempio innerHTML con i tipi attendibili attivati e, se cerco di passare una stringa, l'operazione restituisce un errore 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 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, ti consigliamo di 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

Quando avrai abbottonato tutto, potrai attivarlo correttamente. I dettagli completi sono disponibili nella pagina Previeni le vulnerabilità cross-site scripting (prevenire le vulnerabilità cross-site scripting) basate su DOM con tipi attendibili su web.dev.

Aggiornamenti ai controlli del modulo

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

Prima, lo stile predefinito dei controlli dei moduli.
In seguito, abbiamo aggiornato lo stile dei controlli del modulo.

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 al tocco e una migliore accessibilità, tra cui un migliore supporto della tastiera.

I nuovi controlli del modulo sono già stati inclusi in Microsoft Edge e sono ora disponibili in Chrome 83. Per ulteriori informazioni, consulta la pagina dedicata agli aggiornamenti ai controlli e all'elemento attivo del modulo 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 rilevare perdite di memoria.

Le perdite di memoria sono facili da introdurre:

  • Mancata annullamento della registrazione di un listener di eventi
  • Acquisizione di oggetti da un iframe
  • Mancata chiusura di un worker
  • Accumulo di oggetti in array
  • e così via.

Le fughe di memoria portano a pagine che sembrano essere lente e sovrappeso 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 la possibilità di salvare gli 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.
}

I flussi scrivibili semplificano la scrittura in un file e, poiché si tratta di un flusso, puoi facilmente pipezzare le risposte da un flusso all'altro.

Il salvataggio degli handle dei file in IndexedDB ti consente di archiviare lo stato o di ricordare su quali file 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à ti servirà un nuovo token della prova dell'origine, perciò consulta il mio articolo aggiornato L'API Native File System: semplificare l'accesso ai file locali su web.dev con tutti i dettagli e 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 multiorigine

Alcune API web aumentano il rischio di attacchi side-channel come Spectre. Per ridurre questo rischio, i browser offrono un ambiente isolato basato su attivazione, detto 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 nel criterio della stessa origine.

Per informazioni dettagliate, leggi il post di Eiji su come Rendere il tuo sito web "isolato multiorigine" utilizzando COOP e COEP.

Segnali web

La misurazione della qualità dell'esperienza utente ha molti facet. Sebbene alcuni aspetti dell'esperienza utente siano specifici per sito e contesto, esiste un insieme comune di indicatori, i "Segnali web essenziali", che sono fondamentali per tutte le esperienze web. Queste esigenze principali relative all'esperienza utente includono esperienza di caricamento, interattività e stabilità visiva dei contenuti delle pagine e, insieme, costituiscono la base dei Segnali web essenziali del 2020.

  • Largest Contentful Paint misura la velocità di caricamento percepita e contrassegna il punto nella sequenza temporale di caricamento della pagina in cui è probabile che vengano caricati i contenuti principali della pagina.
  • First Input Delay misura la reattività e quantifica l'esperienza che gli utenti provano a interagire per la prima volta con la pagina.
  • Cumulative Layout Shift misura la stabilità visiva e quantifica la quantità di variazioni del layout impreviste dei contenuti visibili delle pagine.

Tutte queste metriche acquisiscono importanti risultati incentrati sugli utenti, sono misurabili sul campo e hanno strumenti e equivalenti delle metriche diagnostiche di laboratorio. Ad esempio, sebbene Largest Contentful Paint è la metrica di caricamento topline, dipende anche molto da First Contentful Paint (FCP) e Time to First Byte (TTFB), che rimangono fondamentali da monitorare e migliorare.

Per scoprire di più, leggi l'articolo Introduzione a Segnali web: metriche essenziali per un sito integro sul Chromium Blog.

E altro ancora

Sei curioso di sapere quali saranno le novità in arrivo? Dai un'occhiata all'API Tracker di Fuugu per scoprirlo.

Per approfondire

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

Iscriviti

Se vuoi tenerti sempre al corrente sui nostri video, iscriviti al nostro canale YouTube degli sviluppatori di Chrome e riceverai una notifica via email ogni volta che viene lanciato un nuovo video.

Mi chiamo Pete LePage e ho bisogno di un taglio di capelli, ma non appena uscirà Chrome 84 sarò subito qui per informarti delle novità di Chrome.