ab-c-d/$복사금지 설명서.md

## $복사금지 설명서.md

      
    Raw
  

              $복사금지 설명서.md
            
          
    블로그, 웹사이트에서 복사 금지 설정 - 자바스크립트 비활성화로 해제 불가

코드 링크
코드가 적용된 예제 페이지
티스토리 등에서 개인 블로그를 운영하시는 분들, 쇼핑몰 웹사이트를 운영하시는 분들은 타인이 글, 이미지를 복사하여 자신의 것처럼 사용하는 것에 민감하실 거에요. 구글링하면 우클릭 차단 스크립트가 여러 가지 나와서 적용한 사이트를 많이 보게 되는데요, 그런데 역시 우클릭 차단 해제로 검색하면 나오는 다양한 파훼법들로 쉽게 해제가 되는 것이 사실이죠.
이런 파훼법 중 가장 확실한 것이 개발자 도구를 열어 자바스크립트를 비활성화 시키는 것인데요, 이 경우에도 저작권 안내 메세지를 띄울 수 있도록 이미 존재하는 스크립트를 수정해 보았어요.
사용법


message.html 에서 사용자에게 보여주고 싶은 메세지 내용을 직접 수정

사이트의 배경 색에 따라, 메세지의 배경 색 CSS를 그에 맞게 조정해 주어야 해요.


적용하고자 하는 웹사이트의 <body> 태그의 직후에, 위 block-copy.html 과 message.html 을 순서대로 붙여넣기

block-copy.html 의 내용이 먼저 와야 해요.
티스토리의 경우, [블로그 관리] > [꾸미기] > [스킨 편집] > [HTML 편집] 에서 body 태그를 찾아 붙여 넣으시면 돼요.


만약 HTML을 다룰 줄 아시는 분이라면, 이 코드에서 <script> 부분만 빼서 </body> 직전에 붙여넣으시면 더 좋아요.

포함된 기능


복사, 드래그, 우클릭 차단
개발자 도구를 여는 거의 대부분의 방법을 차단
자바스크립트를 비활성화 할 시 메세지 띄우기
pig toolbox 등 잘 알려진 브라우저 확장 프로그램 실행 시 메세지 띄우기

3, 4에서 메세지를 띄울 때는 화면 전체에 투명한 레이어를 씌워 추가적인 드래그를 차단해요. 만약 메세지는 띄우지 않고 차단만 하고 싶다면 message.html에서 span 안의 글을 모두 지우면 돼요.
만약 웹사이트의 첫 방문시부터 자바스크립트가 차단되어 있었다면, 저작권 관련 메세지 대신 자바스크립트를 사용하라는 메세지를 띄우고, 웹사이트의 다른 컨텐츠는 가려지게 돼요.
4번은 몇몇 잘 알려진 확장 프로그램에 대해서만 테스트 되었어요. 만약 확장 프로그램을 사용해도 복사방지가 뚫리지 않았을 경우에는 메세지가 안 뜰 수도 있어요.
이런게 어케 가능한거죠??


    웹마스터, 개발자를 위해
    CSS `animation`, `keyframe`과 Javascript를 이용한 CSS 컨트롤을 이용해요. 일정 시간이 지난 후 특정 요소를 사용자에게 보여주는 CSS animation을 이용하고, Javascript를 이용해 이 animation을 주기적으로 리셋 시켜요.
    animation을 리셋시키는 것은 https://css-tricks.com/restart-css-animation/ 글을 참고 바라요. 단 이 링크의 `.offsetWidth` 를 이용한 방법은 IE에서 delay가 설정된 animation이 delay까지 리셋되지 않는 문제가 있어 사용하기 어려워요.
    

    사용자가 다른 탭으로 전환하는 등 페이지가 숨겨질 경우 `setInterval` 이 throttle 되어 자바스크립트가 비활성화 된 것과 같은 효과가 있어요. 따라서 페이지가 숨겨질 경우 animation 리셋을 정지하게 돼요. https://developer.chrome.com/blog/timer-throttling-in-chrome-88/ 글을 참고하세요.


