- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
Javascript & JavaScript Application PHP 로 css/js 보호하기
2019.11.08 13:04
PHP 로 css/js 보호하기
업무상 내가 작성한 디자인이 복사되는걸 막으셔야 하는 front-end 개발자/웹디자이너 분들 위해 아래 방법을 소개시켜드립니다. 죄송합니다. 이글을 빨리 쓰지 못했어서.. ㅠㅠㅠㅠ
방법 1. css/js 에 비밀번호를 다는 방식
일단 index.php 페이지에 css비번을 달아 줍니다. 이런식으로
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<?phpsession_start();$_SESSION['csskey'] = "비밀번호";?><html> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> 내용..... </body></html> |
그리고 이제 style.css (워드프레스는 css 명이 style.css 니까) 를 style.php 로 바꿔줍니다. 이렇게.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?phpsession_start();header("Content-type: text/css");if ($_SESSION["csskey"] != "비밀번호") { //만약 session css 비번이 동일하지 않으면 die("Protected"); // 뒤져}$_SESSION["csskey"] = "번호확인됨"; // 비번이 맞으면 허락/재사용?>/* 사이트 css 내용 */body {}h1 {}..... |
마지막으로 예전에 알려드렸던 하위폴더 암호화 하는 방식을 응용해서.. 끙… 제가 쓴글을 제가 못찾겠네요. >. 아파치라면 Rewrite rule 을 .htaccess 에 하나 작성해 줍니다.
RewriteEngine on RewriteRule style.css style.php
Nginx 라면 이렇게 하시면 되겠죠?
|
1
2
3
|
location / {rewrite style.css /style.php;} |
javascript 도 동일한 방식으로 하시면 됩니다.
방법 2. 내 사이트에서만 css 작동되게 하기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
header("Content-type: text/css"); $status_array = array();if (!empty($_SERVER['HTTP_REFERER'])) // array 값이 맞으면{ foreach($allowed_servers as $server) { if (contains($server, $_SERVER['HTTP_REFERER'])) { $status_array[] = 'ok'; } }} if (!in_array('ok', $status_array)) // 만약 array 값이 맞지 않으면{ print " body { display: none !important; } //감춤 "; exit;} $core_files = array('style.css');foreach($core_files as $file){ // get the contents print file_get_contents(dirname(__FILE__) . '/' . $file) . "\n";} /*** substring 값이 있는지 확인* substring 값이 동일한지 확인* 맞으면 ok**/function contains($needle, $haystack){ if (empty($needle)) { return false; } $pos = strpos($haystack, $needle); if($pos === false) { return false; } else { return true; }} |
1번 방식과 2번 방식을 겸용사용하실 필요는 없습니다. 둘중 하나만 하셔도 됩니다.
이렇게 해놓으면 빨대족들은 이런 개소리를 하겠죠.
우헤헤 css/js 개별페이지 안봐도 되는데? 개발자 console 열면 css 다 보이는데? 거기서 한줄 한줄 베끼면 되는데?
네, 이제 개발자 console 이 열리지 않게 하거나, 개발자 console 을 열면 아무것도 보이지 않게 하는 작업을 해야 합니다. 에고… 에고… 힘드시죠? ㅠㅠ
작년까지도 Paul Irish 가 공개한 이 방법이 작동 되었었는데…
|
1
2
3
4
5
6
7
|
function isInspectOpen(){ console.profile(); console.profileEnd(); if (console.clear) console.clear(); return console.profiles.length > 0;} |
이게, console.profiles 가 없어지면서 작동이 멈췄습니다.
그래서 이 부분이 해결이 안되서 제가 계속 이 글을 못 쓰고 있었는데, 좋은 방법을 어느 분이 공개해 주셨습니다.
일단 아래 페이지 방문하셔서 console 창을 열어보세요. 콘솔창을 따로 띄워도 보시구요. 파폭, 크롬, IE, 어느 경우에도 console 창이 열리거나 보이면 detect 을 해 냅니다.
https://jsfiddle.net/evnrorea/embedded/result/
https://github.com/zswang/jdetects 여기 git에서 미리 만들어 져있는 예제 다운받으셔서 쓰시면 됩니다.
*그냥 F12 key 비활성화 시키면 되잖아? 라고 생각드시는 분들이 계실수도 있는데, F12 key 없다고 개발자 console 못 여는 것 아닙니다. 마우스는 폼으로 있는게 아니죠.ㅋㅋㅋㅋㅋ
마지막으로, 우헤헤 자스 끄고 들어가면 console 창 열수 있는데? 이소리 또 하겠죠?
|
1
2
3
4
|
<noscript> <style>html{display:none;}</style> <meta http-equiv="refresh" content="0.0;url=미성년자도 볼수 있어 차마 미트스핀 주소는 못넣겠네요"></noscript> |
자스 끄고 사이트 들어오면 redirect 해서 미트스핀 같은 곳으로 관광 보내버리면 됩니다.
이정도면 어떤 방식으로도 css 나 js 를 빨대족이 베껴갈 수 없습니다. 물론 복사기 돌려도 무용지물이죠.
나중에, 진짜 나중에 시간날때,
1. 내 사이트 에서 복사기 돌리는 것 방지하기
2. 복사기 돌리는 빨대족들 응징하기 (복사기 돌리는 인간 컴퓨터 악성코드로 감염시켜서 그 인간 PC 하드웨어 까지 복구불능으로 만드는 방법)
에 대한 글을 써보겠습니다.
[
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
