WebTools

Useful Tools & Utilities to make life easier.

JS Obfuscator

자바스크립트 코드를 꼬아서 소스를 보호합니다.

자바스크립트 난독화란?

자바스크립트(JS) 코드의 동작은 그대로 두면서, 사람이 읽고 이해하기 어렵게 표기를 뒤바꿔 놓는 작업을 난독화(obfuscation)라고 합니다. 변수와 함수 이름을 의미 없는 기호로 바꾸고, 문자열을 잘게 쪼개 배열에 숨기며, 숫자를 계산식으로 풀어 쓰고, 코드의 흐름 순서까지 복잡하게 재구성합니다. 그 결과 코드를 열어 봐도 무슨 일을 하는지 한눈에 파악하기가 매우 어려워집니다.

주로 브라우저로 그대로 전달되는 클라이언트 코드를 남이 쉽게 베끼거나 손대지 못하도록 진입 장벽을 높이는 용도로 씁니다. 다만 분명히 짚어 둘 점이 있습니다. 난독화는 암호화가 아닙니다. 코드는 여전히 브라우저에서 실행되어야 하므로, 시간과 도구를 들이면 원래 논리를 되짚어 낼 수 있습니다. 비밀번호나 API 키 같은 민감한 값을 감추는 보안 수단으로는 쓰면 안 됩니다. 그런 값은 서버 쪽에 두어야 합니다.

사용 방법

  1. 편집기 영역에 난독화할 자바스크립트 코드를 붙여넣습니다.
  2. 아래의 난독화 버튼을 누르면 같은 편집기 안에서 코드가 변환된 결과로 바뀝니다.
  3. 편집기 오른쪽 위의 복사 버튼으로 결과를 클립보드에 담아 사용합니다.

결과가 입력했던 편집기에 그대로 덮어써지고 되돌릴 수 없으므로, 읽고 수정할 수 있는 원본 파일은 반드시 따로 보관하세요. 난독화된 코드는 배포용으로만 쓰고, 개발과 수정은 항상 원본에서 하는 것이 원칙입니다.

난독화 전후 비교 예시

간단한 함수를 난독화하면 대략 다음과 같은 형태로 바뀝니다.

구분코드
난독화 전 function greet(name) {
    alert("안녕하세요 " + name);
}
난독화 후(개념) var _0x3a=['\x95\x88...'];function _0x1f(_0x2c){var _0x4d=_0x3a[0x0];...}

난독화 후에는 함수 이름이 _0x1f 같은 기호로 바뀌고, 문자열은 배열에 조각으로 흩어지며, 흐름 제어가 뒤섞입니다. 참고로 이 도구는 코드를 짧게 만드는 것이 목적이 아니어서, 오히려 원본보다 길이가 늘어나는 경우가 많습니다. 파일 크기를 줄이는 것이 목적이라면 자바스크립트 압축 도구가 맞는 선택입니다.

자주 묻는 질문

난독화하면 코드가 완전히 안전해지나요?

아닙니다. 난독화는 코드를 읽기 어렵게 만들 뿐, 실행은 여전히 브라우저에서 이루어집니다. 따라서 충분한 시간과 분석 도구가 있으면 원래 논리를 되짚어 낼 수 있습니다. 베끼기의 문턱을 높이는 수단으로 이해하시고, 절대 노출되면 안 되는 값은 코드에 담지 마세요.

난독화된 코드를 원래대로 되돌릴 수 있나요?

원본을 자동으로 완벽하게 복원하는 방법은 없습니다. 포맷터로 줄바꿈을 펴서 조금 더 읽기 좋게 만들 수는 있지만, 바뀐 이름과 흩어진 문자열, 재구성된 흐름은 그대로 남습니다. 그래서 읽고 수정할 원본 파일을 반드시 따로 보관해야 합니다.

난독화하면 코드가 더 느려지나요?

흐름 제어를 뒤섞고 문자열을 배열에서 꺼내 쓰는 처리가 더해지므로, 원본보다 실행이 조금 느려지고 파일도 커질 수 있습니다. 성능이 민감한 코드라면 난독화 전후의 동작을 실제로 비교해 보고 적용 여부를 정하시는 것이 좋습니다.

붙여넣은 코드가 서버로 전송되나요?

아닙니다. 변환 작업은 접속하신 분의 브라우저 안에서 자바스크립트로 처리되며, 입력한 코드가 저희 서버로 올라가지 않습니다. 공개하기 전 단계의 코드도 안심하고 사용하실 수 있습니다.