Novedades de Chrome 83

Pete LePage

Ahora Chrome 83 está comenzando a lanzarse de forma estable.

Tenga en cuenta lo siguiente:

Soy Pete LePage. Trabajo y disparo desde casa. Veamos las novedades para desarrolladores en Chrome 83.

Tipos de confianza

La secuencia de comandos entre sitios basada en DOM es una de las vulnerabilidades de seguridad más comunes en la Web. Puede ser fácil introducir una por error en tu página. Los tipos de confianza pueden ayudar a prevenir este tipo de vulnerabilidades, ya que requieren que proceses los datos antes de pasarlos a una función potencialmente peligrosa.

Tomemos como ejemplo innerHTML, con los tipos de confianza activados, si intento pasar una cadena, fallará con un TypeError porque el navegador no sabe si puede confiar en la cadena.

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

En cambio, debo usar una función segura, como textContent, pasar un tipo de confianza o crear el elemento y 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 activar los tipos de confianza, deberás identificar y corregir cualquier incumplimiento con un encabezado de CSP report-only.

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

Cuando ya tenga todo configurado, podrá encenderlo correctamente. Obtén más información en Cómo evitar las vulnerabilidades de las secuencias de comandos entre sitios basadas en DOM con Trusted Types en web.dev.

Actualizaciones de los controles de formularios

Todos los días usamos controles de formularios HTML y estos son clave para gran parte de la interactividad de la Web. Son fáciles de usar, tienen accesibilidad incorporada y están familiarizados para nuestros usuarios. El estilo de los controles de formulario puede ser inconsistente en distintos navegadores y sistemas operativos. A menudo, tenemos que enviar varias reglas CSS solo para obtener un aspecto coherente en todos los dispositivos.

Anteriormente, se aplicaba el estilo predeterminado de los controles de formularios.
Luego, se actualizó el estilo de los controles de formularios.

Estoy muy impresionado con el trabajo que realizó Microsoft para modernizar la apariencia de los controles de formularios. Más allá del atractivo estilo visual, ofrecen una mejor compatibilidad táctil, una mejor accesibilidad, incluida una mayor compatibilidad con el teclado.

Los nuevos controles de formulario ya llegaron a Microsoft Edge y ahora están disponibles en Chrome 83. Para obtener más información, consulta Actualizaciones de los controles de formulario y el enfoque en el blog de Chromium.

Pruebas de origen

Mide la memoria con measureMemory()

A partir de una prueba de origen en Chrome 83, performance.measureMemory() es una nueva API que permite medir el uso de memoria de tu página y detectar fugas de memoria.

Las fugas de memoria son fáciles de generar:

  • Olvidar cancelar el registro de un objeto de escucha de eventos
  • Cómo capturar objetos de un iframe
  • No cerrar un trabajador
  • Acumula objetos en arreglos
  • y así sucesivamente.

Las fugas de memoria hacen que las páginas parezcan lentas y demasiado grandes para los usuarios.

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

Consulta Supervisa el uso total de memoria de tu página web con measureMemory() en web.dev para obtener todos los detalles de la API nueva.

Actualizaciones en la API de Native File System

La API de Native File System inició una nueva prueba de origen en Chrome 83 con compatibilidad para transmisiones que admiten escritura y la capacidad de guardar controladores de archivos.

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

Las transmisiones con capacidad de escritura facilitan mucho la escritura en un archivo y, debido a que son transmisiones, puedes canalizar respuestas de una transmisión a otra con facilidad.

Guardar controladores de archivos en IndexedDB te permite almacenar el estado o recordar en qué archivos estuvo trabajando un usuario. Por ejemplo, mantén una lista de archivos editados recientemente, abre el último archivo en el que estuvo trabajando el usuario, etcétera.

Necesitarás un nuevo token de prueba de origen para usar estas funciones, así que consulta mi artículo actualizado La API del sistema de archivos nativos: Simplifica el acceso a archivos locales en web.dev con todos los detalles, y cómo obtener tu nuevo token de prueba de origen.

Otras pruebas de origen

Verifica si hay una lista completa de las funciones en la prueba de origen.

Nuevas políticas de origen cruzado

Algunas APIs web aumentan el riesgo de ataques de canal lateral, como Spectre. Para mitigar ese riesgo, los navegadores ofrecen un entorno aislado basado en la habilitación llamado aislado de origen cruzado. El estado aislado de origen cruzado también evita que se modifiquen document.domain. Poder modificar document.domain permite la comunicación entre documentos del mismo sitio y se consideró una oportunidad en la política del mismo origen.

Para obtener más detalles, consulta la publicación de Eiji sobre cómo hacer que tu sitio web sea "aislado de origen cruzado" con COOP y COEP.

Métricas web

Medir la calidad de la experiencia del usuario tiene muchas facetas. Si bien algunos aspectos de la experiencia del usuario son específicos del sitio y el contexto, hay un conjunto común de indicadores, las "Métricas web esenciales", que es fundamental para todas las experiencias web. Estas necesidades principales de la experiencia del usuario incluyen la experiencia de carga, la interactividad y la estabilidad visual del contenido de la página, y su combinación es la base de las Métricas web esenciales de 2020.

  • Largest Contentful Paint mide la velocidad de carga percibida y marca el punto en el cronograma de carga de la página cuando es probable que se haya cargado el contenido principal de la página.
  • El retraso de primera entrada mide la capacidad de respuesta y cuantifica la experiencia que sienten los usuarios cuando intentan interactuar con la página por primera vez.
  • Cambio de diseño acumulado mide la estabilidad visual y cuantifica la cantidad de cambios de diseño inesperados del contenido visible de la página.

Todas estas métricas capturan resultados importantes centrados en el usuario, se pueden medir en el campo y cuentan con herramientas y equivalentes de métricas de diagnóstico de lab compatibles. Por ejemplo, si bien Largest Contentful Paint es la métrica de carga de la línea superior, también depende en gran medida de First Contentful Paint (FCP) y del tiempo hasta el primer byte (TTFB), que siguen siendo fundamentales para supervisar y mejorar.

Si quieres obtener más información, consulta Presentación de las Métricas web: métricas esenciales para un sitio en buen estado en el blog de Chromium a fin de obtener más información.

Más entornos

¿Quieres saber qué te espera en el futuro? Consulta el rastreador de la API de Fugu para averiguarlo.

Lecturas adicionales

Esto abarca solo algunos de los aspectos más destacados. Consulta los vínculos que aparecen a continuación para ver más cambios en Chrome 83.

Suscribirse

Si quieres mantenerte al día con nuestros videos, suscríbete a nuestro canal de YouTube para desarrolladores de Chrome. Recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage y necesito cortarme el cabello, pero en cuanto se lance Chrome 84, estaré aquí para contarte las novedades de Chrome.