Polyfills - 필러 또는 틈이 있는 구멍? (파트-1)

며칠 전 조직의 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 코드로 변환하는 등 다양한 기능을 위한 플러그인을 제공하는 많은 패키지로 구성됩니다. 이 중에서 자체적인 "폴리필" 패키지도 제공합니다.

폴리필은 기존 브라우저가 기본적으로 제공하지 않지만 최신 브라우저 버전에 표시되는 동일/거의 동일한 JS 기능을 제공할 수 있도록 하는 코드 조각입니다. 다음은 간단한 동영상 예시와 매우 간단한 구현입니다.

이제 트랜스파일러와 폴리필의 차이점이 무엇인지 생각할 수도 있습니다. 폴리필은 전체 코드베이스를 트랜스파일러가 수행하는 이전 브라우저 친화적 버전으로 변경하는 대신 누락된 특정 API를 에뮬레이션하는 데 중점을 둡니다. 이를 통해 더욱 세분화된 접근 방식이 가능해지며 더 효율적이고 성능도 향상됩니다.

이 글은 제가 이 글을 쓰는 바로 그 순간까지 폴리필에 대해 하루 동안 매료되었던 이유를 설명하기에 충분한 배경 ​​지식을 제공할 것입니다.

이제 Babel에는 core-js와 regenerator-runtime이라는 두 개의 라이브러리로 구성된 babel/polyfill이라는 패키지가 있습니다. 처음에 이 패키지를 가져오면 모든 폴리필이 실행됩니다.

import '@babel/polyfill';

그러나 프로젝트에서 사용 여부에 관계없이 모든 것을 가져오고, 번들 크기를 늘리고, 전역적으로 폴리필을 주입하면 개체 충돌이 발생할 수 있습니다.
이로 인해 패키지가 더 이상 사용되지 않으며 Babel은
에서 직접 core-js 라이브러리를 사용할 것을 권장합니다. 1단계: 바벨 구성 수정

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

2단계: 프로젝트에 사용할 폴리필을 수동으로 가져오기

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

그래서 메모리를 절약하고 불필요한 코드를 줄입니다.

이제 이것으로 그 자체로는 그다지 걱정스럽지 않지만 종속성의 변화를 최신 상태로 유지하고 고객에게 더 나은 경험을 제공하는 프로젝트와 관련하여 확실히 중요한 부분의 끝입니다.

하지만. 이것이 다가 아닙니다.

최근에 발생하여 인터넷 전체를 뒤흔들고 코드베이스를 뒤흔들었던 대규모 공격에 대해 논의하려고 합니다.
그리고 여기에는 우리가 여기서 논의한 내용도 포함됩니다. 그럼 2부도 기대해주세요!

위 내용은 Polyfills - 필러 또는 틈이 있는 구멍? (파트-1)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!