Несколько дней назад мы получили приоритетное сообщение в чате Teams нашей организации, которое гласило: Обнаружена уязвимость безопасности — обнаружен Polyfill JavaScript — ВЫСОКИЙ.
Чтобы дать контекст, я работаю в крупной банковской фирме, и, как вы, наверное, знаете, уязвимости в банковской сфере и безопасности — это как главные враги. Итак, мы начали углубляться в этот вопрос и разрешили его за несколько часов, о чем я расскажу ниже. Но хорошая (или худшая?) часть заключается в том, что когда я изначально искал в Google эту проблему, всплывающие результаты поиска держали меня на крючке до конца дня!

Давайте выделим несоответствие между современным и устаревшим браузером. Вот сравнение последней версии Chrome с Internet Explorer (IE) 9. Современные браузеры поддерживают множество функций ES6, и в то же время IE9, а также IE11, которые до сих пор используются многими компаниями, почти не поддерживают какие-либо функции ES6. .
Здесь на помощь приходит концепция транспиляции, которая в контексте JavaScript относится к преобразованию исходного кода, написанного на современном JavaScript (ES6/ES2015 и более поздних версиях), в более старую версию, такую ​​​​как ES5. , который широко поддерживается старыми браузерами. Очень популярный транспилятор — Babel, который предлагает ряд функций, таких как преобразование синтаксиса, объединение кода (вместе с Webpack) и поддержку JSX (для нашего милого друга React!).

Теперь использование транспиляторов очень распространено в местах, где много современного синтаксиса, и необходимо обеспечить совместимость в различных средах. Обратите внимание, что преобразование всей кодовой базы в другую версию требует чертовски много времени, а также настройку процесса сборки и дополнительную настройку для таких вещей, как Babel. Само собой разумеется, что наряду с преобразованием синтаксических функций также рассматривается функциональность API для расширения репликации той же функции в старом браузере.

Что касается Babel, то он состоит из множества пакетов, предоставляющих плагины для различных видов функций, таких как преобразование классов ES6, стрелочных функций и т. д. в эквивалентный JS-код. Помимо этого, он также предлагает собственный пакет «polyfill».

Полифиллы — это фрагменты кода, которые позволяют старым браузерам предоставлять ту же или почти ту же функциональность JS, которую они не предоставляют изначально, и которая показана в новых версиях браузера. Вот небольшой видео пример и очень простая реализация.

Теперь можно подумать, а в чем же разница между транспилерами и полифилами? Что ж, полифилы сосредоточены на эмуляции конкретных API, которые отсутствуют, а не на изменении всей кодовой базы в версию, удобную для старых браузеров, созданную транспилерами. Это позволяет использовать более детальный подход и, конечно же, делает его более эффективным и производительным.

Это должно дать нам достаточно информации, чтобы понять, почему меня зацепило на день до того самого момента, когда я пишу это, о полифилах.

Теперь у Babel есть пакет под названием babel/polyfill, который состоит из двух библиотек: core-js и regenerator-runtime. Первоначально импорт этого пакета задействует все полифилы.

import '@babel/polyfill';

Но добавление всего, будет ли ваш проект использовать их или нет, увеличит размер пакета и глобальное внедрение полифилов может привести к конфликтам в объектах.
Это привело к прекращению поддержки пакета, и Babel рекомендует использовать библиотеку core-js напрямую
Шаг 1: Изменение конфигурации Babel

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

Шаг 2: вручную импортируйте полифилы, которые вы будете использовать в своем проекте

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

таким образом экономится память и сокращается ненужный код.

Теперь это конец одной части, которая не так уж и важна сама по себе, но определенно важна для проекта: оставаться в курсе изменений в зависимостях, улучшать качество обслуживания своих клиентов.

НО. Это еще не все.

Мы собираемся обсудить крупную атаку, которая произошла недавно и потрясла весь Интернет и заставила их прочесать свою кодовую базу.
И это включает в себя то, что мы здесь обсуждали. Так что ждите вторую часть!