[VUE JS] source map 파일을 통한 Frontend 소스 코드 획득

일반적으로 vue.js 애플리케이션을 빌드하면, 코드가 압축되어 사용자에게 제공됩니다.

 

이때 원래 코드의 흐름과 파일 구조가 왜곡될 수 있어, 브라우저에서 발생한 오류를 추적하기가 어려울 수 있습니다.

 

이러한 상황에서 디버깅을 쉽게 하기 위해 source map 파일을 제공하고 있는데, 해당 파일을 이용하여 압축된 코드를 원래의 코드로 디코딩할 수 있습니다.

 

그런데 만약, 실제 운영 환경에서 source map 파일이 존재할 경우 Frontend의 소스 코드를 획득할 수 있는 등의 취약점이 발생할 수 있습니다.

 

Source Map 파일 찾기

• 개발자 도구 > "SourceMappingURL" 검색 > app.*.js 파일 찾기
• app.*.js 경로에 .map을 붙여서 접속 시도 (app.*.js.map)

 

Source Map 파일 압축 해제

$ npm install source-map-unpacker
$ node ./node_modules/source-map-unpacker/unmap.js -p test.json -o result/
$ ls -lR *

 

대응 방안

$ vi vue.config.js

module.exports = {
  productionSourceMap: false
};