Security risks of source map (webpack)

해당 게시글은 아래의 페이지를 번역하여 정리 및 참고하였습니다.

Source Map 101: What Developers Should Know About This Security Risk

Source Map 101: What Developers Should Know About This Security Risk

 

 

Source map

source map은 파일의 원본 소스코드(예: JavaScript 파일)를 컴파일되고 축소화된 코드에 매핑시켜주는 파일입니다. source map 파일은 파일들의 이름, line number, 원본 소스코드로부터 컴파일 된 코드의 map을 가지고 있습니다.

source map은 원본 소스 코드를 표시하여 개발자가 빌드된 프로그램에서 troubleshooting을 할 수 있도록 도움을 줍니다. 개발자가 컴파일된 코드를 디버깅할 때 source map을 사용하여 원본 소스코드를 볼 수 있으므로 오류를 더 쉽게 식별하고 해결할 수 있습니다. 

 

 

Source map and security implications (보안 영향)

source map은 디버깅에 도움이 되지만 보안 문제를 발생시킬 수 있습니다. 프로그램이나 웹 사이트의 원본 소스 코드가 노출될 수 있으며 이로 인해 비밀번호나 개인 정보 등이 노출될 수 있습니다. (웹 애플리케이션 뿐만 아니라 소프트웨어 등에 source map이 가져올 수 있는 보안적인 영향도에 대해 기술한 것입니다.)

 

1. 비밀번호나 다른 인증 정보가 소스 코드에 포함되어 있을 경우 source map을 통해 노출될 수 있습니다.

2. source map을 통해 구조나 구성을 확인할 수 있어 취약점을 찾는 공격자에게 도움이 될 수 있습니다.

3. 잘 못 구성된 source map은 공격자에게 원본 소스 코드를  노출시킬 수 있습니다.

4. 공격자가 source map을 획득하면 이를 사용하여 원본 프로그램을 재구성할 수 있습니다.

5. source map을 이용하여 공격자는 합법적인 파일에 악성 코드를 삽입하여 피해자의 컴퓨터에 실행 권한을 부여할 수 있습니다.

 

 

Source map in webpack

source map을 이용하는 경우 누구나 개발자 도구를 이용하여 소스 코드를 확인할 수 있으며 이는 잠재적으로 다양한 보안 문제를 야기시킬 수있습니다. 그러므로, 코드를 빌드하고 컴파일하는 동안 Source map을 생성하지 않도록 하여 상용 서비스에서 Source map을 확인할 수 없도록 해야 합니다.

 

Webpack에서는 devtool이라는 이름으로 source map을 설정할 수 있습니다.

// webpack.config.js
module.exports = {
  devtool: false
}

 

---

진단 예시 CASE

"Source map이 제공되지 않는 경우"

번들링 파일 하단에 Source map 파일이 확인되지 않음

 

 

"Source map이 제공되는 경우"

번들링 파일 하단에 SourceMap 파일이 확인되며 브라우저에서 원본 소스코드를 알아내어 출력해주기 때문에 소스코드 분석이 가능