Novedades de Chrome 83

Pete LePage

Chrome 83 comienza a lanzarse en la versión estable.

Tenga en cuenta lo siguiente:

Soy Pete LePage, trabajo y grabo desde casa. ¡Comencemos y 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 de la Web. Puede ser fácil introducir uno por accidente en tu página. Los tipos de confianza pueden ayudar a evitar este tipo de vulnerabilidades, ya que requieren que proceses los datos antes de pasarlos a una función potencialmente peligrosa.

Tomemos innerHTML como ejemplo. Si intento pasar una cadena con los tipos de confianza activados, 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 su lugar, 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, te recomendamos que identifiques y corrijas cualquier incumplimiento con un encabezado CSP report-only.

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

Una vez que hayas terminado, puedes encenderlo correctamente. Los detalles completos se encuentran en Cómo evitar vulnerabilidades de secuencias de comandos entre sitios basadas en DOM con Trusted Types, en web.dev.

Actualizaciones de los controles de formularios

Usamos controles de formulario HTML todos los días, y son clave para gran parte de la interactividad de la Web. Son fáciles de usar, tienen accesibilidad integrada y son familiares para nuestros usuarios. El diseño de los controles de formulario puede ser incoherente entre navegadores y sistemas operativos. Además, con frecuencia, debemos enviar una serie de reglas de CSS solo para obtener un aspecto coherente en todos los dispositivos.

Antes, diseño predeterminado de los controles de formulario.
Después, se actualizaron los diseños de los controles de formulario.

Me impresiona mucho el trabajo que ha hecho Microsoft para modernizar la apariencia de los controles de formularios. Más allá de un estilo visual más agradable, ofrecen una mejor compatibilidad táctil y una mejor accesibilidad, incluida una compatibilidad con teclado.

Los nuevos controles de formularios ya están disponibles en 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 API nueva que permite medir el uso de memoria de tu página y detectar fugas de memoria.

Las fugas de memoria son fáciles de introducir:

  • Olvidar anular el registro de un objeto de escucha de eventos
  • Captura objetos de un iframe
  • No cerrar un trabajador
  • Acumulación de objetos en arrays
  • y así sucesivamente.

Las fugas de memoria hacen que las páginas aparezcan lentas y sobrecargadas 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 nueva API.

Actualizaciones de la API del sistema de archivos nativo

La API de Native File System inició una nueva prueba de origen en Chrome 83 con compatibilidad con flujos de 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.
}

Los flujos de escritura facilitan mucho la escritura en un archivo y, como se trata de un flujo, puedes canalizar respuestas de un flujo a otro con facilidad.

Guardar controladores de archivos en IndexedDB te permite almacenar el estado o recordar en qué archivos estaba trabajando un usuario. Por ejemplo, mantener una lista de archivos modificados recientemente, abrir el último archivo en el que el usuario estaba trabajando, etcétera.

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

Otras pruebas de origen

Consulta una lista completa de las funciones de 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 aceptación que se denomina aislado de origen cruzado. El estado aislado de origen cruzado también evita modificaciones de document.domain. Poder alterar document.domain permite la comunicación entre documentos del mismo sitio y se considera un resquicio en la política de mismo origen.

Consulta la publicación de Eiji Cómo hacer que tu sitio web sea "aislado de varios orígenes" con COOP y COEP para obtener detalles completos.

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 del contexto, existe un conjunto común de indicadores, las "Métricas web esenciales", que son fundamentales para todas las experiencias web. Estas necesidades básicas de la experiencia del usuario incluyen la experiencia de carga, la interactividad y la estabilidad visual del contenido de la página, y, en conjunto, son 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.
  • Retraso de primera entrada mide la capacidad de respuesta y cuantifica la experiencia que los usuarios sienten cuando intentan interactuar con la página por primera vez.
  • El 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 tienen equivalentes de métricas y herramientas de diagnóstico de lab compatibles. Por ejemplo, aunque Largest Contentful Paint es la métrica de carga principal, también depende en gran medida del primer procesamiento de imagen con contenido (FCP) y del tiempo hasta el primer byte (TTFB), que siguen siendo fundamentales para supervisar y mejorar.

Para obtener más información, consulta Presentamos las métricas web: métricas esenciales para un sitio saludable en el blog de Chromium y obtén todos los detalles.

Y mucho más

¿Quieres saber qué se viene en el futuro? Consulta Seguimiento de la API de Fugu para obtener más información.

Lecturas adicionales

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

Suscribirse

Si quieres mantenerte al tanto de nuestros videos, suscríbete a nuestro canal de YouTube de Desarrolladores de Chrome y recibirás una notificación por correo electrónico cada vez que lancemos un video nuevo.

Soy Pete LePage y necesito un corte de pelo, pero en cuanto se lance Chrome 84, estaré aquí para contarte las novedades de Chrome.