WordPress, Google Maps 및 웹사이트 배포와 관련된 Polyfill.io 문제
2020년 11월, Google은 Polyfill.io라는 제3자 라이브러리를 사용하는 웹사이트에 영향을 미치는 보안 문제를 발견했습니다. Polyfill.io는 웹 브라우저에서 구현되지 않은 최신 JavaScript 기능을 지원하는 데 사용되는 라이브러리입니다. Google Maps 플랫폼을 사용하는 많은 웹사이트는 Polyfill.io를 사용하여 지도 기능을 구현했습니다.
이 보안 문제는 악의적인 사용자가 웹사이트 방문자를 다른 웹사이트로 재지정하거나 기타 악의적인 행동을 일으킬 수 있도록 허용했습니다.
영향
이 문제는 Polyfill.io를 사용하는 모든 웹사이트에 영향을 미쳤습니다. 특히 Google Maps 플랫폼을 사용하는 웹사이트에 영향을 미쳤습니다.
해결 방법
이 문제를 해결하려면 웹사이트 소유자는 다음 단계를 수행해야 했습니다.
- 웹사이트 코드를 검토하여 Polyfill.io 스크립트가 로드되었는지 확인합니다.
- 로드된 경우 Polyfill.io 스크립트를 제거합니다.
- 필요한 경우 다른 Polyfill 라이브러리로 Polyfill.io를 대체합니다.
예방 조치
이 문제를 방지하려면 웹사이트 소유자는 다음과 같은 예방 조치를 취해야 합니다.
- 최신 버전의 웹 브라우저와 웹 개발 도구를 사용합니다.
- 웹사이트 코드를 정기적으로 검토하여 취약점이 없는지 확인합니다.
- 신뢰할 수 있는 출처에서만 제3자 라이브러리를 다운로드합니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<title>Google 지도 예제</title>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 37.7749, lng: -122.4194},
zoom: 12
});
var marker = new google.maps.Marker({
position: {lat: 37.7749, lng: -122.4194},
map: map,
title: 'Googleplex'
});
}
</script>
</body>
</html>
이 코드는 다음을 수행합니다.
https://cdn.polyfill.io/v2/polyfill.min.js에서 Polyfill.io 스크립트를 로드합니다. 이 스크립트는 웹 브라우저에서 구현되지 않은 최신 JavaScript 기능을 지원합니다.https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap에서 Google 지도 API 스크립트를 로드합니다. 이 스크립트는 Google 지도를 웹사이트에 추가하는 데 필요한 기능을 제공합니다.initMap함수는 Google 지도 인스턴스를 생성하고 마커를 추가합니다.
이 코드를 사용하려면 다음 단계를 수행해야 합니다.
YOUR_API_KEY를 Google 지도 API 키로 바꿉니다.- 코드를 HTML 파일에 저장하고 웹 브라우저에서 엽니다.
Google 지도가 웹사이트에 표시되어야 합니다.
참고
- 이 예제는 기본적인 Google 지도 기능만 보여줍니다. Google 지도 API를 사용하여 더 많은 기능을 수행할 수 있습니다.
- Google 지도 API를 사용하려면 Google Cloud Platform 콘솔에서 API 키를 만들어야 합니다.
추가 리소스
Polyfill.io 사용하지 않기
위의 보안 문제로 인해 Polyfill.io를 사용하지 않는 것이 좋습니다. 대신 다음과 같은 다른 방법을 사용하여 웹사이트에서 최신 JavaScript 기능을 지원할 수 있습니다.
- Babel 또는 Webpack과 같은 도구를 사용하여 코드를 트랜스파일합니다. 이러한 도구는 최신 JavaScript 기능을 구형 브라우저에서 이해할 수 있는 형식으로 변환합니다.
- caniuse.com과 같은 웹사이트를 사용하여 브라우저 지원을 확인합니다. 이러한 웹사이트는 특정 JavaScript 기능이 어떤 브라우저에서 지원되는지 확인하는 데 도움이 됩니다.
- 필요한 경우 기능 감지 코드를 사용합니다. 기능 감지 코드는 브라우저가 특정 기능을 지원하는지 여부를 확인하고 그렇지 않은 경우 대체 코드를 실행합니다.
Polyfill.io 대체 방법
Babel 또는 Webpack과 같은 도구를 사용하여 코드를 트랜스파일합니다.
Babel과 Webpack은 최신 JavaScript 기능을 구형 브라우저에서 이해할 수 있는 형식으로 변환하는 트랜스파일러입니다. 이러한 도구를 사용하면 Polyfill.io 없이도 최신 웹 기능을 사용할 수 있습니다.
Babel 사용 방법:
- Babel을 설치합니다:
npm install --save-dev babel @babel/core @babel/preset-env
.babelrc파일을 만들고 다음 내용을 추가합니다:
{
"presets": ["@babel/preset-env"]
}
- 웹팩 설정 파일에 다음과 같은 로더를 추가합니다:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
}
]
}
};
Webpack 사용 방법:
- Webpack을 설치합니다:
npm install --save-dev webpack webpack-cli
webpack.config.js파일을 만들고 다음 내용을 추가합니다:
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};
- 다음 명령을 사용하여 Webpack을 실행합니다:
npx webpack
caniuse.com과 같은 웹사이트를 사용하여 브라우저 지원을 확인합니다.
caniuse.com은 특정 JavaScript 기능이 어떤 브라우저에서 지원되는지 확인하는 데 도움이 되는 웹사이트입니다. 이 정보를 사용하여 Polyfill.io가 필요한지 여부를 결정할 수 있습니다.
예를 들어 caniuse.com에서 Promise 기능을 검색하면 대부분의 최신 브라우저에서 지원된다는 것을 알 수 있습니다. 따라서 이러한 브라우저를 타겟팅하는 웹사이트의 경우 Polyfill.io가 필요하지 않을 수 있습니다.
필요한 경우 기능 감지 코드를 사용합니다.
기능 감지 코드는 브라우저가 특정 기능을 지원하는지 여부를 확인하고 그렇지 않은 경우 대체 코드를 실행합니다. 이것은 Polyfill.io 없이도 최신 기능에 대한 지원을 제공하는 한 가지 방법입니다.
예를 다음 코드는 Promise 기능을 지원하는지 여부를 확인하고 그렇지 않은 경우 Promise polyfill을 로드합니다.
if (!window.Promise) {
script.src = 'https://cdn.jsdelivr.net/npm/promise-polyfill/dist/polyfill.min.js';
script.onload = function() {
// 코드 실행
};
document.head.appendChild(script);
} else {
// 코드 실행
}
Fastly 또는 Cloudflare의 Polyfill.io 미러 사용
Fastly와 Cloudflare는 Polyfill.io의 미러를 제공하며 이는 보안 문제가 해결된 후 업데이트되었습니다. 이러한 미러를 사용하면 Polyfill.io의 기능에 여전히 액세스할 수 있지만 보안 취약점에 대한 위험은 감소합니다.
Fastly 미러를 사용하려면 다음 스크립트 태그를 웹사이트 헤더에 추가합니다.
<script src="https://polyfill-fastly.net/polyfill.min.js"></script>
wordpress google-maps website-deployment
