Alguns dias atrás, recebemos uma mensagem prioritária no bate-papo do Teams de nossa organização, que dizia: Vulnerabilidade de segurança encontrada - Polyfill JavaScript detectado - ALTO.
Para contextualizar, trabalho para uma grande empresa bancária e, como você deve saber, as vulnerabilidades bancárias e de segurança são como grandes inimigos. Então, começamos a nos aprofundar no assunto e em poucas horas o resolvemos, o que discutirei a seguir. Mas a parte boa (ou pior?) É que quando pesquisei inicialmente sobre o assunto no Google, os resultados da pesquisa que apareceram me mantiveram ligado pelo resto do dia!

Vamos destacar uma discrepância entre um navegador moderno e um navegador legado. Aqui está uma comparação entre a versão mais recente do Chrome e o Internet Explorer (IE) 9. Os navegadores modernos suportam muitos recursos do ES6 e, ao mesmo tempo, o IE9 e também o IE11, que ainda são usados ​​por muitas empresas, quase não suportam nenhum recurso do ES6 .
Aí vem para ajudar o conceito de transpiling, que no contexto do JavaScript, refere-se à conversão do código-fonte escrito em JavaScript moderno (ES6/ES2015 e além) em uma versão mais antiga como ES5 , que é amplamente suportado por navegadores mais antigos. Um transpilador muito popular é o Babel, que oferece uma variedade de recursos como transformação de sintaxe, agrupamento de código (junto com Webpack) e suporte para JSX (para nosso querido amigo React!).

Agora, o uso de transpiladores é muito comum em locais onde há muita sintaxe moderna e é preciso garantir a compatibilidade entre diferentes ambientes. Observe que converter uma base de código inteira em uma versão diferente requer muito tempo e também configurar um processo de construção e configuração adicional para coisas como Babel. Não é dito que, junto com a conversão de recursos sintáticos, a funcionalidade da API para estender a replicação do mesmo recurso no navegador antigo também é abordada.

Chegando à referência do Babel, ele constitui uma série de pacotes, fornecendo plugins para diversos tipos de funcionalidades como transformar classes ES6, funções de seta, etc. Entre isso, também oferece seu próprio pacote "polyfill".

Polyfills são pedaços de código que permitem que navegadores antigos forneçam a mesma/quase a mesma funcionalidade JS, que eles não fornecem nativamente, que é mostrada em versões mais recentes de navegadores. Aqui está um exemplo de vídeo rápido e uma implementação muito simples.

Agora, alguém pode pensar: qual é a diferença entre transpilers e polyfills? Bem, os polyfills se concentram na emulação de APIs específicas que estão faltando, em vez de alterar toda a base de código para uma versão amigável ao navegador antigo, feita por transpiladores. Isso permite uma abordagem mais granular e, claro, tornando-a mais eficiente e com melhor desempenho.

Isso deve nos fornecer informações suficientes para entender por que fiquei viciado por um dia até o momento em que estou escrevendo isso, sobre polyfills.

Agora, Babel tem um pacote chamado babel/polyfill que consiste em 2 bibliotecas: core-js e regenerator-runtime. Inicialmente, importar este pacote colocaria todos os polyfills em ação.

import '@babel/polyfill';

Mas trazer tudo, independentemente de seu projeto usá-los ou não, aumentar o tamanho do pacote e injetar polyfills globalmente pode levar a conflitos em objetos.
Isso levou à descontinuação do pacote e Babel recomenda usar a biblioteca core-js diretamente por
Etapa 1: Modificando a configuração do babel

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

Etapa 2: importe manualmente os polyfills que você usaria em seu projeto

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

assim, economizando memória e reduzindo código desnecessário.

Agora, isso é o fim de uma parte, não tão preocupante por si só, mas definitivamente importante no que diz respeito a um projeto, manter-se atualizado com as mudanças nas dependências, servindo uma melhor experiência aos seus clientes.

MAS. Isso não é tudo.

Estamos prestes a discutir um grande ataque que ocorreu recentemente e abalou toda a Internet e os fez vasculhar sua base de código.
E inclui o que discutimos aqui. Então fique ligado na segunda parte!