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. Muitas vezes, precisamos implementar 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.

O trabalho que a Microsoft tem feito para modernizar a aparência dos controles de formulários me impressiona. 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.

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 fazem com que as páginas pareçam lentas e poluídas 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 saber 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 a 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. 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 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 ("Core Web Vitals") que é fundamental 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 Cumulative Layout Shift mede a estabilidade visual e quantifica a quantidade de mudança inesperada 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 no campo e têm ferramentas e equivalentes de métricas 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 First Contentful Paint (FCP, na sigla em inglês) e do Tempo para o primeiro byte (TTFB), que permanecem 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.

E mais

Quer saber o que vem por aí? Confira o Rastreador de APIs do Fuug para saber mais.

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.