css 와 javascript 소스코드 암호화 하기 - 펌

css 와 javascript 소스코드 암호화 하기

<aside class="post-info" style="box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: rgb(119, 119, 119); clear: both; width: 809.594px; font-size: 0.925em; margin-bottom: 1em; font-family: Helvetica, "Helvetica Neue", Arial, "Open Sans", NanumBarunGothic, NanumGothic, 나눔고딕, "맑은 고딕", "Malgun Gothic", 돋움, Dotum, sans-serif; background-color: rgb(255, 255, 255);"> hackya  2012년 06월 23일  javascript, Web Development  14 Comments</aside>

§

https://hackya.com/kr/php-로-css-와-js-보호하기/ (←이게 최신 방식 입니다.)

아래 내용은 오래된 내용이고 (비효율적이고 좋지않은 방법), ↑↑↑↑↑ 위 링크에 서버에서 css 와 js 가 복사되는걸 방지하는 기법을 소개시켜드렸습니다. 위 페이지에서 소스코드 그냥 복사해서 쓰시면 됩니다.

css 와 javascript 소스코드 암호화 하기 (2015년 update ↓↓↓↓↓↓ 이글 쭉 스크롤 하시고 제일 하단에서 보세요.)

비프로그래머도 쉽게 따라할 수 있는 간단한 방법 하나 알려드립니다.

내가 만든 이미지, 플래시, 디자인 등을 빨대족 들로부터 지키고 싶어 하는 분들은 10여년 전부터 있어왔는데….,

일단 컴맹들의 바보놀이:

방어자: 우클릭 방지, –   빨대족: 브라우저에서 .js 해제하고 퍼감

ㅋㅋㅋ

.js 를 해제하고 접근하는 방문자를 안드로메다 (밋스핀) 으로 관광 보내는 방법이 있긴 합니다.

 

<noscript><meta http-equiv=”refresh” content=”0; url=”http://meatspin.com”></noscript>

 

 

그런데 이건 IE 의 경우고, 크롬에서는 .js 해제고 뭐고 필요없이 그냥 F12 만 누르면 됩니다.

 

플래시 같은 경우는, 제가 10여년 전쯤에 쓰던 Sothink 라는게 있는데,

 

http://www.sothink.com/product/flashdecompiler/

 

swf 을 다운받아서 fla 로 자동변환해줍니다. (유료이긴한데, 토렌트, 키젠, 크랙… 쿨럭…)

 

뭐 요즘 플래시로 뭘 만드는 무개념인 분들은 많이 없을거고…

/////////////////////////

js 와 css 를 어떻게 보호하는가 가 관건이겠죠.

일단 js 와 css 는 client-side 이기때문에 비공개를 할수가 없습니다.  불가능 합니다.  브라우저에 보이는건 다 공개가 됩니다.

더구나 웹복사기들을 쓰는 빨대족들 로부터 코드를 비공개할수가 없습니다.  코드는 일단 보여줘야 합니다.

공개를 하되, 알아볼 수 없게 하는 방법 (암호화) 이 5~6 가지 정도가 있습니다. 문제는 인터넷에 공개된 방법들은, 해독 방법도 똑같이 나온다는 것 입니다.

 

 

사실 php 도 마찬가지 입니다.  zend 로 인코딩 =>>  zend decoder

이제부터 방법입니다.

1. css 를 .js 로 옮깁니다.  순수 .js 보다는 jQuery 나 mootools 같은 js library 로 옮기시는게 수월합니다. 아예 처음부터 css 코딩을 .js 내에서 하면 옮기는 수고를 덜수 있겠죠? 물론 html 도 부분적으로 옮기시면 좋습니다.

 

2. .js 를 암호화 합니다.  위에서 말씀드렸듯이, base64encode 같은건 온라인에 decode 해주는 도구들이 즐비하기 땜에 보호받지 못합니다.  인터넷에 공개되지 않은, 자신만의 방법을 만드셔야 합니다.  그런데 이게 비프로그래머는 하기가 힘들죠.

 

그래서 아주 따라하기 쉬운 방법하나를 공개합니다.  제 방법을 해독해주는 도구가 있는지 눈에 불을 켜고 찾아 봤는데, 저는 아직 못찾았습니다.

 

ASCII 를 이용한 방법입니다. 사실 해킹방법이라서, 자세한 내용은 적나라하게 말씀드리기가 어려운데, 이런식 입니다.

