티스토리 블로그 스킨 보안 - JS, CSS 파일 난독화

 

 

 

서론

나의 티스토리 블로그 스킨은 완전히 개인 제작이다.

따라서 스킨에 대한 저작권은 나에게 있고, 아직 나는 다른 제3자에게 공유할 마음이 없다.

하지만 당연히 HTML, CSS, 자바스크립트 소스는 개발자 도구에서 쉽게 소스를 확인할 수 있다.

그래서 실제로 검색을 해보면 블로그 스킨을 도둑맞은 저작권자들의 글을 많이 찾아 볼 수 있다.

심지어 다른 사람이 내 블로그 스킨 소스코드를 그대로 복붙해가면 문제점 중 하나가 구글 애드센스도 꼬인다고 한다.

잘 모르는 사람들이 코드를 불펌해갈때 애드센스 관련 메타 태그도 같이 가져가니까 그렇다고 한다.

아무튼 문제는 아무나 내 블로그 스킨이 마음에 들면 그대로 불펌해서 가져다 사용할 수 있다는 것이다.

 

트러블슈팅

그럼 개발자 도구에서 훔치지 못하게 난독화를 하면 되는데 문제는 HTML 난독화는 크게 의미가 없고

그나마 JS, CSS파일을 난독화 하기로 결정했다. 하지만 압축기를 사용하는건 안된다.

왜냐하면 한줄로 코드를 압축해줘서 사람이 읽을 수 없게 코드는 바꾸지만 결국 개발자 도구에서 원본 소스 확인이 가능하다.

 

1. 자바스크립트 js 코드 난독화

https://obfuscator.io/#code

JavaScript Obfuscator Tool

 

위 사이트에서 js코드를 난독화 가능하다. 물론 보안 레벨은 최상위로 한다.

 

난독화 전

// Paste your JavaScript code here
function hi() {
  console.log("Hello World!");
}
hi();

 

난독화 후

(function(_0x5bdded,_0x3d6947){function _0x2c63f1(_0x56f974,_0x5abb35,_0x4afecd,_0x2113f7,_0x3363ec)...

난독화 후의 소스가 너무 길어서 끊었다. 대충 저런식으로 사람이 알아 볼 수 없고 읽을 수 없게 난독화를 해준다.

 

2. CSS 코드 난독화

https://www.phpkobo.com/css-obfuscator

Online CSS Obfuscator

css 코드 압축기는 필요 없다.

압축해서 아무리 읽기 어렵게 만들고 해봤자 소스 내용 자체는 그대로여서 결국 개발자 도구에서 다 보인다.

하지만 위 사이트의 난독화를 이용하면 CSS 소스코드를 자바스크립트 난독화로 바꾸어 준다.

즉 HTML 스크립트 단에서 자바스크립트 호출하듯이 호출만 하면 되는 것 이다.

 

난독화 전

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');


/* basic */
article, aside, canvas, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block;
}

body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, select, table, td, textarea, th, ul {
  margin: 0;
  padding: 0
}

body, button, input, select, table, textarea {
  color: #333;
  font-family: "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", Dotum, '돋움', "Noto Sans KR", "Nanum Gothic", 'Lato', Helvetica, sans-serif;
}

button, input {
  border: 0;
  border-radius: 0
}

img {
  display: block;
  border: 0;
}

 

난독화 후

(function(){_d35("7qmoj-fucufsums;bo~evoqtdb-ubm$<ogj;qfEpjO#Nh!ud#!#pn돋-p!oL-bnpj-b(ffdttfgcu-q|ss<ssbv1j|tbcdce;|pj##sjdp;-dqj;~dsuV.<jp!miq0ptpmq/ntgj>u5-1<sd-j-otfj-hqpgv-psffnof-wfj-nseqzmlczvpeeegmfgn23456-vfe-qm-meyfi|h1ehzu-vfucub|p4gubm#q!!udf-bvHi#맑고-u-움#uTtS#o!ud(u-mubb.s~vpjvce;ce.et~neqzmlpf1#no;-fsuo##sue#it!U9nsv)ut0o/pfjd0tbmMp18(umbedw...

 

자바스크립트 코드로 바뀌었고 전혀 알아 볼 수 없는걸 확인할 수 있다.

 

두번째 트러블슈팅

문제는 티스토리 블로그 구조가 css파일이 루트 경로에 무조건 있어야한다.

https://tistory.github.io/document-tistory-skin/common/files.html

파일 구조 · GitBook

 

이게 무슨 말 이냐면 내가 자바스크립트로 난독화한 CSS파일이 확장자가 css에서 js로 바뀌었기 때문에 티스토리 측에서 메인 css파일이 없다고 오류를 띄우고, 루트에 있어야할 파일이 아니면 강제로 다 이미지 파일로 들어가기 때문에 루트에 css 확장자의 빈 파일을 넣어놔도 js파일이 이미지 폴더 경로로 자동으로 들어가기 때문에 CSS 코드 안에 작성되어 있던 경로에 관한 부분이 다 꼬이게 된다.

해결

메인 CSS 파일을 놔두고 해당 파일에는 경로와 엮인 이미지 관련된 코드만 남겨두었다.

즉 진짜 CSS 소스코드는 난독화가 되어 js파일이 이미지 폴더 안에 있다는 소리

 

마무리

이로써 내 블로그 스킨의 소스 코드 난독화가 완료 되었다.

개발자 도구에서 소스를 체크해볼 경우 아래와 같이 난독화가 되어 가져가서 도저히 수정할 수 없게끔 되어 있다.

자바스크립트 파일

 

css 파일