안녕하세요 코딩하는 경제학도 쏘코입니다!
오랜만에 블로그 기능을 업데이트 하는 것 같습니다.
오늘은 디자인적인 부분이라기 보다는 기능적인 부분을 설명해 드리려고 합니다.
html/css도 디자인이긴 한데 이런 기능 역시 UX/UI와 관련이 있으니 나름 블로그 디자인이 맞다..고 합시다 ㅋㅋㅋ
정보 보안의 가장 기초가 되는 불펌금지 스킬!
그 중에서 오늘 알아볼 내용은 오른쪽 단추 및 드래그 금지입니다! (추가로 메시지를 넣는 방법도 담았습니다!)
목차
0. 쉬운 방법
역시나 훌륭한 티스토리 개발자님들은 미리미리 플러그인을 만들어주셨습니다.
환경설정에 가셔서 플러그인을 누르신 후에 오른쪽 위 보기버튼을 누른 후 '스팸/불펌 방지'를 눌러줍니다.
(물론 아래에서 바로 찾으셔도 됩니다!)
그러면 맨 마지막에 마우스 오른쪽 클릭 방지라는 플러그인이 보이실겁니다. 이걸 클릭해줍니다.
적용버튼만 누르면 끝납니다. 참 쉽죠?
1. 좀 덜 쉬운 방법
그런데 저는 이상하게도 저걸 해도 오른쪽 클릭이 잘 되더라구요??? (사실 방금 처음해봤습니다... 근데 적용이 안되네요?! 무언가 설정이 잘못된 것인지..)
내가 뭘 잘못한건가 싶었긴 한데, 어짜피 저는 플러그인을 사용하기 전에 이미 JS(자바스크립트) 태그를 통해 오른쪽 마우스 클릭을 금지해놨었습니다.
이제는 너무나도 익숙해져버린 스킨편집탭의 html편집으로 들어갑니다. 그럼 우리가 열심히 만들었던 스킨의 html들이 쭉 보일텐데, 우리는 맨 아래로 내려갑니다. 위에꺼 굳이 건들 필요가 없어요.
이미 script를 사용하고 있다면 script 안쪽에 아래와 같은 코드를 넣어줍니다.
저같은 경우 이미 <script></script>가 있어서 안쪽에 코드만 넣어줬습니다.
(왜 주석이 //에서 <!-- -->로 바뀌었냐고 물으신다면 JS내부와 html의 차이입니다..!)
<script>
/* 복사 방지, 개발자 도구 방지 */
$(document).keydown(function(event) {
if (event.keyCode == 123) { // Prevent F12
return false;
} else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) { // Prevent Ctrl+Shift+I
return false;
} else if (event.ctrlKey &&
(event.keyCode === 67 || // ctrl+c
event.keyCode === 85 || // ctrl+v
event.keyCode === 86 || // ctrl+u
event.keyCode === 117)) { // ctrl+F6
return false;
}
});
/* 마우스 오른쪽 클릭방지 */
document.onmousedown=disableclick;
status="마우스 오른쪽 버튼은 사용할 수 없습니다.";
function disableclick(event){
if (event.button==2) {
alert(status);
return false;
}
}
</script>
<!-- 드래그 금지 -->
<body ondragstart='return false'>
JS를 사용한 복사 방지, 개발자 도구 방지, 마우스 오른쪽 클릭 방지 소스입니다.
아래에는 body 내부에서 드래그 금지를 설정하는 ondragstart 태그까지 달아줬습니다.
코드의 위치는 </body>, 즉 body가 끝나는 지점 안에만 들어있으면 됩니다. (이미 존재하는 script 안에 넣으셔도 됩니다. 다만 <script></script> 안에 들어가야 한다는 것만 조심하세요!)
위의 복사방지, 개발자 도구 방지 코드에 있는 event.keyCode가 궁금하신 분은 아래 표를 참고하시면 됩니다.
저걸 이용해서 다양한 키를 봉인할 수 있습니다.
2. 복사 메시지 남기기
아예 복사를 못하게 하기는 싫은데, 막 복사를 해가게하면 조금 찜찜한 경우 복사할 때 추가적인 메시지를 남기게 할 수 있습니다.
2.0. 플러그인
역시 플러그인이 존재합니다.
아까 마우스 오른쪽 클릭 방지 플러그인을 설정했던 것과 동일한 방법으로, 스팸/불펌 방지 플러그인에 '저작권자 표시'라는 플러그인이 존재합니다. 이걸 설정하면 복사를 할 때 출처가 나오게 됩니다.
2.1. 스크립트 삽입
좋은 기능이긴 한데, 아쉬운 분들이 있을 수 있습니다.
나는 다른 말을 넣고 싶은데..
그런 분들을 위해서 또 다른 JS 코드를 들고 왔습니다.
html 편집으로 들어가서 다시 body의 맨 끝부분으로 갑니다.
그리고 아래 코드를 넣습니다. 물론 내부의 말은 조금 고쳐서 사용하시면 됩니다!
<script>
<!-- 복사할 때 추가메시지 남기기 -->
document.addEventListener('copy', (event) => {
const pagelink = `\n\n본 콘텐츠를 무단으로 복사 후 게재 혹은 배포할 시 저작권법에 의거하여 처벌받을 수 있음을 명시합니다.\n출처 : ${document.location.href} [코딩하는 경제학도]\nCopyright ⓒ SsocoIT`;
event.clipboardData.setData('text', document.getSelection() + pagelink);
event.preventDefault();
});
</script>
pagelink 안의 메세지만 원하시는대로 바꾸시면 됩니다. 저는 ⓒ기호도 복사해서 넣어줬습니다!!
document.location.href는 현재 페이지를 그대로 넣어줍니다. 따로 원하는 페이지 주소가 없으신 분들은 이 부분은 굳이 건드리지 않으셔도 잘 작동합니다!
주의! 플러그인을 해제하지 않으시면 출처가 두번 나오겠죠??
3. 후기
저는 원래 저 복사, 드래그, 개발자도구 전부 막아놨다가 이 글을 작성하는 지금은 다 풀어버렸습니다.
어짜피 마음만 먹으면 금방 뚫리거든요.. (다양한 툴 혹은 브라우저에 의해서도 뚫릴 수 있습니다)
이에 대한 좋은 글(?)이 아래 OKKY에 남겨져 있어서 가져왔습니다.
OKKY | JS 단에서 개발자 도구 막는법 !? (IE11)
어떠한 방법이라도 개발자 도구를 막고 싶습니다. 단축키도 막고, 설정도 안 뜨게 하고 싶은데, 단축키 막는 방식은 대략적인 가이드가 존재하지만, 마우스를 통하여 접근 했을떄는 어떻게 막아
okky.kr
그래서 내린 결론은, 어짜피 제 블로그에서 복사 붙여넣기 할 일이 굉장히 많으실텐데 (특히 각종 코드들..) 어짜피 조금만 손쓰면 금방 뚫리는거 스크립트 삽입으로 메시지만 남기기로 했습니다. 출처와 주의사항 정도면 퍼가다가 한번쯤은 멈칫 하지 않을까요 :)
저는 그저 댓글과 출처, 그리고 하트만 남겨주신다면 매우매우매우 만족합니다 :) 감사합니다!
최근댓글