Softonic

JavaScript 난독화 도구

단계 1 / 2
모드
다음

난독화는 JavaScript 소스를 읽는 데 드는 비용을 높입니다. 완벽하게 막지는 못하지만(프론트엔드 난독화에 완전무결한 방법은 없습니다) 가벼운 들여다보기를 단념시키고 자동 스크래핑을 늦추기에는 충분합니다. 이 도구는 문자열 배열 인코딩, 식별자 맹글링, 제어 흐름 평탄화, 그리고 선택적 데드 코드 주입을 적용하며, 얼마나 공격적으로 처리할지에 따라 각 옵션을 선택할 수 있습니다.

JavaScript를 난독화하는 방법

  1. 1

    소스 붙여넣기

    유효한 JavaScript라면 무엇이든 됩니다. 호스트 페이지의 특정 전역 속성 이름에 의존한다면, 그 이름들을 예약어로 설정하세요.

  2. 2

    기법 선택

    문자열 인코딩(hex / base64), 식별자 맹글링, 제어 흐름 평탄화, 데드 코드 주입, 자기 방어 래퍼.

  3. 3

    대상 프로필 선택

    브라우저(ES5 안전, Node API 없음), Node.js(`require`, `Buffer` 허용), 또는 낮음(주로 압축만).

  4. 4

    난독화하기

    이 도구는 변환된 코드를 크기 증감과 함께 출력합니다. 공격적인 설정에서는 출력이 소스보다 3~5배 커질 수 있습니다.

각 기법과 그 대가

기법 공격자의 수고를 높이는 정도 실행 시간 비용 크기 비용
변수 이름 변경 낮음 거의 없음 더 작아짐(압축의 부수 효과)
문자열 배열 인코딩 중간 미미함(문자열당 조회 1회) +10~30%
제어 흐름 평탄화 높음 측정 가능(약 2~5%) +50~150%
데드 코드 주입 낮음(보여주기식 보안) 작음 +20~50%
자기 방어 래퍼 중간 일회성 검사 +5~10%
디버그 방지 중간(DevTools 감지) 일회성 검사 +5%
VM / 가상화(프리미엄) 매우 높음 큼(5~20배) +300~500%

난독화가 보호하지 못하는 것

  • 비밀 정보. 프론트엔드 소스에 담긴 상수는 시간만 충분하면 누구나 읽어낼 수 있습니다. API 키, 인증 시크릿, 가격 산정 로직 등은 절대 난독화로 숨기려 하지 마세요. 서버 측으로 옮기세요.
  • 관찰 가능한 출력을 가진 알고리즘. 브라우저에서 실행할 수 있다면, 디버거를 가진 공격자는 모든 입력과 출력을 관찰할 수 있습니다. 난독화는 이를 늦출 뿐, 막지는 못합니다.
  • 대규모 자동 스크래핑. 스크래핑 방지는 소스 난독화가 아니라 행위 탐지(핑거프린팅, 속도 제한, CAPTCHA)에 의존합니다.

난독화가 가치 있는 경우

  • 변조 방지: 내장 SDK(라이선싱, 광고 SDK, 게임 클라이언트)의 변조를 막을 때.
  • 비용 높이기: 경쟁 구현을 손쉽게 복사·붙여넣기 하는 수고를 늘릴 때.
  • 자동 스크립트 분류를 어렵게 만들기: 광범위 스크래퍼에 대해.

역효과가 나는 경우

  • 이미 번들러가 있다. 프로덕션 모드의 Webpack + Terser는 이미 지역 변수를 압축하고 맹글링합니다. 두 번째 난독화 단계를 더해도 얻는 것은 적고 번들 크기만 커집니다.
  • First Paint / 코어 웹 바이탈을 최적화하고 있다. 공격적인 난독화는 번들을 3배로 부풀려 FCP와 LCP를 해칩니다.
  • 프로덕션에서 디버깅해야 한다. 무거운 난독화는 대응하는 소스 맵이 없으면 Sentry 스택 트레이스를 거의 쓸모없게 만듭니다. 그렇다고 소스 맵을 함께 배포하면 난독화가 무의미해집니다.

흔한 실수

  • 난독화를 암호화와 같은 것으로 취급하기. 둘은 다르며, 난독화는 속도를 늦추는 장애물일 뿐입니다.
  • 소스 맵을 난독화된 번들과 함께 프로덕션으로 배포하기. 이러면 난독화가 완전히 무력화됩니다.
  • CDN에서 이미 불러온 서드파티 라이브러리를 난독화하기. 아무 이득 없이 크기 손해만 봅니다.

자주 묻는 질문

아니요. 난독화는 자물쇠가 아니라 속도를 늦추는 장애물입니다. 디버거를 가진 작정한 분석가라면 로직을 복원해냅니다. 가벼운 들여다보기와 대부분의 자동 스크래퍼를 단념시킬 만큼 비용을 높이긴 하지만, 보안 그 자체는 아닙니다.

속성에 동적으로 접근하거나(obj["field_name"], Object.keys(obj)) 호스트 페이지를 위해 특정 함수·클래스 이름에 의존한다면, 그 이름들을 예약 목록에 추가하세요. 그렇지 않으면 속성 이름 변경이 외부 연동을 깨뜨릴 수 있습니다.

원본 소스를 반드시 보관하세요. 난독화 도구는 단방향 변환이므로, 난독화된 출력에서 원본을 정확히 복원할 수는 없고 읽을 수 있는 근사치만 얻을 수 있습니다.

가벼운 난독화는 약 10~30%를 더합니다. 제어 흐름 평탄화에 문자열 배열까지 더하면 50~150%가 늘어납니다. 가장 무거운 설정에서는 크기가 3배가 될 수 있습니다. 배포 전에 출력 크기 카운터를 확인하세요.

관련 도구

ASCII 표 참조

NUL, LF, DEL 같은 제어 문자를 포함해 모든 문자에 대한 10진수, 16진수, 8진수, 2진수, HTML 숫자 문자 참조를 담은 0부터 127까지의 전체 ASCII 표.

HTML 문자 참조

HTML 엔티티의 검색 가능한 목록, 각 엔티티의 이름 및 숫자 코드, 그리고 특수 문자 및 기호에 대한 1클릭 복사 기능을 제공합니다.

키보드 단축키 참고표

macOS, Windows, Linux에서 VS Code, Chrome, GNU Readline을 쓰는 Bash의 문서화된 기본 단축키를 검색합니다.

보색 찾기

어떤 입력에 대해서도 보색을 찾습니다. HSL 반대 색, 분할 보색 쌍, 그리고 접근성 있는 조합 제안을 반환합니다.

색상 틴트 생성기

기준 색의 밝은 틴트를 생성합니다. 디자인 시스템 토큰, 배경, 호버 상태를 위한 3-20단계 스케일.

이메일 검증기

이메일 주소를 검증합니다. RFC 5322 구문 검사, 실시간 MX 레코드 조회, 그리고 로컬 파트, 도메인, 길이 정보를 제공합니다. 이메일은 전송되지 않습니다.

이 도구는 다른 언어로도 제공됩니다