Novedades de Chrome 83

Pete LePage

Chrome 83 comenzará a lanzarse en la versión estable ahora.

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 en la Web. Puede ser fácil introducir uno accidentalmente 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. Puedes encontrar todos los detalles 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, tenemos que 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 impresionó mucho el trabajo que Microsoft ha estado haciendo para modernizar la apariencia de los controles de formulario. Además de un estilo visual más atractivo, ofrecen una mejor compatibilidad con la función táctil y una mejor accesibilidad, incluida la compatibilidad con el 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 la 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 la lista completa de 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 voluntaria, llamado aislamiento 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 sienten los usuarios cuando intentan interactuar por primera vez con la página.
  • El Cambio de diseño acumulado mide la estabilidad visual y cuantifica la cantidad de cambio de diseño inesperado 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 herramientas y equivalentes de métricas de diagnóstico de laboratorio compatibles. Por ejemplo, si bien Largest Contentful Paint es la métrica de carga general, 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é sucederá en el futuro? Consulta el Fugu API Tracker para ver cómo funciona.

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.