UPLOADING...

사진 첨부하는 중...

태그 클라우드로 이동

arc

이니셜라이저

티스토리

crack

함수

SwiftUI

protocol

IF

TextField

struct

바인딩

Break

HTML문법

스킨

반복

Button

ObservedObject

javacript

list

HStack

lottie

강한참조

옵셔널

메서드

foreach

매개변수

css

프로퍼티

javascript

udemy

Binding

프로토콜

HTML

삼항연산자

CLASS

GeometryReader

클로저

SVG

루프

약한참조

궁금한 내용을 검색해보세요!

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

모바일이시라면 클릭

서근 개발노트

서근

홈

방명록

검색

895,690
총 방문자

56
오늘

1,016
어제







여름밤의 꿈 - Part 1

플레이 버튼을 눌러 주세요













꼭 보고 가세요!

SwiftUI 관련 모음집 HOT

Swift 문법 모음집 HOT

Udemy를 한국어로 보는 방법 NEW

카테고리

TREASURE 408

SWIFT 91

Grammar 81

Udemy iOS 10

SWIFTUI 100

Controls 9

View layout 29

Image 8

WebView 4

Others 27

Grammar 22

PROJECT 15

Simple 14

FE 프로젝트 1

USEFUL CODE 7

FRONT-END 110

HTML 16

CSS 17

JAVASCRIPT 31

BAEKJOON 1

VS & GITHUB 7

React 4

ReactJS Clone project 9

TIL 25

CS 0

TIP 49

CSS & Tistory 22

iOS & MacOS TIp 15

Etc Tip 12

ADOBE 3

Photoshop 2

Illustrator 1

ISSUE 5

Info 5

PLAY 26

Music 19

Movie 1

잡담 6

포스팅 체크리스트

Oct

일

월

화

수

목

금

토

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

1

(Javascript)개발자 도구 콘솔창 차단 방법 - 사이트 이동

관리

글쓰기

로그인

로그아웃



콘솔 창 차단 코드 삽입 위치

콘솔 창 차단 코드

특정 기능 추가

Alert 경고 메시지

특정 사이트로 이동

여러 이벤트 추가

결과 확인

서근 개발노트

티스토리에 팔로잉
구독

FRONT-END/JAVASCRIPT

(Javascript)개발자 도구 콘솔창 차단 방법 - 사이트 이동

서근

약 1년 전

QUOTE THE DAY

“ 위대한 과학은 거인의 어깨 위에 거인이 올라선 경우처럼 대단하게 비유된다. 하지만, 소프트웨어 산업은 난쟁이 발가락 위에 난쟁이가 서있는 것처럼 매우 쉽게 이야기 된다. ”

-
Alan Cooper (앨런 쿠퍼)

Written by SEOGUN

목차 

콘솔 창 차단 코드 삽입 위치

콘솔 창 차단 코드

특정 기능 추가

Alert 경고 메시지

특정 사이트로 이동

여러 이벤트 추가

결과 확인

본 게시글은 Ukjin Yang님의 코드를 가져와 기능을 추가한 게시글입니다.

개발자 도구 콘솔 창 차단

오늘은 브라우저의 개발자 도구 콘솔 창을 차단하는 방법에 대해 알아보고 티스토리에 적용하는 방법에 대해 다뤄볼까 합니다.

개발자 도구를 차단하는 이유는 보통 보안 또는 HTML 및 CSS를 숨기고자 하는 이유가 대부분이겠지만 사실은 콘솔 창을 막는 방법은 정상적인 방법이 아닙니다. 그래서 이 기능을 사용하더라도 어떻게는 뚫리기 마련이므로 간단히 사용하는 정도로만 알아두시면 좋을 것 같습니다.

콘솔 창 차단 코드 삽입 위치

Stack Overflow등에도 많은 콘솔 창 차단 코드가 존재하지만, 브라우저가 업데이트되면서 대부분의 코드가 막혀있는 상태입니다. 그렇게 구글링을 한 결과 감사하게도 Ukjin Yang이라는 개발자분께서 만드신 코드를 발견하게 되었습니다.

저는 이 코드 안에 개발자 도구 콘솔 창을 열면 특정 사이트로 이동하는 기능을 넣어보려고 합니다.

코드를 티스토리에 적용하기 전에 스킨 편집에 대한 기초적인 지식이 없으시다면 아래 링크를 통해 확인해주세요.

(티스토리) 스킨 편집 기초 상식

