난독화 출처: http://12bme.tistory.com/357

자바스크립트 소스의 난독화

Web. Programming/Javascript 2011.09.11 09:35

자바스트립트의 단점부터 알아봅시다. 
자바스크립트에서 가장 눈에 띄는 단점이 뭐라고 생각하십니까? 

인터프리터 언어? 
어디서 굴러떨어진 객체지향? 
... 

가장 두드러지는 단점은 아무래도 "소스가 공개되어 있다"는 것이죠. 
원하지 않는 정보를 클라이언트상에서 가공하려고 해도 소스 분석 하면은 
어떤 데이터를 가공하는지 뽀록나는데.. 막상 하자니.. 
그러니 서버 언어로 눈을 돌리게 되는거죠. 
또한, 자신이 고생해서 만든 자바스크립트를 어떤 이가 훔쳐서 자기 것인양 사용하는 행위. 
이거 참 골치가 이만저만이 아닙니다. 
그렇다고 저작권을 명시하자니, 누가 배껴서 패킹질하고 지꺼라구 우기면 이거 답도 안나오고.. 
AJAX에서 가장 두드러진 점은 바로 보안이라는 것이죠. 
왜냐하면은 클라이언트에서 정보를 주고받는데. 허점이 드러나 서버 언어를 간파하면 어떡하나 이런 고민들 에젝스 만지는 분들이라면 한번씩 고민해봤을 문제입니다. 
거기다가 사용자 아디와 비번을 요구하는 경우에도 이거 그대로 드러나니 이거 참.. 

이런 고민을 해결하기 위해 dean edwards가 만든 Javascript Packer가 있습니다. 

http://dean.edwards.name/packer/ 

네.. 물론 자바스크립트 압축을 하지만 base62를 통해 당최 뭔소린지 난해한 코드로 패키지화를 시키는 것이죠. 다들 한번씩을 써봤을 겁니다. 
이렇게 해서 자신이 만든 스크립트를 좀 알아보기 어렵게 해서 자신의 지적 재산을 지키는 거. 별로 어렵지 않게 되기는 개뿔 어느새 언팩하는 툴도 나왔습니다. 

http://jsbeautifier.org/ 

이녀석은 개행문자와 쓸데없는 스페이스 등등을 제거해서 최적화했지만 보기 난해한 자바스크립트를 보기 쉽게 바꿔주는 역할을 합니다. 
하지만 여기서 이녀석은 unpack 기능까지 추가해서 패킹한 자바스크립트가 보안에 좋다고 생각한 로망을 깨버리고 말았습니다. 원망스럽죠? 
ㅋㅋ 나온지 좀 된녀석이라 이미 원망은 개뿔이라고 말하는 분도 있겠죠. 

아무래도 자바스크립트를 난독화해서 자신의 재산을 지키고 싶은 갈망은 있겠죠. 

그래서 자바스크립트를 난독화해서 알아보기 조낸 어렵게 만드는 툴이 생겼죠. 
http://javascript-source.com/ 
http://www.jasob.com/ 

근데 니네들 상용툴이야 아오................................................... 
네.. 금전적으로도 이거 참 다가가기 힘든 난독화 툴. 
근데 효과는 있다고 하는군요. 저걸 이용한 자바스크립트 도구 중에 이게 있으니까요. 

http://www.amplesdk.com/ 

소스를 들여다보면 패킹질한것처럼 보이지만 한번 풀어보세요 풀리는지.ㅋ 

어쨌든, 이렇게 지적 재산권을 지키기 위한 자바스크립트의 몸부림. 
하지만 개인적인 재산을 보호하기엔 한계가 있겠죠? 
하지만 걱정하지 마세요. 무료로 자바스크립트를 난해하게 만드는 툴은 다음과 같습니다. 

