Novidades do Chrome 83

Pete LePage

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

Veja o que é necessário saber:

Meu nome é Pete LePage, trabalho e filmo de casa. Vamos conferir as novidades para desenvolvedores no Chrome 83.

Tipos confiáveis

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

Considere innerHTML, por exemplo, com tipos confiáveis ativados. Se eu tentar transmitir uma string, ela falhará com um TypeError porque o navegador não sabe 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 todas as violações usando um cabeçalho CSP report-only.

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

Depois que tudo estiver pronto, você poderá ativar corretamente. Confira todos os detalhes em Prevenir vulnerabilidades de scripting em vários sites com base no DOM com os Tipos confiáveis no web.dev.

Atualizações nos controles de formulário

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

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

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

Os novos controles de formulário já foram lançados no Microsoft Edge e agora estão disponíveis no Chrome 83. Para mais informações, consulte Atualizações nos controles de formulário e no foco no blog do Chromium.

Testes de origem

Medir a memória com measureMemory()

A partir do Chrome 83, o performance.measureMemory() é uma nova API que permite medir o uso de memória da sua página e detectar vazamentos de memória.

É fácil introduzir vazamentos de memória:

  • 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 fazem com que as páginas pareçam lentas e infladas 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 de memória da sua página da Web com measureMemory() no web.dev para saber todos os detalhes da nova API.

Atualizações da API Native File System

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

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. Como é um stream, é possível direcionar facilmente as respostas de um stream para outro.

Salvar identificadores de arquivos 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ê vai precisar de um novo token de teste de origem para usar esses recursos. Confira meu artigo atualizado A API Native File System: simplificando o acesso a arquivos locais no 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 entre origens

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 baseado em ativação chamado de origem cruzada isolada. 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 isolar seu site em várias origens usando COOP e COEP para mais detalhes.

Web Vitals

Avaliar a qualidade da experiência do usuário tem muitas facetas. Embora alguns aspectos da experiência do usuário sejam específicos do site e do contexto, há um conjunto comum de indicadores, as Principais métricas da Web, que são essenciais para todas as experiências da Web. Essas necessidades de experiência do usuário incluem a experiência de carregamento, a interatividade e a estabilidade visual do conteúdo da página. Combinadas, elas são a base 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.
  • First Input Delay 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 visível da página.

Todas essas métricas capturam resultados importantes centrados no usuário, são mensuráveis no campo e têm equivalentes de métricas de diagnóstico de laboratório e ferramentas de suporte. Por exemplo, embora a Maior exibição de conteúdo seja a métrica de carregamento principal, ela também é altamente dependente da primeira exibição de conteúdo (FCP) e do tempo até o primeiro byte (TTFB), que continuam sendo essenciais para monitorar e melhorar.

Para saber mais, confira Introdução às métricas da Web: indicadores essenciais para um site saudável no blog do Chromium para conferir todos os detalhes.

E mais

Quer saber o que vem por aí? Confira o rastreador da API Fugu.

Leitura adicional

Isso abrange apenas alguns dos principais destaques. Confira os links abaixo para ver outras mudanças no Chrome 83.

Inscrever-se

Se quiser ficar por dentro dos nossos vídeos, inscreva-se no canal do YouTube para desenvolvedores do Chrome e receba uma notificação por e-mail sempre que lançarmos um novo vídeo.

Meu nome é Pete LePage, e eu preciso de um corte de cabelo, mas assim que o Chrome 84 for lançado, vou estar aqui para contar a você as novidades do Chrome.