Hace unos días, recibimos un mensaje de prioridad en el chat de Teams de nuestra organización, que decía: Vulnerabilidad de seguridad encontrada: Polyfill JavaScript detectado: ALTA.
Para dar un contexto, trabajo para una importante empresa bancaria y, como debes saber, las vulnerabilidades bancarias y de seguridad son como enemigos importantes. Entonces, comenzamos a profundizar en el asunto y lo resolvimos en unas pocas horas, lo cual discutiré a continuación. Pero lo bueno (¿o lo peor?) es que cuando busqué en Google sobre el problema inicialmente, ¡los resultados de búsqueda que aparecieron me mantuvieron enganchado por el resto del día!

Destaquemos una discrepancia entre un navegador moderno y uno heredado. Aquí hay una comparación de la última versión de Chrome con Internet Explorer (IE) 9. Los navegadores modernos admiten una gran cantidad de funciones de ES6 y, al mismo tiempo, IE9 y también IE11, que todavía utilizan muchas empresas, apenas admiten funciones de ES6. .
Aquí viene de ayuda el concepto de transpilación, que en el contexto de JavaScript, se refiere a convertir el código fuente escrito en JavaScript moderno (ES6/ES2015 y posteriores) a una versión anterior como ES5. , que es ampliamente compatible con navegadores más antiguos. Un transpilador muy popular es Babel, que ofrece una variedad de características como transformación de sintaxis, agrupación de código (junto con Webpack) y soporte para JSX (¡para nuestro dulce amigo, React!).

Ahora, el uso de transpiladores es muy común en lugares donde hay mucha sintaxis moderna y es necesario garantizar la compatibilidad entre diferentes entornos. Tenga en cuenta que convertir una base de código completa a una versión diferente requiere muchísimo tiempo y también configurar un proceso de compilación y una configuración adicional para cosas como Babel. No se dice que, además de convertir funciones sintácticas, también se cubre la funcionalidad API para ampliar la replicación de las mismas funciones en navegadores antiguos.

Volviendo a la referencia de Babel, constituye una gran cantidad de paquetes que proporcionan complementos para diferentes tipos de funcionalidades, como transformar clases ES6, funciones de flecha, etc. en código JS equivalente. Entre esto, también ofrece su propio paquete "polyfill".

Polyfills son ​​piezas de código que permiten a los navegadores antiguos proporcionar la misma o casi la misma funcionalidad JS, que no proporcionan de forma nativa, que se muestra en las versiones más nuevas del navegador. A continuación se muestra un vídeo de ejemplo rápido y una implementación muy sencilla.

Ahora uno podría pensar, ¿cuál es la diferencia entre transpilers y polyfills? Bueno, los polyfills se centran en emular API específicas que faltan en lugar de cambiar todo el código base a una versión antigua compatible con el navegador realizada por transpiladores. Esto permite un enfoque más granular y, por supuesto, hacerlo más eficiente y eficaz.

Esto debería darnos suficientes antecedentes para llegar al punto de por qué me enganché durante un día hasta el momento en que escribo esto, sobre los polyfills.

Ahora, Babel tiene un paquete llamado babel/polyfill que consta de 2 bibliotecas: core-js y regenerator-runtime. Inicialmente, importar este paquete pondría en acción todos los polyfills.

import '@babel/polyfill';

Pero incorporar todo, ya sea que su proyecto los use o no, aumentar el tamaño del paquete e inyectar polyfills globalmente podría generar conflictos en los objetos.
Esto llevó a que el paquete quedara obsoleto y Babel recomienda usar la biblioteca core-js directamente mediante
Paso 1: Modificando la configuración de babel

{
  "presets": [
    ["@babel/preset-env", {
      "useBuiltIns": "usage",
      "corejs": 3
    }]
  ]
}

Paso 2: Importa manualmente los polyfills que usarías en tu proyecto

import "core-js/es/array/includes";
import "core-js/es/promise";

ahorrando así memoria y reduciendo código innecesario.

Ahora, este es el final de una parte, no tan preocupante per se, pero definitivamente importante con respecto a un proyecto, mantenerse actualizado con los cambios en las dependencias y ofrecer a sus clientes una mejor experiencia.

PERO. Esto no es todo.

Estamos a punto de discutir un ataque importante que tuvo lugar recientemente y sacudió todo Internet y los hizo rastrear su base de código.
E incluye lo que hemos discutido aquí. ¡Estad atentos a la segunda parte!