YUI Compressor(http://developer.yahoo.com/yui/compressor/) 
Dojo ShrinkSafe(http://dojotoolkit.org/docs/shrinksafe) 
Open Source Javascript Obfuscator(http://www.usefulsnippets.com/open-source-javascript-obfuscator.html) 

셋 다 자바를 사용합니다. 위에 2개는 최적화도 시켜주지만 난독화도 시켜주기 때문에 포함을 시킨거죠. 세번째껀 말 그대로 난독화 기능을 수행하는 도구입니다. 

네. 맞습니다. 난독화한다고 해서 아주 징글징글한 해커라면 뚫릴 수도 있겠죠. 세상에 완벽하게 가릴 수 없는 방법은 없습니다. 커텐에 누군지 알 수 없는데 불을 키고 나니 여자라는 것을 알 수 있는 것처럼 말이죠. 

마지막으로, 자바스크립트를 난독화하는 테크닉으로 끝을 맺겠습니다. 

1. 객체를 동적으로 부여 

객체를 정적으로 window.onload 이런 식으로 정의 및 선언도 할수 있겠지만, 
window["onload"] 이런 식으로도 정의 및 선언도 가능합니다. 
이 방식을 이용해 이런 식으로 난해하게 만들 수 있습니다. 
var aeg2="sty"; 
var wgbe32="le"; 
var aegw3="back"; 
var asgage="ground"; 
element[aeg2*wgbe32][aegw3+asgage]="black"; 
즉, 엘리먼트 스타일 중 배경을 색으로 까맣게 만드는 건데, 
이런 식으로 뭔소린지 난해하겠끔 만들 수 있습니다. 

2. 괄호 십쇼키. 

괄호를 사용한 훼이크를 통해서도 만들 수 있습니다. 
var a=("ㄱ","ㄴ"); 
이렇게 쉼표로 구분해서 만들 수 있습니다. 거짓말같으면 한번 실행해보세요. 
결과는 어떻게 나올까요? 네. "ㄴ"이 나오겠죠? 
당최 무슨 식이라고 하기도 난해한데 저렇게 쉼표로 구분한 식을 나와봐야 결국 출력되는건 마지막에 지정된 값 뿐입니다. 
이걸 응용해서 이렇게도 만들 수 있습니다. 
var where=(odi="school","php"+odi); 
그럼 where는 phpschool 이라는 ㅤㅇㅓㅎㅤㅎㅓㅎㅤㅎㅓㅎ한 결과가 나옵니다. 

3. 삼항 연산자의 훼이크다 병맛들아! 

삼항 연산자. 이거 그냥 보면 뭐가몬지 좀 힘들겁니다. 
var a=b?"a":"b"; 
이걸 이용해서도 훼이크를 만들 수 있겠죠. 
var where=((12e9>4e8)?"php":"asp"+"server")+"school"; 
물론 결과는 phpschool 이 나옵니다. 

이걸 응용하면 좀 더 난해한 스크립트를 만드는 기술이 나오겠죠? 
그걸 활용해 리팩토리한다음에 여러 언어를 통해 템플릿 만들어서 만들어도 되고... 
이렇게 잘만 하면 사용자가 절대적으로 뚫지 않는다는 보장은 없지만 
난해하게 만든 코드를 풀다가 중도 포기할 수도 있다는 거죠. 심리전입니다. 

정말 힘들긴 하지만, 여러분이 프로그램으로 먹고살고자 한다면, 
아무래도 이런 과정도 거쳐야 할 부분이 아닐까 싶습니다. 
세상에 그 어떤 것도 뚫는 창도 없고, 세상 어떤 것도 막는 방패는 없지만, 
점점 강해지면 뒤따라 점점 강해지듯이 이런 세상에서 우리는 살고있죠? 

이렇게 되면 골때려서 돌아가실 것 같은 약속은 한 셈이 되겠습니다. 응? 

아차, 그리고 웹딜 PHP 보안 만드신 분께 죄송한데 말씀드려야겠습니다. 
클라이언트쪽에서 PHP 암호화 복호화 하려고 만드신 자바스크립트 있죠? 
제가 뚫어보니 그냥 뚫리더군요. 좀 더 견고한 난독화가 필요하겠습니다. 

링크 #1은 자바스크립트 난독화 기법이 소개된 글이고, 
링크 #2는 무료로 즉석에서 자바스크립트를 난독화해주는 툴입니다

출처: http://cybershin.tistory.com/5 [ArtProgrammer]

프로그래밍(TA, AA)/자바스크립트

[자바스크립트] 압축(Minify) / 난독화(Uglify)

12bme 2018.03.20 21:19

자바스크립트 관련 구글링을 하다 발견한 git 페이지(https://github.com/nhnent/fe.javascript/)입니다. javascript 개발하실때, 참조하시면 많은 도움이 될것 같습니다.  오늘 포스팅은 위 페이지에서 압축과 난독화 세션을 공부 겸 정리해 두려고 합니다. 모든 상세한 내용은 위의 링크를 따라가셔서 확인 바랍니다.

그외 참고 사이트

https://velopert.com/3421

https://joshua1988.github.io/web-development/webpack/caching-strategy/

압축과 난독화

---

 - 서비스에서 공통으로 사용되는 주요 소스 코드들은 별도의 파일로 분리하여 사용

 - 코드의 재사용, 캐시 적용, CDN 사용 등의 장점

 - 코드 압축은 최소의 노력으로 큰 효과를 볼 수 있는 최적화 방법중 하나.

 - 파일의 용량이 감소하며, 민감한 코드를 알아보기 어렵게 만들 수 있다

 - 경우에 따라서는 스크립트의 수행 속도에도 영향을 미침

 - 설정에 따라 압축한 소스로도 디버깅을 위한 Source Maps 기능을 사용 가능.

압축(Minify)

---

압축은 전체 소스코드 중 아래와 같은 경우를 제거하는 작업을 말합니다.

 - 불필요한 줄바꿈, 공백 밑 들여쓰기

 - 짧게 쓸 수 있는 긴 구문(줄일 수 있는 if 구문, 형 변환 축약 등)

 - 스코프 내 사용하지 않는 변수

 - 주석

 - 경우에 따라, console.log, debugger 등의 디버깅용 구문 또는 메서드 호출

 - 경우에 따라, 무의미한 메서드 호출 및 루프(Google Closure Compiler 사용하여 적용)

난독화(Uglify)

---

 - 자바스크립트 코드 자체를 분석하기 어렵게 만드는 과정

 - 난독화를 했다고 보안처리 없이 중요 정보나 루틴을 자바스크립트에 넣는 것은 매우 위험

 - 변수명, 함수명 치환에서부터 자바스크립트의 일부 루틴을 문자열로 바꿔 변수에 담고 뒤섞는 단계 등 여러 단계 존재

 - 난독화의 단계를 높일 수록 루틴을 알아보기 어렵게 만들 수 있음

 - 변수, 함수명 등이 줄어 용량이 감소하지만 난독화 단계를 높일수록 코드를 해석하고 실행하는 속도가 느려질 수 있으므로, 프로젝트에 맞게 선택하여 적용하는 것이 좋음

압축 도구

---

- CLI 형태의 바이너리가 제공되며, 다른 인자없이 스크립트를 인자로 넘길 경우 압축과 난독화 동시 진행

 - 프로젝트 상황에 따라 압축/난독화의 정도를 조절하는 등 세부사항을 조절할 필요가 있음

Google Closure Compiler

 - Google Closure Compiler는 별도의 API를 이용하여 소스를 압축하고, jar 파일을 다운받아 사용 가능

 - Google JavaScript Style Guide에 맞춰 개발했을 때 코드 최적화 가능

 - 추가로 Style Guide에 맞는 코드 변환 및 Style Fixer도 제공

java -jar compiler.jar --js hello.js --js_output_file hello-compiled.js

UglifyJS

 - 현재 주요 자바스크립트 라이브러리에서 가장 많이 쓰이는 소스 압축 도구

 - Node.js 기반으로 개발되어 다른 Node.js 모듈들과의 연계 좋음

 - Google Closure Compiler보다 방대한 양의 상세 옵션 제공

npm install -g uglify-js

uglifyjs hello.js -o hello.min.js

압축 시 유의점

---

코드 압축시, 모든 들여쓰기와 공백이 제거되고, 전체 코드가 한줄로 병합됩니다. 원본 코드에서 들여쓰기, 공백, 세미콜론, 콤마, 대괄호 등이 바르게 사용되지 않았을 경우 압축된 코드가 정상적으로 동작하지 않을 수 있습니다.

자바스크립트는 명시적으로 수행되는 컴파일 과정이 없어 이런 오류를 사전에 알아내는 것은 쉽지가 않습니다.

JSHint와 같은 정적 분석 도구를 사용하면 사전에 문제될만한 코드를 검출해낼 수 있습니다. 또한 하드 코딩된 메서드명 또는 변수명은 난독화 과정에서 아래와 같은 문제를 일으킬 수 있습니다.

1 2 3 4 5 6 7 8 9 10

// before uglify var myObj = {   test: function() {}   } }; myObj['test']();   // After Uglify // myObj.test가 b로 변경되었지만, 하드 코딩된 'test'는 변경되지 않음 var a={b:function(){}};a['test']();

난독화 도구는 하드코딩된 코드를 처리할 수 없으므로, 피하는 것이 좋습니다. 혹은 mangle 옵션을 이용하여 특정 이름의 치환을 막을 수 있습니다. UglifyJS에서는 -m 옵션으로 제공되고 있습니다.

SourceMaps

---

 - SourceMaps은 압축된 코드와 압축 전의 코드를 Base64 기반으로 매핑한 데이터를 의미

 - 브라우저가 지원할 경우, 압축된 Base64 내용을 원본과 매핑시켜 압축된 코드를 원본처럼 풀어서 보여주거나, 디버깅이 가능하게 하는 등의 기능을 제공

대부분의 압축도구는 SourceMaps를 지원하지만 아직까지 완벽하게 동작하지는 않습니다. BreakPoint가 제대로 걸리지 않는다던가, SourceMaps 파일이 일정크기 이상 커질 경우 인코딩 문제가 발생하는 등 해결되어야할 문제들이 남아있습니다.

SourceMaps 생성

SourceMaps의 생성은 간단하며, 아래는 Google Closure Compiler 사용시 명령어 입니다.

java -jar compiler.jar --js example.js --create_source_map ./example-map --js_output_file example-compiled.js

UglifyJS도 아래와 같이 SourceMaps을 생성할 수 있으며, Google Closure Compiler 보다는 많은 생성옵션을 제공합니다.

uglifyjs hello.js -o hello.min.js --source-map hello.min.js.map --source-map-root http://foo.com/src

출처: http://12bme.tistory.com/357 [충일함만이 명확함에 이른다.]