## .message.html
<!---------------------------------------------------------------
    저작권 안내 메세지, <span> 내의 글을 원하는 대로 수정하세요.
---------------------------------------------------------------->
<div>
    <div class="cm-overlay cm-no-js"></div>
    <div id="Copyright_Message" class="cm-overlay cm-hide">
        <span>
            복제를 금지하는 사이트에서 콘텐츠를 복사해 사용하려 하고 있습니다. <br>
            이 콘텐츠를 블로그나 웹사이트의 콘텐츠로 사용하면 저작권 문제로 처벌 받을 수 있습니다.
        </span>
        <noscript class="cm-no-js">
            <!-- 자바스크립트 비활성화 시에 보여지는 메세지 -->
            <span>
                이 페이지를 보기 위해서는 자바스크립트가 필요합니다. <br>
                사이트 설정에서 자바스크립트를 사용하도록 설정해주세요.
            </span>
        </noscript>
    </div>
    <!---------------------------------------------------------------
        아래 CSS를 수정하여 메세지의 스타일을 변경하세요.
    ---------------------------------------------------------------->
    <style>
        #Copyright_Message span {
            font-size: 15px;
            font-family: sans-serif;
            position: fixed;
            width: 500px;
            max-width: 90%;
            top: 50%;
            left: 50%;
            margin-left: -250px;
            margin-top: -100px;

            border-radius: 10px;
            box-shadow: 0px 0px 34px 2px rgba(242, 191, 191, 1);
            padding: 10px 10px 10px 35px;

            line-height: 1.5;
            color: #555;

            background: #ffecec url('https://tistory4.daumcdn.net/tistory/770263/skin/images/warning.png') no-repeat 10px 50%;
            border: 1px solid #f5aca6;
        }
    </style>
</div>

## block-copy.html
<!-- 이하의 내용은 그대로 붙여 넣으세요. -->
<script>
    (function () {
        //=================================================================================
        // 우클릭, 드래그, 복사 차단
        //=================================================================================
        var events = ["contextmenu", "selectstart", "dragstart", "copy", "cut"];

        events.forEach(function (event) {
            window.addEventListener(event, blockEvent, true);
        })

        function blockEvent(e) { e.preventDefault(); }
        //=================================================================================
        // 개발자 메뉴 (F12) 차단
        //=================================================================================
        window.addEventListener('keydown', blockDeveloperMenu, true);

        function blockDeveloperMenu(e) {
            if (e.keyCode === 123) { // F12
                blockEvent(e);
            }
            if (e.ctrlKey && e.shiftKey) {
                var code = e.keyCode;
                // 개발자 도구를 여는 Ctrl + Shift + 키 조합
                if (code === 67 || code === 69 || code === 73 || code === 74 || code === 75 || code === 77 || code === 83) {
                    blockEvent(e);
                }
            }
        }

        setInterval(function () { debugger; }, 200);
        //=================================================================================
        // 애드온 (pig toolbox 등) 차단
        //=================================================================================
        var event, received = false;

        refreshEvent();

        window.addEventListener("contextmenu", function (e) {
            if (e === event) { received = true; }
        }, true);

        setInterval(function () {
            received = false;
            window.dispatchEvent(event);
            received ? hideMessage() : showMessage();
            refreshEvent();
        }, 200);

        function refreshEvent() {
            if (event && !event.cancelBubble) { return; }
            event = document.createEvent("MouseEvents");
            event.initMouseEvent("contextmenu", true, true, window, 1, 50, 121, 50, 50, false, false, false, false, 2, null);
        }
        //=================================================================================
        // 자바스크립트 비활성화 (Disable Javascript) 시 메세지 띄우기
        //=================================================================================
        var timer = null;
        function showMessage() {
            clearInterval(timer); timer = null;
        }
        function hideMessage() {
            if (timer === null) { timer = setInterval(reveal, 450); }
        }
        function reveal() {
            cl().toggle("cm-hide");
            cl().toggle("cm-hide-2");
        }
        function cl() { return Copyright_Message.classList; }

        window.addEventListener('visibilitychange', function() {
            // 페이지가 숨겨질 시 animation을 정지함
            if (document.visibilityState === "hidden") {
                cl().remove("cm-hide", "cm-hide-2");
                void Copyright_Message.offsetWidth;
                showMessage();
            } else {
                cl().add("cm-hide");
                cl().remove("cm-hide-2");
                hideMessage();
            }
        }, true);

        hideMessage();
    })();
