Il y a quelques jours, nous avons reçu un message prioritaire dans le chat Teams de notre organisation, qui disait : Vulnérabilité de sécurité trouvée - Polyfill JavaScript détecté - ÉLEVÉ.
Pour donner un contexte, je travaille pour une grande société bancaire et comme vous devez le savoir, les vulnérabilités bancaires et de sécurité sont comme des ennemis majeurs. Nous avons donc commencé à approfondir le problème et l'avons résolu en quelques heures, ce dont je parlerai dans ce qui suit. Mais le bon (ou le pire ?) c'est que lorsque j'ai fait une première recherche sur le problème sur Google, les résultats de recherche qui sont apparus m'ont tenu accro pour le reste de la journée !

Soulignons une différence entre un navigateur moderne et un navigateur existant. Voici une comparaison entre la dernière version de Chrome et Internet Explorer (IE) 9. Les navigateurs modernes prennent en charge de nombreuses fonctionnalités ES6 et en même temps, IE9 et IE11, qui sont encore utilisés par de nombreuses entreprises, ne prennent pratiquement en charge aucune fonctionnalité ES6. .
Voici pour aider le concept de transpiling, qui dans le contexte de JavaScript, fait référence à la conversion du code source écrit en JavaScript moderne (ES6/ES2015 et au-delà) dans une version plus ancienne comme ES5 , qui est largement pris en charge par les anciens navigateurs. Un transpilateur très populaire est Babel, qui offre une gamme de fonctionnalités telles que la transformation de la syntaxe, le regroupement de code (avec Webpack) et la prise en charge de JSX (pour notre doux ami, React !).

Maintenant, l'utilisation de transpilateurs est très courante là où il existe de nombreuses syntaxes modernes, et il faut garantir la compatibilité entre différents environnements. Notez que la conversion d'une base de code entière en une version différente nécessite énormément de temps et également la mise en place d'un processus de construction et d'une configuration supplémentaire pour des choses comme Babel. Il va de soi que, outre la conversion des fonctionnalités syntaxiques, la fonctionnalité API permettant d'étendre la réplication des mêmes fonctionnalités dans l'ancien navigateur est également couverte.

En ce qui concerne la référence de Babel, il constitue de nombreux packages, fournissant des plugins pour différents types de fonctionnalités comme la transformation de classes ES6, de fonctions fléchées, etc. en code JS équivalent. Parmi ceux-ci, il propose également son propre package « polyfill ».

Polyfills sont des morceaux de code qui permettent aux anciens navigateurs de fournir la même/presque la même fonctionnalité JS, qu'ils ne fournissent pas nativement, et qui est affichée dans les versions plus récentes du navigateur. Voici un exemple vidéo rapide et une mise en œuvre très simple.

Maintenant, on pourrait se demander, alors quelle est la différence entre les transpilers et les polyfills ? Eh bien, les polyfills se concentrent sur l'émulation d'API spécifiques qui manquent plutôt que sur la modification de l'intégralité de la base de code en une version conviviale pour les anciens navigateurs réalisée par des transpileurs. Cela permet une approche plus granulaire et, bien sûr, la rend plus efficace et performante.

Cela devrait nous donner suffisamment d'informations pour comprendre pourquoi je suis devenu accro pendant une journée jusqu'au moment même où j'écris ceci, à propos des polyfills.

Maintenant, Babel a un package appelé babel/polyfill qui constitue 2 bibliothèques : core-js et régénérator-runtime. Initialement, l'importation de ce package mettrait en action tous les polyfills.

import '@babel/polyfill';

Mais en introduisant tout, que votre projet les utilise ou non, l'augmentation de la taille du bundle et l'injection de polyfills à l'échelle mondiale pourraient entraîner des conflits dans les objets.
Cela a conduit à la dépréciation du package et Babel recommande d'utiliser la bibliothèque core-js directement par
Étape 1 : Modification de la configuration de Babel

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

Étape 2 : importez manuellement les polyfills que vous utiliseriez dans votre projet

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

économisant ainsi de la mémoire et réduisant le code inutile.

Maintenant, c'est la fin d'une partie, pas si préoccupante en soi, mais certainement importante par rapport à un projet, rester au courant des changements de dépendances, offrir une meilleure expérience à leurs clients.

MAIS. Ce n'est pas tout.

Nous sommes sur le point de discuter d'une attaque majeure qui a eu lieu récemment et qui a secoué tout Internet et les a amenés à parcourir leur base de code.
Et cela inclut ce dont nous avons discuté ici. Alors restez à l'écoute pour la deuxième partie !