Esta página foi traduzida pela API Cloud Translation.

Novidades do Chrome 83

Pet LePage

Twitter GitHub Glitch Mastodon Página inicial

O Chrome 83 está começando a ser lançado na versão estável agora.

Veja o que é necessário saber:

Os tipos confiáveis ajudam a evitar vulnerabilidades de scripting em vários sites.
Os elementos de formulário têm uma transformação importante.
Há uma nova maneira de detectar vazamentos de memória.
A API do sistema de arquivos nativo inicia um novo teste de origem com mais funcionalidades.
Há novas políticas de origem cruzada.
Lançamos o programa Métricas da Web para fornecer orientações unificadas sobre indicadores de qualidade que acreditamos ser essenciais para oferecer uma ótima experiência do usuário na Web.
e muito mais.

Sou Pete LePage, trabalhando e gravando em casa. Vamos nos aprofundar e ver as novidades para os desenvolvedores no Chrome 83.

Tipos confiáveis

A execução de scripts em vários sites com base em DOM é uma das vulnerabilidades de segurança mais comuns na Web. Pode ser fácil introduzir uma pessoa na sua página sem querer. Os tipos confiáveis podem ajudar a evitar esses tipos de vulnerabilidades, porque exigem que você processe os dados antes de passá-los para uma função potencialmente perigosa.

Por exemplo, considere innerHTML. Com tipos confiáveis ativados, se eu tentar transmitir uma string, ela vai falhar com um TypeError, porque o navegador não vai saber se pode confiar na string.

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

Em vez disso, preciso usar uma função segura, como textContent, transmitir um tipo confiável ou criar o elemento e usar 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);

Antes de ativar os tipos confiáveis, identifique e corrija qualquer violação usando um cabeçalho report-only da CSP.

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

Depois de abotoar tudo, você pode ligar o dispositivo corretamente. Todos os detalhes estão disponíveis em Evitar vulnerabilidades de scripting em vários sites baseado em DOM com tipos confiáveis (em inglês) em web.dev.

Atualizações nos controles de formulários

Usamos controles de formulário HTML todos os dias, e eles são fundamentais para grande parte da interatividade da Web. Eles são fáceis de usar, têm acessibilidade integrada e são familiares dos nossos usuários. O estilo dos controles de formulário pode ser inconsistente em navegadores e sistemas operacionais. Além disso, frequentemente precisamos enviar várias regras de CSS para ter uma aparência consistente em todos os dispositivos.

Antes, o estilo padrão dos controles de formulário.

Depois, atualizamos o estilo dos controles de formulário.

Fiquei muito impressionado com o trabalho que a Microsoft tem feito para modernizar a aparência dos controles de formulários. Além do estilo visual mais agradável, eles oferecem melhor suporte ao toque e acessibilidade, incluindo maior suporte ao teclado.

Os novos controles de formulário já chegaram ao Microsoft Edge e estão disponíveis no Chrome 83. Para saber mais, consulte Atualizações nos controles e foco de formulários no blog do Chromium.

Testes de origem

Medir a memória com `measureMemory()`

Iniciando um teste de origem no Chrome 83, a performance.measureMemory() é uma nova API que permite medir o uso de memória da sua página e detectar vazamentos de memória.

Vazamentos de memória são fáceis de introduzir:

Esquecer de cancelar o registro de um listener de eventos
Como capturar objetos de um iframe
Não fechar um worker
Acumular objetos em matrizes
e assim por diante.

Vazamentos de memória levam a páginas que parecem lentas e inchadas para os usuários.

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

Confira Monitorar o uso total da memória da sua página da Web com measureMemory() em web.dev para ver todos os detalhes da nova API.

Atualizações na API Native File System

A API Native File System iniciou um novo teste de origem no Chrome 83 com suporte a streams graváveis e capacidade de salvar identificadores de arquivos.

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

Os streams graváveis facilitam muito a gravação em um arquivo. Além disso, por se tratar de um stream, é possível encaminhar facilmente as respostas de um stream para outro.

Salvar identificadores de arquivo no IndexedDB permite armazenar o estado ou lembrar em quais arquivos um usuário estava trabalhando. Por exemplo, mantenha uma lista de arquivos editados recentemente, abra o último arquivo em que o usuário estava trabalhando e assim por diante.

Você precisará de um novo token de teste de origem para usar esses recursos. Portanto, confira meu artigo atualizado API Native File System: como simplificar o acesso a arquivos locais em web.dev com todos os detalhes e como conseguir seu novo token de teste de origem.

Outros testes de origem

Confira uma lista completa de recursos no teste de origem.

Novas políticas de origem cruzada

Algumas APIs da Web aumentam o risco de ataques de canal lateral, como o Spectre. Para reduzir esse risco, os navegadores oferecem um ambiente isolado com base em permissão chamado "isolamento de origem cruzada". O estado isolado de origem cruzada também impede modificações de document.domain. A capacidade de alterar document.domain permite a comunicação entre documentos do mesmo site e foi considerada uma brecha na política de mesma origem.

Confira a postagem de Eiji Como tornar seu site "isolado de origem cruzada" usando COOP e COEP para mais detalhes.

Web Vitals

Medir a qualidade da experiência do usuário tem muitos aspectos. Embora alguns aspectos da experiência do usuário sejam específicos do site e do contexto, há um conjunto comum de indicadores que são essenciais para todas as experiências na Web: as Core Web Vitals. Essas principais necessidades de experiência do usuário incluem experiência de carregamento, interatividade e estabilidade visual do conteúdo da página. Essas são as bases das Core Web Vitals de 2020.

A Maior exibição de conteúdo mede a velocidade de carregamento percebida e marca o ponto na linha do tempo de carregamento da página em que o conteúdo principal provavelmente foi carregado.
A latência na primeira entrada mede a capacidade de resposta e quantifica a experiência dos usuários ao tentar interagir pela primeira vez com a página.
A Mudança de layout cumulativa mede a estabilidade visual e quantifica a quantidade de mudanças inesperadas de layout do conteúdo da página visível.

Todas essas métricas capturam resultados importantes centrados no usuário, são mensuráveis de campo e têm ferramentas e equivalentes de métrica de diagnóstico de laboratório. Por exemplo, embora a Maior exibição de conteúdo seja a métrica de carregamento de linha superior, ela também depende muito da Primeira exibição de conteúdo (FCP, na sigla em inglês) e do Tempo para o primeiro byte (TTFB, na sigla em inglês), que são essenciais para monitoramento e melhoria.

Para saber mais, confira Apresentação das Core Web Vitals: métricas essenciais para um site íntegro (em inglês) no blog do Chromium para ver detalhes completos.

E mais

O Chrome agora oferece suporte à API Barcode Detection, que oferece a capacidade de detectar e decodificar códigos de barras.
A nova função @supports do CSS oferece detecção de recursos para seletores de CSS.
As novas anotações ARIA (link em inglês) oferecem suporte à acessibilidade do leitor de tela para comentários, sugestões e destaques de texto com significados semânticos (semelhante a <mark>).
A consulta de mídia prefers-color-scheme permite que os autores ofereçam suporte ao próprio tema escuro para que tenham controle total sobre as experiências que criam.
Agora, o JavaScript é compatível com módulos em workers compartilhados.

Quer saber o que está por vir? Confira o rastreador de APIs do Fugu (em inglês) para conferir.