웹 앱 배포 시 클라이언트 쪽 JS 코드를 난독화하면 소스의 가독성을 낮춰 리버스 엔지니어링을 어렵게 만들 수 있다.
이 글에서는 javascript-obfuscator를 사용해 JS를 난독화하는 방법, 설정 예제, 빌드 통합, 주의사항까지 정리한다.
1) 준비: 설치
프로젝트 루트에서 npm (또는 yarn)으로 설치
# npm
npm install --save-dev javascript-obfuscator
# yarn
yarn add --dev javascript-obfuscator2) 간단 사용 예 (CLI)
단일 파일 난독화:
npx javascript-obfuscator src/app.js --output dist/app.obf.js폴더 전체 난독화:
npx javascript-obfuscator src --output dist --compact true3) 주요 옵션 (자주 쓰이는 것들)
| 옵션 | 설명 | 비고 |
|---|---|---|
--compact true/false |
출력 결과에서 공백 및 줄바꿈을 제거하여 코드 길이를 줄임 | 기본값: true |
--control-flow-flattening |
제어 흐름을 평탄화하여 코드 분석을 어렵게 만듦 | 난독화 강도 ↑ / 성능 저하 가능 |
--dead-code-injection |
실행되지 않는 코드를 삽입하여 분석을 방해 | 번들 크기 증가 가능 |
--debug-protection |
브라우저 개발자 도구 디버깅을 방지하는 코드 삽입 | 디버깅 불편 주의 |
--string-array |
문자열 리터럴을 배열로 분리하여 참조하도록 변환 | 권장 옵션 |
--string-array-encoding |
문자열 배열을 인코딩하여 저장 (base64, rc4) |
난독화 강도 ↑ |
--disable-console-output |
console.log 등 콘솔 출력 함수 비활성화 |
운영 환경에서 유용 |
--rotate-string-array |
문자열 배열의 인덱스를 지속적으로 변경 | 분석 난이도 증가 |
--source-map |
난독화된 코드에 대한 소스맵 생성 | 운영 배포 시 노출 주의 |
--threshold <0~1> |
문자열 배열 변환 적용 비율 설정 | 0~1 사이 값 |
예: 제어 흐름 + 문자열 배열 + 소스맵
npx javascript-obfuscator src/app.js --output dist/app.obf.js \
--control-flow-flattening true \
--dead-code-injection true \
--string-array true \
--string-array-encoding base64 \
--source-map true4) package.json에 스크립트 등록
{
"scripts": {
"build:obf": "javascript-obfuscator dist/bundle.js --output dist/bundle.obf.js --compact true --control-flow-flattening true --source-map true"
}
}빌드 파이프라인에서 npm run build 후 npm run build:obf로 난독화 처리하면 편리하다.
5) 소스맵 & 디버깅
•난독화하면 디버깅이 거의 불가능하므로 별도 소스파일 생성을 권장(단, 배포 시 소스파일을 공개하지 않도록 주의)
6) 주의사항
1. 보안 대책이 아님
난독화는 코드 이해를 어렵게 할 뿐, 핵심 비밀(비밀번호, API 키 등)을 숨기는 수단이 아니다. 민감 정보는 절대 클라이언트에 두지 말 것.
2. 성능 영향
control-flow-flattening 등 옵션은 런타임 성능을 저하시킬 수 있으니 프로파일링 필요.
3. 호환성
일부 난독화 옵션은 특정 브라우저/환경에서 문제를 일으킬 수 있으니 주요 브라우저에서 테스트 필수.