고정 헤더 영역
상세 컨텐츠
본문
반응형
선택방지 조치를 하지 않은 사이트에 들어가서, 임의의 타이틀 또는 글을 선택, 마우스 우클릭, "검사" 를 선택하면 정확하게 관련 태그가 하이라이트되어 표기되고, 관련 태그 끝에 "== $0" 을 확인 할 수 있습니다. 이 선택자를 이용하여 다양한 임의 조작을 할 수 있습니다.
// 내용 수정
$0.innerText = " 수정합니다"
// 폰트 칼라
$0.style.color = "red";
// 배경색
$0.backgroundColor = " black"물론 서버에 영향을 주는 코드는 아닙니다. 이러한 조작을 막거나 복사하여 내용을 가져가는 것을 막는 방법에는 다양한 형태가 있습니다.
CSS 로 요소 선택방지
body {
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome, Opera and Firefox */
}
JavaScript 로 오른쪽클릭 및 키보드 단축기 비활성화
// 오른쪽 클릭 비활성화
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
// F12, Ctrl+Shift+I 비활성화
document.addEventListener('keydown', function(e) {
if (e.keyCode == 123 || // F12
(e.ctrlKey && e.shiftKey && e.keyCode == 73) || // Ctrl+Shift+I
(e.ctrlKey && e.shiftKey && e.keyCode == 74) || // Ctrl+Shift+J
(e.ctrlKey && e.keyCode == 85)) { // Ctrl+U
e.preventDefault();
}
});
이벤트 비활성화
HTML 요소(예, <body> 또는 <div>)에 특정 이벤트를 비활성화하여 사용자의 조작을 방지할 수 있습니다.
// 우 클릭 방지
<body oncontextmenu='return false'>
// 마우스 드래그 방지
<body ondragstart='return false'>
// 선택 방지
<body onselectstart='return false'>
// 3가지 통합
<div oncontextmenu='return false' ondragstart='return false' onselectstart='return false'>
여기는 선택할 수 없습니다.
</div>콘솔보호
개발자 도구 콘솔에서 코드를 실행하지 못하도록 하는 방법은 복잡하지만, 일부 보호 코드를 추가하여 어느 정도 방지할 수 있습니다.
(function() {
var console = window.console;
Object.defineProperty(window, "console", {
get: function() {
if (console._commandLineAPI) {
throw "콘솔 사용이 비활성화되었습니다.";
}
return console;
},
set: function(val) {
console = val;
}
});
})();
이러한 수단은 frontEnd 에서 방법으로, 자바스크립트 해제 등 우회의 길들이 있습니다. 따라서 backEnd, 즉 서버 측에서 보안을 제대로 처리하는 것이 중요하겠습니다.
'JavaScript' 카테고리의 다른 글
| (fn)() , (fn()) - IIFE - Immediately Invoked Functional Expression (1) | 2024.05.18 |
|---|---|
| ES6 이후의 주요 변화 - JavaScript (1) | 2024.05.18 |
| [[Prototype]]: Object, [[Prototype]]: Array(0) (3) | 2024.05.17 |
| vite.js v 5.2.0 폴더 구조 (0) | 2024.05.15 |
| vite.js 시작 - Templates (0) | 2024.05.15 |
