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

§

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% 완벽하죠) 에 대한 글을 조만간 써보도록 하겠습니다.

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , ,

카테고리: ,

Ω

14 Comments

  • 개발자 says:

    크롬으로 보면 소스코드 깔끔하게 다 보이는데..
    누가 요새 다운로드 받아서 삽질을 합니까..ㅋㅋ

    • HackYa says:

      단순하게 minify 된거라면 브라우저상에서 보이지만, 어느 브라우저에서도 Base64 인코딩 해서 obfuscate 된 코드는 보이지 않습니다.

      물론 해독해서 보면 되죠. 제가 몇달전 프로그래머분들에게 간단하게 obfuscate 된 페이지 하나를 해독해 보시라고 테스트 해보았는데 성공하신분이 딱 한분 계셨습니다. 그것도 엄청난 삽질 후에… ㅎㅎ

      client-side 상에서 완벽하게 코드를 숨길수 는 없다고 본글에도 적어 놓았고, 관건은 얼마나 이걸 어렵게 하는가 입니다.

  • Mr.H says:

    유용한 포스트 정말 잘봤습니다.
    저또한 님이 제안한 암호화 방법을 구현하고자 샘플소스를 받은 받고 싶으나, 링크가 깨져있네요.
    http://oldboi.com/hyCMS.zip
    수고 스럽더라도, 파일 한번도 업로드 요청 드립니다.
    그럼 부탁드리겠습니다. (_ _)

    • HackYa says:

      업로드 된 소스가 있었나요? 몇달전에 썼던 글이라서 잘 기억이 나질 않네요.

      client-side 에서 완벽하게 암호화 하실 수 있는 방법은 없고 여러가지 기법들을 js 에 혼용 적용시켜 이걸 해독하려는 사람에게 최대한 혼동을 주는 수 밖에 없습니다. 그러니까 자스의 일부는 64encode 로, 어느부분은 eval 로 섞어 놓는거죠.

      정말 보호받으셔야 하는 자스가 있으시다면 자스를 서버에 올리셔서 사용하세요. (node.JS)

  • ㅇㅇ says:

    요는 자신만의 암호화 방식을 개발해 사용한다는 거군요.

  • sks.mm says:

    유용한 정보 정말 잘봤습니다.
    초보인지라 설명을 이해하는데 가진 지식이 너무 부족함니다. 혹씨 샘플소스를 받고 싶은데
    어디 자료실에 올려진 곳이있는지요. 아니면 메일 업로드 요청 드립니다.
    그럼 부탁드리겠습니다.

  • WordCracker says:

    유용한 정보 감사합니다.

    위의 내용과는 조금 벗어나는 주제인데요, 외부 이미지를 로딩할 때 너무 시간이 많이 걸리거나 없는 이미지일 경우에 http://stackoverflow.com/questions/1588854/fallback-image-and-timeout-external-content-javascript 글에 나와 있는 코드를 사용해도 괜찮을까요?

    • Matthew says:

      onerror 는 말그대로 에러났을때 작동되는거구요, 그래서 아래 보시면 어느 분이 이렇게 지적해 놓으셨잖아요.

      The problem here is the time by which the image regarded as not available ! It may take long time the browser activity loading works till it invoke the onerror event.

      단순히 로딩이 지연되면 그걸 에러 났다고 인식을 못할수도 있는거죠. (고로, 항상 작동되지 않을 수도 있다는 지적입니다.)

      외부 이미지 로딩이 지연된다고 예상되는 경우 하는 작업은 다음과 같습니다.

      1. 정확하게 어떤 상황인지는 모르지만, id 가 “image”라면 일단 대체 이미지를 정상적인 html 로 마크업 하세요.

      이런식으로

      2. 그리고 document ready 후,


      $("#image").attr("src", "http://외부이미지.com/abc.jpg")

      이렇게 이미지를 로딩해주는게 통상적인 방법입니다.

      대체이미지를 매우 작은 1X1px 크기의 투명한 gif 로 띄우시고, 원래 보여져야 하는 이미지 (여기서는 abc.jpg 죠) 에 fade 효과주고.

      보통은 이렇게들 합니다.

  • 문동선 says:

    좋은 글 올려 주셔서 감사합니다.

Leave a Reply

Your email address will not be published. Required fields are marked *