회사에서 평소와 같이 개발하는데 내가 이 게시물은 복사가 안 되게 막을 수 있는 방법이 있을까? 라는 생각이 문득 들었다. 진짜 갑자기 들었다. 우리가 흔히 알고 있는 블로그들 보면 복붙이 안 되게 막혀있는 경우를 본 경험이 있을거다. 물론 저작권 문제 때문에 막았구나...이해는 하지만 정말 복붙하고 싶은 좋은 글들이 많았...😥
암튼 궁금해져서 찾아봤는데 생각보다 열려있는 정보들이 많았고, 그 중에서 내가 찾아본 방법은 html/css/js를 3가지 방식이 있었고, 이를 전부 vscode에 적용하여 테스트도 전부 끝냈다.
그렇다면 한번 알아보자!
1. HTML
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onkeydown="return false">
html은 방식이 정말 간단하였다. 위처럼 body 태그 안에 원하는 속성을 넣으면 되는 것이다.
- oncontextmenu = "return false" ::: 우클릭 막기
- onselectstart = "return false" ::: 마우스 드래그 막기
- ondragstart = "return false" ::: 이미지 복사 드래그 막기
- onkeydown = "return false" ::: 키보드 단축키 복사 막기
2. CSS
실제 테스트를 진행한 css코드이다. 엄청 간결한 css코드를 스샷을 왜 넣었냐고 물어본다면(아무도 안 물어봄) 진짜로 테스트 해봤다고 인증하기 위해서 넣었다.
body{ -webkit-user-select: none !important; /* Chrome/Safari */ -moz-user-select: -moz-none !important; /* Firefox */ user-select: none !important; /* IE */ }
주석으로 짐작이 가겠지만body에 user-selcet를 줌으로 텍스트 선택을 방지하고, 각각의 브라우저 환경에 따라 적용되도록 위와 같이 설정하였다. css는 이게 끝!
3. JS
구글링을 했을 때 풀려있는 오픈소스들이 정말 많았다. 그 중 하나를 가지고 온거라 따로 설명을 하지 않겠다. 하지만 코드가 짧고 직관적이라 간단히 이해할 수 있는 내용이라고 생각한다.
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 }
이처럼 오늘은 html/css/js를 통하여 다양한 복사 방지(?) 에 대해 알아봤다. 물론 나도 다양한 구글링을 통해 알아낸 정보지만 개발자는 구글 없이 살 수 없다...저거 노베이스 상태에서 첨부터 알아내려면 누가 어케 알아내냐고 ㅠ
맨날 spring 공부만 한다고 이런 다양한 지식을 정리할 시간이 많이 없었지만 이처럼 정말 필요하지만 아직 구현하는 방법을 모르는 것들을 하나씩 정리해보려고 한다.
