모바일과 PC에서 이미지 다운로드 방지하는 방법과 우클릭 방지
사실상 이미지 다운로드를 원천봉쇄하는 방법은 없습니다.
구글에 우클릭 해제, 이미지 다운로드 금지 해제 등으로 검색만 해봐도 팁이 어마어마하게 많아요.
완벽히 막을 수 없지만 이미지 다운로드를 시도할 때 불편함을 주는 방법으로 귀엽게 반항해봅시다. 다운로드를 시도하다 불편함을 느끼고 포기하는 방문자도 있을 수 있으니까요!
1. 모바일에서 이미지 다운로드 방지하기
길게 터치해서 나오는 이미지 저장 툴바를 나오지 않게 하는 방법입니다.
iOS
스타일 시트에 다음을 추가합니다.
/* 아이폰 이미지 저장 방지 */
body { -webkit-touch-callout:none;}
Android
html 파일 <head></head> 사이에 추가합니다.
<script type="text/javascript">
// 안드로이드 우측 버튼 비활성
$(document).bind("contextmenu", function (e) {
return false;
});
</script>
2. PC에서 이미지 다운로드 방지하기
이미지를 우 클릭했을 때 이미지 다른 이름으로 저장 기능 없애기
스타일 시트에 추가합니다.
.img {pointer-events : none;}
<video> 태그에 해봤는데 적용은 되지만 재생 버튼이 안눌립니다.
3. 드래그, 우클릭, 선택 금지
html 파일 <body> 태그에 적용하는 방법
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
contextmenu="return false" → 우 클릭 방지
ondragstart="return false" → 드래그 방지
onselectstart="return false" → 선택 방지
스타일 시트에 선택 금지 적용하는 방법
body {
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}
스크립트로 선택, 드래그, 우클릭 금지 적용하는 방법
<script type="text/javascript">
document.oncontextmenu=function(){return false;}
document.onselectstart=function(){return false;}
document.ondragstart=function(){return false;}
document.onmousedown=function(){return false;}
</script>
3-1. 우클릭 금지한 사이트에서 특정 구간만 복사 가능하게 허용
소스코드를 게시한 블로그 중에 드래그 금지가 되어 있는 블로그를 정말 많이 봤습니다. 너무 불편하더라고요.
소스코드만 선택이 가능하도록 할 수 있습니다.
스타일 시트에 적용하는 방법
code {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
또는
pre {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
반대로 특정 구간만 우클릭 금지가 되도록 할 수도 있습니다.
예를 들어 이미지만 금지가 되도록 해봅니다.
스타일 시트에 적용하는 방법
img {
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}
스크립트로 적용하는 방법
<script type="text/javascript">
//이미지만 우클릭 비활성
$(document).ready(function() {
$('img').bind("contextmenu",function(e){
return false;
});
});
</script>
4. 개발자 모드 F12 버튼 비활성화하기
<script type="text/javascript">
//F12 개발자도구 비활성
$(document).bind('keydown',function(e){
if ( e.keyCode == 123) {
e.preventDefault();
e.returnValue = false;
}
});
</script>
위 방법중에 적당한 것을 블로그나 사이트에 맞게 사용하면 됩니다.
모바일에서 다운로드 기능 비활성은 다운로드 트래픽 절감에 도움이 될 거예요!
하지만 불펌을 차단하는 방법이라고는 할 수 없죠. 캡처를 하는 방법도 있으니까요.
PC는 뭐... 워낙에 뚫고 퍼가는 팁들이 난무하기 때문에.. 약간의 불편함을 주면서 저항하는 것이라고 생각하면 될 듯 합니다!ㅎㅎ