</script>
<!---------------------------------------------------------------
    자바스크립트 비활성화 후 새로고침 시 메세지 띄우기
---------------------------------------------------------------->
<noscript>
    <style>
        #Copyright_Message>span { display: none; }
        .cm-no-js { background: white; visibility: visible!important; }
    </style>
</noscript>
<!---------------------------------------------------------------
    드래그 차단
---------------------------------------------------------------->
<style>
    *:not(input):not(textarea):not(code):not(blockquote):not(pre) {
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-touch-callout: none !important;
    }
</style>
<!-- 저작권 메세지 CSS -->
<style>
    .cm-overlay {
        height: 100%;
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        overflow-x: hidden;
        z-index: 2147483647;
    }

    #Copyright_Message, .cm-no-js { visibility: hidden; }

    #Copyright_Message.cm-hide {
        animation: 1s cm-reveal 500ms forwards;
    }
    #Copyright_Message.cm-hide-2 {
        animation: 1s cm-reveal-2 500ms forwards;
    }

    @keyframes cm-reveal {
        from { opacity: 0; visibility: visible; }
        to { opacity: 1; visibility: visible; }
    }
    @keyframes cm-reveal-2 {
        from { opacity: 0; visibility: visible; }
        to { opacity: 1; visibility: visible; }
    }

    @media print { noscript { display: none; } }
