spring boot) js 파일 난독화 방법

* 암호화 라이브러리 다운

(기존에 node.js가 설치되어있어야 한다. node.js 설치 방법 : https://chuyj15.tistory.com/41)

cmd창 관리자 권한으로 실행, 아래명령어 실행

npm install -g javascript-obfuscator

( npm install -g 명령어는 전역(Global) 설치를 의미)

✅ 전역 설치 위치

전역 설치는 기본적으로 다음 경로에 설치됩니다:

🔹 Windows 기준

• 패키지 위치:
  
  C:\Users\<사용자이름>\AppData\Roaming\npm\node_modules

• 실행 파일 위치 (명령어로 등록됨):이 폴더가 PATH 환경 변수에 등록되어 있어서 javascript-obfuscator 같은 명령어를 아무 데서나 실행할 수 있는 겁니다.
   
  C:\Users\<사용자이름>\AppData\Roaming\npm

 

* 난독화 후, 난독화된 파일 js-dist 폴더로 이동

해당 프로젝트를 연 IDE의 터미널에서 아래 명령어 실행

(보통 실행 위치는 build.gradle이나 pom.xml 파일이 있는 폴더)

cmd /c "javascript-obfuscator ./src/main/resources/static/js --output ./src/main/resources/static/js-dist --compact true --control-flow-flattening true --string-array true --string-array-encoding base64 --identifier-names-generator mangled --transform-object-keys true"

그러면 이렇게 js-dict 폴더 아래에 암호화된 js파일들이 생성된다.

* Controller  파일 수정

 난독화된 js파일이 모여있는 곳인 /js-dict 위치를 model에 넣어줌

@GetMapping("/device-control")
    public String deviceControl(Model model) {
        String jsPrefix = "/js-dist";
        model.addAttribute("jsPrefix", jsPrefix);
        return "pages/device/device-control";
    }

 

* html 파일 수정

<script type="module" th:src="@{${jsPrefix + '/pages/device/device-control.js'}}"></script>

 

 

---

✅ 2. 난독화 옵션 설명

---

📌 --control-flow-flattening false

• 원래 목적: 코드 흐름을 복잡하게 만들어 사람이 읽기 어렵게 만듭니다.
• 예: if, switch, while 등을 이상한 방식으로 바꿉니다.
• 단점: CSP 위반 가능 (간접 실행이나 eval 비슷한 코드 생성될 수 있음)

🔹 사용 시:

--control-flow-flattening true

👉 CSP 위반 가능성 증가, 성능 저하 가능

 

🔹 사용 안 함:

--control-flow-flattening false

👉 코드 덜 복잡하지만 CSP 위반 걱정 줄어듦

---

📌 --string-array false

• 원래 목적: 코드에 사용된 문자열을 배열로 모아서 숨깁니다.
• 예:↓ 난독화 후:
• js
  var _0x1234 = ["hello"]; console.log(_0x1234[0]);
• js
  console.log("hello");
• 단점: CSP 위반 가능성 높아짐 (문자열로 함수명을 조립하거나 eval로 실행할 수 있음)

🔹 사용 시:

--string-array true

👉 난독화 강력하지만 CSP와 충돌할 수 있음

 

🔹 사용 안 함:

--string-array false

👉 난독화는 약해지지만 안정성 높아짐