Deciphering Polyfill.io Service vs. Polyfill.js
In light of recent events, there's been some confusion about the polyfill.io service and polyfill.js. This article aims to clarify the differences and address some concerns.
The Polyfill.io Incident
News recently surfaced about the polyfill.io service injecting malicious code into JavaScript assets fetched from their domain. This article provides a detailed account of the incident.
Understanding Polyfills
According to MDN, a polyfill is a code snippet, typically JavaScript on the web, that provides modern functionality on older browsers lacking native support. For instance, if you want to use the latest JavaScript APIs like array filter or map—supported by Chrome but not IE7—you'd need a polyfill to ensure seamless functionality.
The Role of CDNs
A Content Delivery Network (CDN) is a system of interconnected servers that accelerate webpage loading for data-heavy applications. Commonly used static assets like jQuery, AngularJS, React, and Bootstrap.css reside on CDNs. Web applications can directly use these assets, saving on network and storage costs while enhancing application performance.
When a user in Location X visits your web application, the static files needed are downloaded from the nearest CDN to Location X, reducing latency and improving performance.
The Case for External Services
This blog post provides an excellent discussion on using polyfill as a service. The main argument is that shipping polyfills for every feature can lead to unnecessary downloads for users with modern browsers. This can negatively impact performance and user experience. An external service can help by shipping only the relevant polyfills based on the requesting browser's user agent.
Angular's polyfill.js
Angular's build system generates optimized, production-ready code files, including a file named polyfill.js. There's been confusion about whether this polyfill.js is related to the polyfill.io incident. The answer is a resounding NO.
Angular's polyfill.js is a file generated by the Angular build system for polyfilling required functionalities. It doesn't use any of the polyfill.io services to generate this build file, unless you're using the service in your source code.