Web
[Web] 드래그 복사 방지법 HTML, CSS, JS로 원천봉쇄
ifhead
2022. 9. 5. 19:04
반응형
물론 우회적으로 뚫는 방법들이 있겠지만 이것이 최선입니다. 이 글은 모든 방법을 적용해서 컨텐츠를 보호할 수 있도록 도와드립니다. 자바스크립트 드래그 방지는 확장 프로그램으로 쉽게 끌 수 있기 때문에 CSS와 HTML을 통한 방법도 병행했습니다.
HTML
<!--바디 태그-->
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onkeydown="return false">
- oncontextmenu = "return false" : 우클릭 방지
- onseletstart = "return false" : 마우스 드래그 방지
- ondragstart = "return false" : 이미지 복사 드래그 방지
- onkeydown = "return false" : 키보드 단축키 복사 방지
CSS
body, html에 적용합시다.
/*텍스트 선택 불가*/
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
JavaScript
헤드 태그 안쪽에서 src로 불러오시면 됩니다.
// 오른쪽 클릭 방지
document.oncontextmenu = function() {
return false;
}
// 드래그 방지
var omitformtags = ["input", "textarea", "select"]
omitformtags = omitformtags.join("|")
function disableselect(e) {
if (omitformtags.indexOf(e.target.tagName.toLowerCase()) == -1)
return false
}
function reEnable() {
return true
}
if (typeof document.onselectstart != "undefined")
document.onselectstart = new Function("return false")
else {
document.onmousedown = disableselect
document.onmouseup = reEnable
}
반응형