El día de hoy se lanza Firefox número 74. Las funciones más relevantes que te presentamos esta vez son mejoras en la seguridad: Política de funciones, el encabezado Cross-Origin-Resource-Policy y la eliminación del soporte para TLS 1.0/1.1. También tenemos algunas nuevas funciones de propiedades de texto CSS, el operador de encadenamiento opcional JS y otras características de métricas de texto de canvas 2D, junto con el habitual conjunto de mejoras de las herramientas para desarrolladores y corrección de errores.

Como de costumbre, sigue leyendo para conocer los aspectos más destacados, o consulta la lista completa de añadidos en los siguientes artículos:

• Firefox 74 para desarrolladores
• Compatibilidad del sitio con Firefox 74
• Notas de publicación para el usuario final de Firefox 74

Mejoras en la seguridad

Veamos las mejoras en seguridad que tenemos en la versión 74.

Política de funciones

Finalmente hemos habilitado la Política de funciones de forma predeterminada. Ahora puedes usar los atributos <iframe> allow y el encabezado HTTP Feature-Policy para definir las características de permisos de tus documentos de nivel superior e iFrames. A continuación tienes algunos ejemplos de su sintaxis:

<iframe src="https://example.com" allow="fullscreen"></iframe>

Feature-Policy: microphone 'none'; geolocation 'none'

CORP

También hemos habilitado el soporte para el encabezado Cross-Origin-Resource-Policy(CORP), lo que permite a los sitios y aplicaciones web asignar protección contra ciertas solicitudes de origen cruzado (como las procedentes de elementos <img> y <script>). Esto puede ser útil para mitigar ataques especulativos de canal lateral (como Spectre y Meltdown) así como los ataques de inclusión de ejecución de comandos entre sitios (Cross-Site Scripting).

Los valores disponibles son same-origin y same-site. same-origin solo permite solicitudes que compartan el mismo esquema, host y puerto para leer el recurso pertinente. Esto brinda un nivel adicional de protección más allá de la política del mismo origen de forma determinada de la web. same-site solo permite solicitudes que comparten el mismo sitio.

Para usar CORP hay que establecer uno de estos valores en el encabezado, por ejemplo:

Cross-Origin-Resource-Policy: same-site

Eliminación de TLS 1.0/1.1

Finalmente, pero igual de importante, Firefox 74 elimina el soporte de TLS 1.0/1.1, para ayudar a elevar el nivel general de seguridad de la plataforma web. Esto es vital para que el ecosistema TLS avance, así como eliminar una serie de puntos vulnerables que existían como resultado de que TLS 1.0/1.1 no fuera tan robusto como hubiéramos deseado. Por todo ello, es necesario que desaparezcan.

El cambio se anunció por primera vez en octubre de 2018 como una iniciativa conjunta de Mozilla, Microsoft y Apple. Ahora, en marzo del 2020, todos estamos cumpliendo nuestras promesas (a excepción de Apple, que realizará el cambio un poco más tarde).

El resultado es que tendrás que asegurarte de que, en adelante, tu servidor web sea compatible con TLS 1.2 o 1.3. Lee Actualización de la eliminación de TLS 1.0 y 1.1 para saber cómo probar y actualizar tu configuración TLS/SSL. A partir de ahora, Firefox mostrará una página de error Secure Connection Failed al conectarse con servidores que usen versiones anteriores de TLS. ¡Actualízate ahora, si todavía no lo has hecho!

Nota: durante algunas actualizaciones (y algo más de tiempo en el caso de Firefox ESR), la página de error Falló la conexión segura incluirá un botón de anulación que te permitirá habilitar TLS 1.0 y 1.1 en los casos en que un servidor aún no esté actualizado, pero no cuentes con esto durante mucho tiempo.

Para saber más sobre la eliminación de TLS 1.0/1.1 y lo que hay detrás, lee It’s the Boot for TLS 1.0 and TLS 1.1.

Otras adiciones a la plataforma web

Tenemos muchos más añadidos de plataforma web para ti en Firefox 74.

Nuevas características de texto CSS

Para comenzar, la propiedad text-underline-position está habilitada de forma predeterminada. Esto es útil para posicionar subrayados establecidos en tu texto en determinados contextos a fin de realizar efectos tipográficos específicos.

Por ejemplo, si el writing mode de tu texto es horizontal, puedes usar text-underline-position: under; para colocar el subrayado debajo de todos los descendientes; esto es útil para asegurar la legibilidad en las fórmulas químicas y matemáticas, que hacen uso frecuente de los subíndices.

.horizontal {
text-underline-position: under;
}

En textos con modo de escritura writing-mode vertical, podemos usar valores de left o right para que el subrayado aparezca a izquierda o derecha del texto, según se requiera.

.vertical {
  writing-mode: vertical-rl;
  text-underline-position: left;
}

Además, las propiedades text-underline-offset y text-decoration-thickness ahora aceptan valores porcentuales, por ejemplo:

text-decoration-thickness: 10%;

Para estas propiedades, este es un porcentaje de 1em del tamaño actual de la fuente.

Encadenamiento opcional en JavaScript

Ahora disponemos de un operador de encadenamiento opcional en JavaScript (?.). Cuando intentes acceder a un objeto dentro de otro en cadena, esto te permite comprobar implícitamente la existencia del primer objeto, evitando errores y la necesidad de escribir explícitamente código de validación.

let nestedProp = obj.first?.second;

Nuevas métricas de texto de canvas en 2D

La API TextMetrics (que se obtiene usando el método CanvasRenderingContext2D.measureText()) se ha ampliado para incluir cuatro nuevas propiedades que miden el cuadro delimitador real (actualBondingBox): actualBoundingBoxLeft, actualBoundingBoxRight, actualBoundingBoxAscent y actualBoundingBoxDescent.