옛날에 sql injection 같은거 예를들자면 ‘ or ‘1’=’1′ /* ‘ 이런거로 제로보드 허구하게 뚫렸었죠. 프로그래머들이 이걸 방어하기 위해 정규식씨를 불러다가 따옴표, 특수문자를 못 쓰게 하는걸로 막았었습니다. (호랑이 담배피우던 시절)

 

그때 해커들의 대응책은 이런거 였습니다.

“97,108,101,114,116,40,34,72,92,99,107,89,97,34,41”

 

이게 뭐냐구요?

 

a   l   e   r   t  (  ”  H   a c   k   y  a ” )

 

이거랑 똑같은 겁니다.  그러니까 ASCII 로 정규식씨를 피해가는 방법인거죠.

a=92, b=92 c= 99  이걸 자동으로 해주는 해커들이 쓰는 계산기도 있는데, 여기서 변환하셔도 됩니다.

function fx(g)는

102 117 110 99 116 105 111 110 32 102 120 40 103 41

 

요렇게 계산해 줍니다.  쉽죠?

 

이걸 어떻게 쓰느냐?  웹사이트 해킹 당하시면 꼭 이게 보이죠? eval( 이걸로 시작해서 알아볼수 없는 이상한 외계어들…

 

이게 해커들이 자신들의 악성 스크립트를 숨기는 방법인데, eval 에 관한 자세한 내용은:

 

http://blogs.msdn.com/b/ericlippert/archive/2003/11/01/53329.aspx eval 은 악이다.  뭐 이런 내용 입니다. 쿨럭.

 

암튼 해커들과 같은 방법으로 코딩 하시는 분들도 자신의 css 를 이렇게 숨길 수 있습니다.

 

eval(String.fromCharCode(97,108,101,114,116,40,34,72,92,99,107,89,97,34,41)

 

브라우저는 이걸

a   l   e   r   t  (  ”  H   a c   k   y  a ” ) 와 똑같이 인식하지만, 이렇게 처리한후 minify/compress 해주면 사람 눈에는 암호처럼 보이죠.

그런데 이걸 그냥 이렇게 방치하면 쉽게 알아보는 사람들이 간혹가다 있겠죠?  좀더 안전하게 하기 위해서 이걸 다시 2~3 번 정도 암호화 해서 감싸주면 됩니다.   암호화 하면서 MD5 salt 처럼 소금도 좀 뿌려주고…. 쿨럭…

 

(저처럼) 뭘 봐야 이해가 되시는 visual oriented 하신 분들을 위해서 example 을 하나 만들어 놨으니 살펴보세요.  살펴보시면 div 하나 div id=”hack” 의 css 를 .js 로 옮겨 놨습니다.

 

 

뭔 소리야?  firebug/크롬 개발자 툴로 보니 css 코딩이 다 보이네, 이러실까봐 미리 말씀드리지만, 위에서 말씀드렸듯이 코드를 비공개 할수는 없습니다.  단지 이걸 다운받아서 css 를 수정하려고 index.htm 을 까보면 아무것도 안보입니다.

 

그리고 여기에 css 코딩을 먹여봤자, 먹지를 않습니다.  왜냐하면, css 코드가

x38x2Ex36x3Dx3Dx22x49x22x29x7Bx31x38x2Ex49x3Dx31x38x2Ex49x3Bx75x20x3

 

이런식으로 .js 에 포함되어 암호화 되어 있기 때문입니다.

결국, 저 페이지를 고쳐쓰려면, js 를 버려야 하는데, js 를 버리면 css 도 같이 버리게 되는거죠.

이해가 되셨길…

 

결국, 이 방법은, 자신의 css 를 복사하려는 사람을 무진장 삽질하게 만들어서, 복사하려든 의지 자체를 꺽어 버리는 방법인 것 입니다.  저 코딩 하는데 5분도 안걸리는데, 저걸 해독하려고 몇날 며칠 삽질하려는 사람은 없겠죠?

 

저걸 해독할 수 있는 실력이면, 그 시간에 직접 페이지를 짭니다.

//////////////////// 21015 Update ///////////////////////

제 홈피에서 이글 hit 수가 가장 높습니다. 하루에도 이 글을 찾아 보시는 분들이 수십분이시더라구요.
대부분 자신이 작성한 js 나 css 를 도난? 도용? 타인이 복사해 가는걸 원치 않는 front-end 개발자분들이 이 글을 찾아 보시는 것 같은데… 이 글을 작성한지 3년이 되도록, 이글을 찾아 보시는 분들이 많으셔서, 더 좋은 방법을 알려드립니다. 가장 좋은 방법은 아직 작성을 못했습니다. (php + javascript 을 이용한 방식을 알고 있는데, 시간이 나는데로 새로 글을 써보도록 하겠습니다.)

1. 일단 node.js 를 설치하세요.

node.js 서버 설치는 매우 간단합니다. 아래 예제를 그냥 ctrl+c, ctrl+v 하셔서 쓰시면 됩니다. 보시면 node.js 서버를 구축하면서 jQuery 도 포함시킨게 보이시죠?


var http=require('http');
var jsdom=require('jsdom');
var $=require('jquery')(jsdom.jsdom().createWindow()); // jsdom 도 설치되어 있어야 합니다. https://github.com/tmpvar/jsdom jsdom 내 jQuery 예제 : http://blog.nodejitsu.com/jsdom-jquery-in-5-lines-on-nodejs/

var XMLHttpRequest=require('xmlhttprequest').XMLHttpRequest;

http.createServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/html'});
$.get(blog,function(html){
console.log($(html).find('title').text());
$.ajax({
url:blog,
dataType:'text/html',
type:'get',
data:{from:'hackya.com/xxxxx'},
complete:function(xhr,status){
res.write(xhr.responseText);
res.end();
}
});
});
}).listen(80);

2. 예전과 동일하게 jQuery 에 css 를 작성하세요.

$( "h1" ).width( "50px" );

이러면 일단 jQuery 에 포함된 css 가 서버로 올라가 버려서 css 가 적용되기는 하는데 개발자 창에서 보이지가 않더라구요. 어느 친구가 이런식으로 사이트를 짜서 공개한 적이 있는데, 그 예제 페이지를 지금 못 찾겠네요.

물론 이 방식도 개발자 창에서는 개별적인 css 가 적용되는 모습을 볼 수 있습니다.

//////////////////////////////////////////////////////////

3 년전 소개 했던 방법을 node.js 를 이용 좀더 발전 시켜본 아이디어인데, node.js 서버를 설치하기 불가능한 분도 계실거고,….. 완벽한 방법도 아니라서… 별로 만족스러운 방법이 아닌듯 하고….

////////////////////////////////////////////////////////////

시간이 허락되면 php 로 css 를 다운로드 받지 못하게 하고 + javascript 을 이용 브라우져에서 개발자 창을 열면 css 가 텅 비어 버리게 되는 방법 (이정도면 거의 100% 완벽하죠) 에 대한 글을 조만간 써보도록 하겠습니다.