JS 브 라 우 저 개발 자 도구 가 열 렸 는 지 확인 하 는 방법 에 대한 자세 한 설명
11263 단어 JS 검색 브 라 우 저개발 자 도구
1.다시 쓰기 toString()
일부 브 라 우 저,예 를 들 어 Chrome,FireFox 는 콘 솔 이 대상 으로 출력 되면 대상 의 인용 을 보류 하고 개발 자 도 구 를 열 때마다 대상 의 toString()방법 을 다시 호출 하여 결 과 를 콘 솔(console tab)에 출력 합 니 다.
따라서 하나의 대상 을 만 들 고 toString()방법 을 다시 쓴 다음 페이지 가 초기 화 될 때 콘 솔 에 인쇄 해 야 합 니 다.(여기 서 콘 솔 이 아직 열 리 지 않 았 다 고 가정 합 니 다)사용자 가 콘 솔 을 열 때 이 대상 의 toString()방법 을 다시 호출 하면 사용자 가 콘 솔 을 여 는 행위 가 포 착 됩 니 다.
다음은 크롬 사용자 의 개발 자 도구 상태 가 닫 힌 상태 에서 열 린 상태 로 전 이 될 때 이 동작 은 캡 처 되 어 리 셋 함수 에 의 해 처 리 됩 니 다.
<html>
<head>
<title>console detect test</title>
</head>
<body>
<script>
/**
*
*/
function consoleOpenCallback(){
alert("CONSOLE OPEN");
return "";
}
/**
* ，
*/
!function () {
//
let foo = /./;
// ，
console.log(foo);
// toString
foo.toString = consoleOpenCallback;
}()
</script>
</body>
</html>
이 페이지 에서 콘 솔 을 처음 열 었 을 때 검 측 이 실 행 됩 니 다.그러나 콘 솔 이 열 린 창 에 사이트 주 소 를 붙 여 넣 는 접근 이 실 행 될 수 없습니다.마찬가지 로 이 페이지 에서 콘 솔 이 열 렸 을 때 새로 고침 이 실 행 될 수 없습니다.
이런 방식 은 비교적 교묘 하지만 통용 성 이 없고 개발 자 도구 가 닫 힌 상태 에서 열 린 상태 로 이동 하 는 과정 만 포착 할 수 있어 한계 가 있다.
디 버 거
코드 의 정지점 과 유사 합 니 다.브 라 우 저 는 개발 자 도 구 를 열 때(코드 디 버 깅 에 대응 하 는 debug 모드)debugger 태그(프로그램의 정지점 에 해당 함)를 감지 할 때 프로그램의 실행 을 중단 합 니 다.
이때 파란색'Resume script execution'프로그램 을 눌 러 야 계속 실 행 될 수 있 습 니 다.이 중간 에 일정한 시간 차 가 있 을 것 입 니 다.이 시간 차 가 일정한 값 보다 크다 고 판단 하면 개발 자 도 구 를 열 었 다 고 생각 합 니 다.이 방법 은 개발 자 도 구 를 열지 않 았 을 때 debugger 태그 가 멈 추 지 않 기 때문에 좋 고 유 니 버 설 적 입 니 다.
다음은 debugger 탭 을 사용 하여 개발 자 도구 가 열 렸 는 지 확인 하 는 예 입 니 다.
<html>
<head></head>
<body>
<script>
function consoleOpenCallback() {
alert("CONSOLE OPEN");
}
!function () {
const handler = setInterval(() => {
const before = new Date();
debugger;
const after = new Date();
const cost = after.getTime() - before.getTime();
if (cost > 100) {
consoleOpenCallback();
clearInterval(handler)
}
}, 1000)
}();
</script>
</body>
</html>
그러나 위의 코드 에 심각 한 bug 가 있 습 니 다.debugger 줄 을 실행 할 때 사용자 가 고양이 가 resume script execution 단 추 를 누 르 지 않 고 페이지 를 종료 하 는 것 을 발견 하면 이번 개발 자 도구 줄 을 감지 할 수 없습니다.실제 결 과 는 예상 과 다 릅 니 다.심각 한 bug 라 고 생각 합 니 다.영화 에서 연기 하 는 것 처럼 지뢰 를 밟 고 발 을 들 지 않 으 면 살 수 있 는 기회 가 있다 는 것 을 알 게 되 었 습 니 다.debugger 라벨 에 이 르 러 서 는 콘 솔 이 열 렸 는 지 확인 하 는 코드 라 는 것 을 알 게 되 었 습 니 다.제 가 물 러 나 서 다른 수단 으로 그것 을 돌 렸 습 니 다.그러면 저 는 가짜 기능 을 했 을 것 입 니 다.
주의해 야 할 점 은 이 방법 을 사용 할 때 debugger 태그 에 카드 가 걸 렸 을 때 사용 자 는 debugger 태그 근처 의 코드 를 볼 수 있 습 니 다.경험 이 있 는 사용자 라면 한눈 에 안의 도 로 를 알 수 있 기 때문에 실제 항목 을 숨 기 는 방법 을 강구 해 야 합 니 다.예 를 들 어 debugger 라벨 을 숨 기 고 코드 를 헷 갈 리 게 하여 읽 기 어렵 게 해 야 합 니 다.debugger 태그 의 앞 뒤 논 리 를 어떻게 숨 기 는 지 에 대해 서 는 이 몇 개의 사 이 트 를 참고 할 수 있 습 니 다.(현재 2018-7-4 23:12:17 유효 합 니 다)
http://app2.sfda.gov.cn/datasearchp/gzcxSearch.do?formRender=cx&optionType=V1
https://www.qimai.cn/
이 프로젝트 를 사용 하면 debugger 가 멈 추 지 않 을 수도 있 습 니 다.예 를 들 어 Chrome 브 라 우 저의 source 패 널 은 debugger 문 구 를 선택 할 때 멈 추 지 않 을 수도 있 습 니 다.
이 버튼 이 켜 지면 위의 웹 페이지 를 테스트 하면 비극 적 인 검색 코드 가 효력 을 잃 었 습 니 다.debugger 태그 가 멈 추 지 않 았 기 때 문 입 니 다.
사실 debugger 라벨 은 또 다른 묘용 이 있 습 니 다.예 를 들 어 디 버 깅 을 반대 하 는 데 사용 할 수 있 습 니 다.1 초 에 debugger 를 촉발 시 켜 디 버 깅 자 를 debugger 에 대처 하거나 추가 비용 을 들 여 JS 를 덮어 쓸 수 있 도록 설정 할 수 있 습 니 다.위 에 제 시 된 몇 개의 사 이 트 는 바로 이렇게 합 니 다.
다음은 debugger 탭 을 사용 하여 js 디 버 깅 을 반대 하 는 간단 한 예 입 니 다.
<html>
<head>
<title>Anti debug</title>
</head>
<body>
<script>
!function () {
setInterval(() => {
debugger;
}, 1000);
}();
</script>
</body>
</html>실제 적 인 예 를 들 어 이 사이트:http://jxw.uou0.com/의 js 검 측 스 크 립 트 는 서로 다른 상황 에 대해 서로 다른 반전 시험 전략 을 가지 게 될 것 이다.
재현 하려 면 동 영상 주 소 를 붙 여 분석 한 후에 야 검 측 스 크 립 트 를 불 러 올 수 있 습 니 다.예 를 들 어 이 동 영상 을 분석 해 볼 수 있 습 니 다.http://film.qq.com/film/p/topic/thwjlxby/index.html
개발 자 도 구 를 열지 않 고 분석 한 다음 개발 자 도 구 를 열 면 다음 과 같은 검 측 방식 을 사용 합 니 다.
!function() {
var timelimit = 50;
var open = false;
setInterval(function() {
var starttime = new Date();
debugger ;if (new Date() - starttime > timelimit) {
open = true;
window.stop();
$("#loading").hide();
$("#a1").remove();
$("#error").show();
$("#error").html("\u7cfb\u7edf\u68c0\u6d4b\u975e\u6cd5\u8c03\u8bd5\u002c\u8bf7\u5237\u65b0\u91cd\u8bd5\u0021")
} else {
open = false
}
}, 500)
}();
개발 자 도 구 를 열 고 주 소 를 붙 여 영상 분석 을 하면 무한 debugger 가 실 행 됩 니 다.
물론 위의 스 크 립 트 에 대처 하 는 가장 쉬 운 방법 은 Chrome 브 라 우 저 를 Deactive breakpoint 로 설정 하 는 것 입 니 다.위의 스 크 립 트 는 쉬 게 됩 니 다.하지만 이 경우 자신 도 디 버 깅 을 할 수 없습니다.반대 테스트 를 통 해 맞은편 에 있 는 녀석 들 을 구역질 나 게 할 수 있 습 니 다.좋 은 방법 은 Fiddler 를 사용 하여 웹 페이지 의 반환 내용 을 수정 하여 debugger 라벨 을 걸 러 내 면 이 방법 을 완벽 하 게 풀 수 있 습 니 다.
3.창 크기 측정
창 크기 를 검사 하 는 것 이 간단 합 니 다.먼저 두 가지 개념 을 명 확 히 해 야 합 니 다.창의 outer 크기 와 inner 크기:
window.inner Width/window.inner Height:시각 영역 너비,window.inner Width 는 수직 스크롤 바 의 폭 을 포함 하고 window.inner Height 는 수평(가로)스크롤 바 의 폭 을 포함 합 니 다.
window.outer Width/window.outer Height:inner Width 와 inner Height 를 바탕 으로 도구 막대 의 폭 을 추가 합 니 다.
창 크기 를 검사 하 는 데 있어 서 더 이상 예 를 쓰 지 않 습 니 다.어떤 사람 은 이것 에 대해 라 이브 러 리 를 썼 습 니 다.https://github.com/sindresorhus/devtools-detect수백 개의 star 는 저 같은 슬 래 그 슬 래 그 슬 래 그 보다 훨씬 좋 습 니 다.코드 가 비교적 간단 합 니 다.사용 부분 은 github 에 대한 설명 이 있 습 니 다.여 기 는 그 핵심 코드 만 분석 하고 여기 저 는 이 라 이브 러 리 의 핵심 코드 에 대한 분석 을 붙 입 니 다.
/* eslint-disable spaced-comment */
/*!
devtools-detect
Detect if DevTools is open
https://github.com/sindresorhus/devtools-detect
by Sindre Sorhus
MIT License
comment by CC11001100
*/
(function () {
'use strict';
var devtools = {
open: false,
orientation: null
};
// inner outer threshold
var threshold = 160;
// ， ， ，
var emitEvent = function (state, orientation) {
window.dispatchEvent(new CustomEvent('devtoolschange', {
detail: {
open: state,
orientation: orientation
}
}));
};
// 500 ，
setInterval(function () {
var widthThreshold = window.outerWidth - window.innerWidth > threshold;
var heightThreshold = window.outerHeight - window.innerHeight > threshold;
var orientation = widthThreshold ? 'vertical' : 'horizontal';
// ，heightThreshold widthThreshold true， false false true， true
if (!(heightThreshold && widthThreshold) &&
// Firebug
((window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized) || widthThreshold || heightThreshold)) {
// ， ，
if (!devtools.open || devtools.orientation !== orientation) {
emitEvent(true, orientation);
}
devtools.open = true;
devtools.orientation = orientation;
} else {
// ，
if (devtools.open) {
emitEvent(false, null);
}
//
devtools.open = false;
devtools.orientation = null;
}
}, 500);
if (typeof module !== 'undefined' && module.exports) {
module.exports = devtools;
} else {
window.devtools = devtools;
}
})();1.window 속성 을 사용 하여 크기 를 검사 하면 브 라 우 저 호환성 문제 가 있 을 수 있 습 니 다.전문 전단 이 아니 라 Chrome 과 ff 만 테스트 한 것 은 문제 가 없 기 때 문 입 니 다.
2.이 방안 은 아직도 구멍 이 있 습 니 다.Chrome 브 라 우 저 에 있어 개발 자 도구 창 은 네 가지 옵션 이 있 습 니 다.단독 창,왼쪽,아래,오른쪽 입 니 다.
왼쪽,오른쪽,아래쪽 모두 현재 창의 일부 공간 을 차지 합 니 다.이러한 상황 은 감지 되 지만 독립 된 창 은 웹 창 을 여 는 공간 을 차지 하지 않 기 때문에 이러한 상황 은 감지 되 지 않 습 니 다.이 페이지 에 가서 검증 할 수 있 습 니 다.https://sindresorhus.com/devtools-detect/
총화
본 고 는 몇 가지 검 측 방식 을 소 개 했 는데 각각 장단 점 이 있 고 다음은 그 단점 에 대한 간단 한 정리 이다.
toString 재 작성():개발 자 도구 가 닫 힌 상태 에서 열 린 상태 로 이동 하 는 과정 만 포착 할 수 있 습 니 다.
debugger 태그:Chrome 브 라 우 저의 Deactive breakpoint
를 선택 하면 debugger 태그 가 멈 추 지 않 고 캡 처 되 지 않 습 니 다.창 크기 감지:개발 자 도구 가 독립 된 창 으로 열 렸 을 때 감지 할 수 없습니다.
좋은 웹페이지 즐겨찾기