</style>
	<!---------------------------------------------------------------
	저작권 안내 메세지, <span> 내의 글을 원하는 대로 수정하세요.
	---------------------------------------------------------------->
	<div>
	<div class="cm-overlay cm-no-js"></div>
	<div id="Copyright_Message" class="cm-overlay cm-hide">
	<span>
	복제를 금지하는 사이트에서 콘텐츠를 복사해 사용하려 하고 있습니다. <br>
	이 콘텐츠를 블로그나 웹사이트의 콘텐츠로 사용하면 저작권 문제로 처벌 받을 수 있습니다.
	</span>
	<noscript class="cm-no-js">
	<!-- 자바스크립트 비활성화 시에 보여지는 메세지 -->
	<span>
	이 페이지를 보기 위해서는 자바스크립트가 필요합니다. <br>
	사이트 설정에서 자바스크립트를 사용하도록 설정해주세요.
	</span>
	</noscript>
	</div>
	<!---------------------------------------------------------------
	아래 CSS를 수정하여 메세지의 스타일을 변경하세요.
	---------------------------------------------------------------->
	<style>
	#Copyright_Message span {
	font-size: 15px;
	font-family: sans-serif;
	position: fixed;
	width: 500px;
	max-width: 90%;
	top: 50%;
	left: 50%;
	margin-left: -250px;
	margin-top: -100px;

	border-radius: 10px;
	box-shadow: 0px 0px 34px 2px rgba(242, 191, 191, 1);
	padding: 10px 10px 10px 35px;

	line-height: 1.5;
	color: #555;

	background: #ffecec url('https://tistory4.daumcdn.net/tistory/770263/skin/images/warning.png') no-repeat 10px 50%;
	border: 1px solid #f5aca6;
	}
	</style>
	</div>
	<!-- 이하의 내용은 그대로 붙여 넣으세요. -->
	<script>
	(function () {
	//=================================================================================
	// 우클릭, 드래그, 복사 차단
	//=================================================================================
	var events = ["contextmenu", "selectstart", "dragstart", "copy", "cut"];

	events.forEach(function (event) {
	window.addEventListener(event, blockEvent, true);
	})

	function blockEvent(e) { e.preventDefault(); }
	//=================================================================================
	// 개발자 메뉴 (F12) 차단
	//=================================================================================
	window.addEventListener('keydown', blockDeveloperMenu, true);

	function blockDeveloperMenu(e) {
	if (e.keyCode === 123) { // F12
	blockEvent(e);
	}
	if (e.ctrlKey && e.shiftKey) {
	var code = e.keyCode;
	// 개발자 도구를 여는 Ctrl + Shift + 키 조합
	if (code === 67 \|\| code === 69 \|\| code === 73 \|\| code === 74 \|\| code === 75 \|\| code === 77 \|\| code === 83) {
	blockEvent(e);
	}
	}
	}

	setInterval(function () { debugger; }, 200);
	//=================================================================================
	// 애드온 (pig toolbox 등) 차단
	//=================================================================================
	var event, received = false;

	refreshEvent();

	window.addEventListener("contextmenu", function (e) {
	if (e === event) { received = true; }
	}, true);

	setInterval(function () {
	received = false;
	window.dispatchEvent(event);
	received ? hideMessage() : showMessage();
	refreshEvent();
	}, 200);

	function refreshEvent() {
	if (event && !event.cancelBubble) { return; }
	event = document.createEvent("MouseEvents");
	event.initMouseEvent("contextmenu", true, true, window, 1, 50, 121, 50, 50, false, false, false, false, 2, null);
	}
	//=================================================================================
	// 자바스크립트 비활성화 (Disable Javascript) 시 메세지 띄우기
	//=================================================================================
	var timer = null;
	function showMessage() {
	clearInterval(timer); timer = null;
	}
	function hideMessage() {
	if (timer === null) { timer = setInterval(reveal, 450); }
	}
	function reveal() {
	cl().toggle("cm-hide");
	cl().toggle("cm-hide-2");
	}
	function cl() { return Copyright_Message.classList; }

	window.addEventListener('visibilitychange', function() {
	// 페이지가 숨겨질 시 animation을 정지함
	if (document.visibilityState === "hidden") {
	cl().remove("cm-hide", "cm-hide-2");
	void Copyright_Message.offsetWidth;
	showMessage();
	} else {
	cl().add("cm-hide");
	cl().remove("cm-hide-2");
	hideMessage();
	}
	}, true);

	hideMessage();
	})();
	</script>
	<!---------------------------------------------------------------
	자바스크립트 비활성화 후 새로고침 시 메세지 띄우기
	---------------------------------------------------------------->
	<noscript>
	<style>
	#Copyright_Message>span { display: none; }
	.cm-no-js { background: white; visibility: visible!important; }
	</style>
	</noscript>
	<!---------------------------------------------------------------
	드래그 차단
	---------------------------------------------------------------->
	<style>
	*:not(input):not(textarea):not(code):not(blockquote):not(pre) {
	user-select: none !important;
	-webkit-user-select: none !important;
	-webkit-touch-callout: none !important;
	}
	</style>
	<!-- 저작권 메세지 CSS -->
	<style>
	.cm-overlay {
	height: 100%;
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	overflow-x: hidden;
	z-index: 2147483647;
	}

	#Copyright_Message, .cm-no-js { visibility: hidden; }

	#Copyright_Message.cm-hide {
	animation: 1s cm-reveal 500ms forwards;
	}
	#Copyright_Message.cm-hide-2 {
	animation: 1s cm-reveal-2 500ms forwards;
	}

	@keyframes cm-reveal {
	from { opacity: 0; visibility: visible; }
	to { opacity: 1; visibility: visible; }
	}
	@keyframes cm-reveal-2 {
	from { opacity: 0; visibility: visible; }
	to { opacity: 1; visibility: visible; }
	}

	@media print { noscript { display: none; } }
	</style>