티스토리 블로그 복사 방지 스크립트 (+ 콘솔창 접근 차단 / 드래그방지)

티스토리 블로그 복사 방지 스크립트입니다. 두 개의 스크립트로 구성되어 있으며, 기존에 사용했었습니다. 안 그래도 무거운 티스토리 블로그에 스크립트까지 적용하다 보니 너무 무거운 느낌이 들어 저는 사용하지 않고 있습니다.

만약 자신의 콘텐츠가 보호받고 싶거나 개발자 도구로 접근하는 것을 방지하고자 한다면 아래와 같은 스크립트 코드를 적용해서 접근 진입장벽을 높일 수 있습니다. 아시다시피, 완벽하게 방어할 수 있는 스크립트는 아마 없을 겁니다. 그럼에도 불구하고 프로그래밍이나 간단한 HTML 설정이 어려운 분들이 대부분이기 때문에 상당 부분 복사를 방지할 수 있습니다.

 

복사방지 스크립트 (콘솔창 차단 스크립트 + 드래그 방지)

<!-- 콘솔창 차단 스크립트 -->
<script>
!function() {
  function detectDevTool(allow) {
    if(isNaN(+allow)) allow = 100;
    var start = +new Date(); 
    debugger;
    var end = +new Date(); 
    if(isNaN(start) || isNaN(end) || end - start > allow) {
      // 개발자 도구가 open 된것을 감지했을때 실행할 코드 삽입
      alert('개발자 도구가 감지되었습니다!');
    }
  }
  if(window.attachEvent) {
    if (document.readyState === "complete" || document.readyState === "interactive") {
        detectDevTool();
      window.attachEvent('onresize', detectDevTool);
      window.attachEvent('onmousemove', detectDevTool);
      window.attachEvent('onfocus', detectDevTool);
      window.attachEvent('onblur', detectDevTool);
    } else {
        setTimeout(argument.callee, 0);
    }
  } else {
    window.addEventListener('load', detectDevTool);
    window.addEventListener('resize', detectDevTool);
    window.addEventListener('mousemove', detectDevTool);
    window.addEventListener('focus', detectDevTool);
    window.addEventListener('blur', detectDevTool);
  }
}();
</script>

<!-- 콘솔창 차단 스크립트 끝 -->

<!-- 복사방지 -->
<script>
      var events = ["contextmenu", "selectstart", "dragstart", "copy", "cut"];
      events.forEach(function (event) {
        window.addEventListener(event, blockEvent, true);
      })
      function blockEvent(e) { e.preventDefault(); }
      setInterval(function () { debugger; }, 200);
</script>
<!-- 복사방지 끝 -->

 

어떤 문제가 발생할 수 있나요?

위와 같이 일반적인 스크립트 적용 구간에 해당 스크립트 코드를 삽입하시면 되겠습니다. 그 외에 특별히 설정할 것은 없습니다. 자신의 블로그가 비교적 많은 HTML과 CSS로 구성되어 있고 가벼운 블로그를 원한다면 삽입하지 마세요. 다만, 콘텐츠 보호가 우선이며 블로그가 비교적 가볍다면 설정하셔도 좋습니다.

구글 서치 콘솔 측에서는 웹사이트 또는 블로그의 페이지 경험을 우선시하는 것 같습니다. 이는 두 가지로 나뉘며, 하나는 코어 웹 바이탈이고 또 다른 하나는 모바일 사용 편의성입니다. 코어 웹 바이탈에서도 모바일과 데스크톱으로 나눠지며 가장 중요하게 보는 부분이 바로 속도입니다. 대부분의 경우 CLS 문제(모바일)에서 문제점이 발견 될 가능성이 높습니다.

 

CLS란, Cumlative Layout Shift(누적 레이아웃 이동)입니다. 이러한 문제는 특히 과도한 광고의 적용과 무거운 스크립트 코드 적용으로 인해 발생할 가능성이 상당히 높습니다. 일반적으로 리소스가 비동기식으로 로드되거나 DOM 요소가 기존 콘텐츠 위의 페이지에 동적(구글 애드센스 등)으로 추가되기 때문에 발생합니다.

더 자세한 사항은 이 글을 클릭해서 읽어보시길 바랍니다. 위의 스크립트 코드와는 무관한 내용이지만 사이트를 비교적 가볍게 하는 것이 장기적으로 SEO 최적화 부분에 매우 중요한 부분이라는 것을 염두에 두시고 자신의 블로그를 최대한 가볍고 빠른 속도로 좋은 페이지 경험을 만들고 싶다면 위의 스크립트 코드는 사용하지 마세요.

 

관련 콘텐츠 같이 보기

복사방지 자바스크립트

드래그 방지 마우스우클릭 복사방지 스크립트