Por ejemplo:

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const text = ctx.measureText('Hello world');

text.width;                    // 56.08333206176758
text.actualBoundingBoxAscent; // 8
text.actualBoundingBoxDescent; // 0
text.actualBoundingBoxLeft;   // 0
text.actualBoundingBoxRight;   // 55.733333333333334

Adiciones de las herramientas para desarrolladores

A continuación se detallan los añadidos de las herramientas para desarrolladores.

Renderizado de dispositivos similares en modo de diseño

A pesar de que Firefox for Android se vuelve a lanzar con GeckoView para tener mayor velocidad y privacidad, las herramientas para desarrolladores se deben mantener a la vanguardia. Las pruebas en dispositivos móviles deben tener la menor fricción posible, tanto al usar el Modo de diseño responsivo (RDM) en tu equipo de escritorio como en el dispositivo con la Depuración remota.

Para que los desarrolladores puedan confiar en el resultado sin tener un dispositivo a mano, es fundamental que el modo de diseño responsivo funcione de la forma más correcta posible. En los últimos lanzamientos, hemos implementado mejoras importantes que aseguran que meta viewport se aplique correctamente con Touch Simulation. Esto está relacionado con los preajustes mejorados de los dispositivos, que habilitan automáticamente la simulación táctil para dispositivos móviles.

Curiosidad: El equipo logró que esta simulación fuera tan precisa que ya ha permitido identificar y corregir errores de renderizado para Firefox en Android.

Consejo para desarrolladores: Abre el modo de diseño responsivo sin usar las herramientas para desarrolladores a través del menú de herramientas, o también Ctrl + Mayús + M (en Windows) o Cmd + Opt + M en macOS.

Nos gustaría conocer tus experiencias tras realizar un recorrido por tu sitio en el RDM o en tu teléfono Android con Firefox Nightly for Developers.

Herramientas útiles de CSS

Los nuevos avisos en contexto de Inspector de la página con respecto a las reglas CSS inactivas han recibido muchos comentarios positivos. Te ayudan a resolver los intrincados problemas de CSS a la vez que te enseñan las complejas interdependencias de las reglas de las hojas de estilo en cascada.

Desde su lanzamiento, no hemos dejado de ajustar y añadir reglas, a menudo basadas en los comentarios de los usuarios. En la versión 74 podemos destacar una nueva configuración de detección que te advierte cuando las propiedades dependen de elementos posicionados, principalmente z-index, top, left, bottom, y right.

Tus comentarios y opiniones serán útiles para refinar y expandir las reglas. Saluda al equipo en el chat DevTools en la instancia Matrix de Mozilla o sigue nuestro trabajo a través de @FirefoxDevTools.

Depuración para trabajadores anidados

El equipo del depurador de JavaScript de Firefox se ha centrado en la optimización de los Web Workers en las últimas versiones para una mayor facilidad de inspección y depuración. Cuanto más desarrolladores y marcos de trabajo utilicen los trabajadores para alejar el procesamiento del hilo principal, más fácil será para los navegadores priorizar el código en ejecución, que se dispara como resultado de las acciones de los usuarios.

Ahora se muestran en el Depurador los trabajadores web anidados, que permiten a los trabajadores generar y controlar sus propias instancias de trabajo:

Integración mejorada de las React DevTools

El complemento de herramientas para desarrolladores de React es uno de muchos complementos para desarrolladores que se integran estrechamente con las herramientas para desarrolladores de Firefox. Gracias a las API de WebExtensions, los desarrolladores pueden generar y publicar complementos para todos los navegadores de la misma base de código.

En colaboración con los encargados de mantener los complementos de React, trabajamos para rehabilitar y mejorar los menús contextuales de los complementos, incluido Ir a definición. Esta acción permite que los desarrolladores salten de los componentes de React directamente a sus archivos de origen en el Depurador. Ya se habilitó la misma función para saltar a los elementos en el Inspector. Queremos desarrollar esto aún más, para que los flujos del framework estén perfectamente alineados con el resto de las herramientas.

Acceso temprano a las funciones para desarrolladores en Developer Edition

Developer Edition es el canal de prelanzamiento de Firefox que permite el acceso anticipado a las herramientas y funciones de la plataforma. Su configuración también permite mayor funcionalidad de forma predeterminada para los desarrolladores. Queremos llevar pronto las nuevas funciones a la Developer Edition para recopilar tus comentarios, incluidos los siguientes puntos destacados.

Evaluación inmediata para las expresiones de consola

Parece magia explorar los objetos y funciones de JavaScript y el DOM con la evaluación inmediata. Siempre y cuando las expresiones tecleadas en la Consola Web no presenten efectos secundarios, sus resultados se previsualizan mientras escribes, lo que te permite identificar y corregir los errores más rápido que antes.

Trazas de pila asíncronas para el depurador y la consola

La programación moderna en JavaScript depende en gran medida del apilamiento de async/await, además de otras operaciones asíncronas como eventos, promesas y tiempos de espera. Gracias a una mejor integración con el motor de JavaScript, ahora se captura la ejecución asíncrona para ofrecer una imagen más completa.

Las pilas de llamadas asíncronas en el depurador te permiten recorrer los eventos, los tiempos de espera y las llamadas de funciones basadas en promesas que se ejecutan a lo largo del tiempo. En la consola, las pilas asíncronas facilitan la localización de la causa raíz de los errores.

Un vistazo a la depuración de trabajadores de servicio

Hace tiempo que existe en Nightly y estamos más que entusiasmados por ponerlo en tus manos pronto. Espérala en Firefox 76, que se convertirá en la Developer Edition en 4 semanas.