Polyfills - a filler or a gaping hole? (Part-1)

A few days back, we received a priority message in our organization's Teams chat, which read: Security Vulnerability found - Polyfill JavaScript detected - HIGH.

To give a context, I work for a major banking firm and as you must know, banking and security vulnerabilities are like major foes. So, we started to dig deep into the matter and got it resolved in a few hours, which I'll discuss in the following. But the good (or worst?) part is when I googled about the issue initially, the search results that popped up kept me hooked for the rest of the day!

Let's highlight a discrepancy between a modern and a legacy browser. Here’s a and very simple implementation.

Now one might think, then what's the difference between transpilers and polyfills? Well, polyfills focus on emulating specific APIs which are missing rather than changing the entire codebase into an old-browser-friendly version done by transpilers. This allows for a more granular approach and of course, making it more efficient and performant.

This should give us enough background to get to the point to why I got hooked for a day till the very moment I'm writing this, about polyfills.

Now, Babel has a package called babel/polyfill which constitutes of 2 libraries: core-js and regenerator-runtime. Initially, importing this package would bring in all the polyfills into action.

import '@babel/polyfill';

But bringing in everything whether your project would use them or not, increased the bundle size and injecting polyfills globally might lead to conflicts in objects.

This led to deprecating the package and Babel recommends using the core-js library directly by

Step 1: Modifying the babel configuration

{

  "presets": [

    ["@babel/preset-env", {

      "useBuiltIns": "usage",

      "corejs": 3

    }]

  ]

}

Step 2: Manually import the polyfills that you'd use in your project

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

import "core-js/es/promise";

thus, saving memory and reducing unnecessary code.

Now, this is the end of one part, not so concerning per se, but definitely important in regard of a project, staying up to date with the changes in dependencies, serving their customers a better experience.

BUT. This is not all.

We're about to discuss a major attack which took place recently and shook up the entire internet and got them scouring their codebase.

And, it includes the thing which we've discussed over here. So stay tuned for the second part!