안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스...

seons-dev.tistory.com

콘솔 창 차단 코드를 삽입할 위치는 </body> 바로 위쪽에 넣어주시면 됩니다.

html
UNFOLDED

<html>

<body>

<!---이쪽에 추가-->

</body>

</html>

콘솔 창 차단 코드

html
UNFOLDED

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

<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 된것을 감지했을때 실행할 코드 삽입

}

}

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>

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

이제 주석 처리한 부분에 기능을 추가하기만 하면 됩니다.

특정 기능 추가

Alert와 같은 경고 메시지를 추가할 수도 있고 href와 같은 특정 사이트로 이동하는 기능을 추가할 수 도 있겠네요.

Alert 경고 메시지

만약 경고 메세지를 띄우고 싶으시다면 주석 처리한 부분에 다음 코드를 삽입해주시면 됩니다.

html
UNFOLDED

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

<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>

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

alert('개발자 도구가 감지되었습니다!'); 처럼 괄호 안에 원하시는 문구를 작성해주시면 되겠습니다.

특정 사이트로 이동

만약, 특정 사이트로 이동하시고 싶으시다면 다음과 같은 코드를 작성할 수 있습니다.

html
UNFOLDED

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

<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 된것을 감지했을때 실행할 코드 삽입

document.location.href="https://www.tistory.com/"

}

}

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>

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

document.location.href="https://www.tistory.com/"; 처럼 " " 안에 원하시는 사이트를 작성해주시면 되겠습니다.

여러 이벤트 추가

만약, 여러 이벤트를 넣고 싶으시다면 아래처럼 할 수 있습니다.

html
UNFOLDED

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

<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('개발자 도구가 감지되었습니다!');

document.location.href="https://www.tistory.com/";

}

}

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>

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

결과 확인

이제 결과를 확인해 보시면, 사이트에서 콘솔 창을 열었을 때 디버깅이 일시 정지되며, 일시정지를 풀거나, 콘솔 창을 닫는 순간 특정 사이트 또는 경고 메시지가 나타나게 됩니다.

다시 한번 말씀드리지만 이 방법은 뚫고자 하는 의지가 있으면 뚫릴 수 있으니, 참고 정도만 하시기 바랍니다!

만약 데모 버전을 보고 싶으시다면 Ukjin Yang님의 사이트에서 확인하실 수 있습니다.

Devtools Detector - JSFiddle - Code Playground

...

jsfiddle.net

오늘은 이렇게 개발자 도구 콘솔 창을 차단하는 방법에 대해 알아보고 티스토리에 적용하는 방법에 대해 알아보았습니다.

읽어주셔서 감사합니다🤟

커피 한 잔 선물하기

잘못된 내용이 있으면 언제든 피드백 부탁드립니다.

이 글이 좋으셨다면 구독 & 좋아요

구독과 좋아요를 눌러주시면 저에게 큰 힘이됩니다.

좋아요4

공유하기

페이스북으로 공유카카오스토리로 공유트위터로 공유URL 복사

게시글 관리

구독하기서근 개발노트

저작자표시 비영리 변경금지

'FRONT-END > JAVASCRIPT' 카테고리의 다른 글

(JAVASCRIPT) ESMAScript란? ES6 / ES7  (2)

2022.08.02

JAVASCRIPT 관련 모음  (0)

2022.08.02

(티스토리) 태그 쉼표 제거 하는 방법 - Javascript  (1)

2022.07.02

(Javascript) HTML SVG파일에 원하는 색상 적용하는 방법  (0)

2022.06.30

(티스토리) 버튼 클릭 한 번으로 내가 원하는 위치 이동하는 방법 (플로팅버튼)  (17)

2022.03.25

이전 글

(티스토리) 태그 쉼표 제거 하는 방법 - Javascript

다음 글

JAVASCRIPT 관련 모음

누락되었거나 수정해야 할 부분은 이곳으로 메일 부탁드립니다.😃

Written by

SEOGUN

안녕하세요! 저는 프론트엔드 를 위주로 개발을 하는 개발자 입니다. 조언해주실 부분이 있으시면 언제든 이메일 부탁드립니다.

GitHub

Seogun.blog

Email

'FRONT-END/JAVASCRIPT' 카테고리의 관련 포스팅

1년 전

(JAVASCRIPT) ESMAScript란? ES6 / ES7

1년 전

JAVASCRIPT 관련 모음

1년 전

