웹 페이지에서 나타나는 스크립트 난독화하기 - 자바스크립트

자바스크립트 난독화하기

자바스크립트와 HTML은 파이썬이나 C/C++과 같이 서버에서 실행되는 게 아니라 사용자의 웹브라우저에서 해석되는 언어이다 보니 사용자가 언제든지 소스코드를 들여다볼 수 있습니다. HTML은 어쩔 수 없이 그대로 노출되더라도 자바스크립트 코드만이라도 그대로 노출되는 것을 막고 싶을 때 사용되는 난독화 툴(사이트)을 소개코자 합니다.

---

로컬에서 자바 스크립트를 실행 후 크롬 브라우저에서 F12 (개발자 도구) – source로 확인되는 소스코드입니다. 이같이 source가 무분별하게 수집되지 않도록 하기 위해 보호가 필요한 스크립트를 난독화합니다.

난독화 전 배포된 웹페이지를 개발자 도구로 확인했을 때 나타나는 source code

우선 난독화 전 스크립트입니다.

난독화 전 스크립트

난독화 후 스크립트입니다.

난독화 후 스크립트

 

난독화 전후 스크립트의 실행 결과는 같지만 후자의 경우 그냥 봐서는 전혀 해석할 수 없는 스크립트로 난독화되었습니다. 스크립트 암호화가 아닌 난독화이기 때문에 작정한다면 풀릴 수도 있을 것 같은데 그래도 그냥 배포하는 것보다 나을 것 같아 난독화 시켰네요. (참고로 jQuery나 Bootstrap source script 모두 각자의 방식으로 내용을 살펴보기 까다롭게 난독화되어 있습니다.)

스크립트를 난독화할 수 있는 사이트가 많이 있지만 사용하기에도 무난하고 결과도 나쁘지 않았던 사이트를 아래와 같이 링크합니다.

 

/packer/

JavaScript Obfuscator Tool

 

obfuscator.io의 경우 난독화 수준을 사용자가 직접 조정할 수 있고 다양한 옵션을 추가할 수 있습니다. (난독화 수준을 high로 했을 때 스크립트 볼륨이 크면 난독화에 실패할 수도 있으니 적절한 난이도 선택과 옵션 조정이 필요합니다.)

난독화 후 배포된 웹 페이지

 

난독화 후 크롬 개발자 도구를 열어 source를 확인해도 코드를 알아보기 까다롭게 변경 후 배포하였습니다.

---

오늘은 보호가 필요한 자바스크립트의 난독화에 대해 살펴봤습니다.