사용자 삽입 이미지

엊그제 Javascript Beautify 라이브러리를 소개했었습니다.

제일 처음 구굴의 난독 처리된 Javascript 소스를 넣어봤습니다.

깔끔하게 정리되어 있어서 정말 보기 편했습니다.

여러가지로 난독 처리 했지만 google과 같이 나오질 않더라구요.

Minify, Compressor 모두 처리 해봤지만 DOM Method 같은 경우는 변해버리면 안되기 때문에 변환에

당연히 문제가 있지 않을까 생각했습니다.

하지만 이런 방법이 있더군요...

최상위 객체인 window, navigator 등을  임의의 글로벌 변수로 치환합니다.

var Ww = window;
     Na = navigator;


이렇게 하고 window 는 모두 Ww로 난독 처리 되게 됩니다. 난독 처리라기 보다 리플레이스 시켜버린다는 것이죠.

특히나 dom 메서드를 활용시에는 Document.getElementById(''); 이렇게 많이 활용하는데요...

document 역시 글로벌 변수 Math, String, Number 등등 자주, 빈번히 쓰는 것들은 이처럼 글로벌 변수로

설정해 버리고 리플레이스 시키면 됩니다.

정말 구글은 효율적인 머리를 가지고 있는것 같습니다.

또 한가지 재미있는 사실은...

중간 중간에...

Array[_P].method = function() {}
Function[_P].method = function() {}

저는 이게 도대체 무엇을 의미할까 생각했습니다.

이 역시 상단에 보니 글로벌 변수로

var _P = "prototype"; 이렇게 정의 되어있더군요.

Array['prototype'] == Array.prototype;
Function['prototype'] == Function.prototype;

이건 같은 의미입니다.
그렇기 때문에 Array의 prototype을 접근하기 위해서 이와 같이 처리했습니다.

나참나 정말 오늘부터 따라하기로 했습니다.

좀더 이부분에 상세히 말해보자면...
var Dm = document;
var _L = "length"
      cn = "className"
      f = "firstChild"
      bdy = "body"

기타 자주 사용하게 되는 Element에 해당하는 DOM property 필요에 따라 우리는 이렇게 접근할 수 있습니다.

var o = Dm[bdy];
var f = o[f]; <-- document.body 의 첫번째 자식 엘리먼트를 찾습니다.

사실 개발하면서 난독 처리 한다는 것은 사실 불가피 합니다. ^^;;
자기만 볼것도 아니구 말이죠.. 개발은 손쉽게 하되!!

난독 처리할 때는 이런 간단한 로직만으로도 ^^ 난감한 소스가 나오네요.

뭐 이런 부분만 있는 것은 아니겠지만요.
신고
Posted by Rhio.kim