(티스토리) 태그 쉼표 제거 하는 방법 - Javascript

1년 전

(Javascript) HTML SVG파일에 원하는 색상 적용하는 방법

더보기

티스토리 댓글

1 개

깃허브 댓글

비밀글모드작성자와 관리자만 열람 가능합니다.

댓글에 사진을 첨부해 보세요 😀

익명

비밀댓글입니다.

5개월 전

서근

위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.

최근 댓글

NEW

궁금한 점이 있습니다.
위에 공유해주신 코드를 CSS 가장 아래쪽에 삽입해서 사용하니,
이전에 커스텀했던 코드블럭까지 적용이 되네요
코드블럭과 인라인 코드블럭 각각 따로 커스텀하는 방법은 없을까요?

Graffitio

진짜 너무 감사합니다!! 바로 해결했어요 ㅠㅡㅠ
키보드 물리적 문제인 줄 알았는데 다행이네요 ꒰´꒳`∗꒱

진짜 너무 감사합니다!! 바로 해결했어요 ㅠㅡㅠ
키보드 물리적 문제인 줄 알았는데 다행이네요 ꒰´꒳`∗꒱

꿀팁 감사합니다~

ggasoon2

감사합니다.

dd

최근 글

NEW

ChatGPT를 이용한 Github Action코드 리뷰 자동화 방법
5개월 전

[ WIL ] 23/02/13 ~ 23/02/19
8개월 전

[ WIL ] 23/02/06 ~ 23/02/12
8개월 전

[React] - 컴포넌트 (함수형 / 클래스형)
8개월 전

[React] - CRA(Create React App) 생성 방법
8개월 전

인기 글
HOT

(macOS) 맥북 한/영 전환 키 오류 해결 방법
2년 전

마블 영화 순서 - 마블 세계관 및 예정작 2022년 (사이트 링크 포함)
1년 전

(macOS) 맥북 CPU 발열 주범 nProtect 완전 삭제 하는법 (nosintgdmn)
2년 전

(CSS) display: flex에 여러 요소가 있을때 좌우 정렬 하는 방법
1년 전

[맥북] 패러렐즈 한영전환 및 맥 키보드와 동일하게 설정
1년 전

블로그 운영

999

일째

TRANSLATION

한국어 (기본)

English

Русский

日本語

언어 선택갈리시아어과라니어구자라트어그리스어네덜란드어네팔어노르웨이어덴마크어도그리어독일어디베히어라오어라트비아어라틴어러시아어루간다어루마니아어룩셈부르크어리투아니아어링갈라어마라티어마오리어마이틸어마케도니아어말라가시어말라얄람어말레이어메이테이어(마니푸르어)몰타어몽골어몽어미얀마어(버마어)미조어바스크어밤바라어베트남어벨라루스어벵골어보스니아어보즈푸리어북소토어불가리아어사모아어산스크리트세르비아어세부아노어세소토어소말리아어쇼나어순다어스와힐리어스웨덴어스코틀랜드 게일어스페인어슬로바키아어슬로베니아어신디어싱할라어아랍어아르메니아어아삼어아이마라어아이슬란드어아이티 크리올어아일랜드어아제르바이잔어아프리칸스어알바니아어암하라어에스토니아어에스페란토어에웨어영어오로모어오리야어요루바어우르두어우즈베크어우크라이나어웨일즈어위구르어이그보어이디시어이탈리아어인도네시아어일로카노어일본어자바어조지아어줄루어중국어(간체)중국어(번체)체와어체코어총가어카자흐어카탈로니아어칸나다어케추아어코르시카어코사어콘칸어쿠르드어(소라니)쿠르드어(쿠르만지)크로아티아어크리오어크메르어키냐르완다어키르기스어타밀어타지크어타타르어태국어터키어텔루구어투르크멘어트위어티그리냐어파슈토어펀자브어페르시아어포르투갈어폴란드어프랑스어프리지아어핀란드어필리핀어하와이어하우사어헝가리어히브리어힌디어
번역에서 제공

서근 © 2022

Mynem Skin

Gmail

KakaoTalk

GitHub

Discord

미니게임



한국어 (기본)

English

Русский

日本語

👉🏻 잠깐만요! 이 글도 한 번 보고 가세요

이전글

다음글

티스토리툴바

서근 개발노트구독하기

원본 텍스트

번역 평가

보내주신 의견은 Google 번역을 개선하는 데 사용됩니다.