JavaScript 코드 온라인 난독화 (샘플 코드)

JavaScript 코드를 읽기 어렵게 하는 난독화, 샘플 코드와 자바스크립트 Obfuscator(옵퓨스케이터) 도구를 사용해서 직접 테스트해 보겠습니다.

난독화를 하는 이유는?

• 소스 코드를 해독하기 어렵게 한다.
• 다른 사람이 브라우저의 개발자 도구에서 코드를 간단히 변경 후, 실행하는 것을 막을 수 있다.
• 다른 사람이 코드를 복사해서 간단히 재사용하는 것을 막을 수 있다.
  • 어떤 조건을 만족하는 경우에만 실행하도록 하는 코드를 넣어 두면 가능하다고 생각합니다.
  • 코드 재사용 방지는 클라이언트 사이드 프로젝트에서는 중요할 수도 있습니다.
• 실행에 필요 없는 주석 및 공백이 자동으로 제거되므로 페이지 로딩 속도가 올라간다.

 

목차

• 1단계. 테스트할 JavaScript 샘플 코드를 준비
• 2단계. JavaScript Obfuscator Tool에 접속
• 3단계. '난독화'하기
• 확인 사항
• 주의 사항

1단계. 테스트할 JavaScript 샘플 코드를 준비

'구구단 표'를 만드는 JavaScript 코드를 난독화해 보겠습니다.

[JavaScript 코드 난독화 전(前)]

'구구단 표' 자체는 의미가 없습니다. 나중에 'JavaScript 코드 난독화 후(後)'와 비교해 보기 위한 샘플 코드입니다. 여러분은 여러분의 JavaScript 코드를 준비하시면 됩니다.

2단계. JavaScript Obfuscator Tool에 접속

브라우저에서 https://obfuscator.io로 접속합니다. JavaScript 난독화 도구 중에서 가장 널리 사용되고 있는 걸로 알고 있습니다. Obfuscator의 사전적 의미는 '혼란시키는 것'입니다.

JavaScript Obfuscator Tool은 하나의 페이지로 심플하게 되어 있습니다. 그리고 페이지의 구성은 아래와 같습니다. 참고하면 좀더 빠르게 페이지를 파악할 수 있습니다.

이 도구의 개요를 서술한 영역

난독화 실행 영역

난독화 옵션 영역

옵션에 대한 설명 영역

자주 묻는 질문(FAQ) 영역

3단계. '난독화'하기

난독화할 코드를 복사해서 아래와 같이 붙여넣고, 저의 경우에는 디폴트(기본) 옵션으로 'Obfuscate' 버튼을 클릭하였습니다.

난독화된 코드(1행)를 확인하고 복사하거나 다운로드해서 사용하면 됩니다.

[JavaScript 코드 난독화 후(後)]

확인 사항

난독화된 코드를 확인하고 난해한 정도를 간단하게 변경하려면 'Options Preset(옵션 사전 설정)'을 선택합니다.

• default(기본)
• low(낮은 난독화)
• medium(중간 난독화)
• high(높은 난독화)

그리고 '난독화된 코드의 실행 결과·아웃풋은 난독화하기 전과 같다'라고 합니다만 실제로 그러한지 직접 확인하는 작업은 필수입니다. 저의 경우에는 크롬·엣지·파이어폭스·오페라·사파리 등 어떤 브라우저에서도 문제없이 난독화하기 전과 동일한 결과였습니다.

주의 사항

난독화된 코드를 원래대로 100% 완벽히 복원하는 것은 거의 불가능 또는 상당히 어렵기 때문에 원본 코드를 꼭 보관해 두어야 합니다. 그리고 실력 있는 프로그래머가 시간을 많이 들이면 내부 로직을 파악할 수도 있다는 점을 염두에 두어야 합니다. 그래서 완벽하게 자신이 작업한 소스 코드를 보호하기 위해서는 애초에 해당 소스 코드를 클라이언트가 아닌 서버에 두는 것이 정석이라고 생각합니다.