글을 시작하기에 앞서 우클릭 방지는 선량한 사용자들에게 큰 불편함을 줍니다.
또한 이 코드는 어디까지나 불펌을 하려는 사람들이 퍼갈 때 귀찮음을 줄 수 있는 용도지 철벽처럼 막을 수 있는 코드는 아닙니다.
실제로 해외의 [**스택오버플로우**] 같은 사이트에선 이런 코드를 사용하는 걸 말리는 분들이 많습니다.
자바스크립트로 우클릭 방지하기
코드 자체는 매우 간단합니다.
document.addEventListener('contextmenu', function (event) { // contextmenu 이벤트 리스너
return event.preventDefault(); // 이벤트를 무효화한다
});
이 코드를 추가해준다면 마우스 우클릭을 방지할 수 있습니다.
하지만 문제는 이것만으로 끝나는 게 아니라는 겁니다.
자바스크립트로 키입력을 방지하기
우클릭을 하지 않더라도 다양한 방법으로 불펌을 할 수 있습니다.
이를테면 F12가 있습니다.
브라우저에서 개발자 모드를 여는 키인데, 이 키를 누른다면 우클릭을 무효화하고 정보를 손쉽게 빼내갈 수 있습니다.
document.addEventListener('keydown', function (event) { //키입력 감지
event.preventDefault();
event.returnValue = false; // 키입력 무효화하기
})
그럴 때를 대비해서 사용하는 게 위와 같은 키입력 감지 이벤트 활용입니다.
다만 어떤 키를 누르던 반응하는 게 아니라 정확히 특정 키를 입력할 때를 방지해야 합니다.
그렇기 때문에 조건문을 써서 어떤 키를 누를 때에만 [**event.preventDefault**]와 returnValue를 false로 돌려줘야하지요.
그럴 때 사용되는 게 키코드입니다.
많이 쓰이는 목록을 간략히 정리해보겠습니다.
| A | B | C | D | E | F | G | H | I | J |
| 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 |
| K | L | M | N | O | P | Q | R | S | T |
| 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 |
| U | V | W | X | Y | Z | Backspace | Tab | Shift | Control |
| 85 | 86 | 87 | 88 | 89 | 90 | 8 | 9 | 16 | 17 |
| F1 | F2 | F3 | F4 | F5 | F6 | F7 | F8 | F9 | F10 |
| 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 |
| F11 | F12 |
| 122 | 123 |
예를 들어 A키를 감지하고 싶다면, 조건문으로 event.keyCode == 65를 입력하면 됩니다.
우리가 막아야하는 키는 F12입니다.
그렇기 때문에 조건문엔 F12에 해당하는 123을 쓰면 됩니다.
document.addEventListener('contextmenu', function (event) {
return event.preventDefault();
});
document.addEventListener('keydown', function (event) {
if (event.keyCode == 123) {
event.preventDefault();
event.returnValue = false;
}
else if (event.keyCode == 17) {
event.preventDefault();
event.returnValue = false;
}
else if (event.keyCode == 16) {
event.preventDefault();
event.returnValue = false;
}
else if (event.keyCode == 74) {
event.preventDefault();
event.returnValue = false;
}
else if (event.keyCode == 73) {
event.preventDefault();
event.returnValue = false;
}
else if (event.keyCode == 67) {
event.preventDefault();
event.returnValue = false;
}
});
그렇게해서 탄생한 게 위의 코드입니다.
개발자모드(F12), 개발자모드(컨트롤+시프트+J), 개발자모드(컨트롤+시프트+I), 개발자모드(컨트롤+시프트+C) 키를 막아내는 코드지요.
겸사겸사 컨트롤+C 같은 복사키도 막을 수 있고요.
하지만 서두에서 명시했듯이, 완벽한 방어책은 되지 못합니다.
까놓고 말해서 우클릭을 뚫어지는 툴바를 쓴다거나, 아예 브라우저에서 메뉴를 클릭해서 개발자 모드로 들어간다거나, 방법은 무궁무진합니다.
CSS로 텍스트 선택 방해하기
보통 불펌을 해갈 때 텍스트를 드래그해서 컨트롤+C와 컨트롤+V로 복사해간다는 것을 노린 방법입니다.
자바스크립트가 아닌 CSS로만 가능하다는 것도 큰 장점입니다.
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
위의 CSS가 끝입니다.
이렇게 하면 선택을 할 수 없게 방해할 수 있습니다.