Fxxking the disable-devtools
Thu May 16 2024
# Fxxking the disable-devtools
某大专的网站居然还用上了这个脏东西,怎么会是呢?简单分析了一下检测原理,并尝试寻找一个通解
## 分析
### date-to-string
this.date.toString = () => {
this.count ++; // 如果这个对象被 devtools 加载出来,会触发 count++
return '';
};
可能的解决方案:hook console.log
方法,对类型做检查,或者用原型链还原toString
### debug-lib
这个是检测第三方 devtools 的,对 chromium 自带的应该无效,检查window
下是否有eruda
和_vcOrigConsole
的相关变量
解决方案:别用第三方不就行了
### debugger
最常见的一种
检测原理是用 js 的debugger
关键字,判断调用时间,如果开了 devtools 就会进入断点,时间超过阈值
可能的解决方案:禁用断点
### define-id
原理其实和第一个类似
init () {
this.div = document.createElement('div');
(this.div as any).__defineGetter__('id', () => { // 当 devtools 尝试访问 id 属性时触发
this.onDevToolOpen();
});
Object.defineProperty(this.div, 'id', { // 同上
get: () => {
this.onDevToolOpen();
},
});
}
detect () {
log(this.div); // 把这个 div 丢进 log,等 devtools 渲染
}
可能的解决方案:还是 hook console.log
方法,对类型做检查
### func-to-string
还是上面的那个原理,三回了
this.func.toString = () => {
this.count ++; // devtools 在显示 logs 中的函数时会调用 toString
return '';
};
可能的解决方案:还是 hook console.log
方法,对类型做检查
### performance
一个有点逆天测检测方式,检测原理是渲染一个表格比直接打印数组慢的多
const tablePrintTime = calculateTime(() => {table(this.largeObjectArray);});
const logPrintTime = calculateTime(() => {log(this.largeObjectArray);});
this.maxPrintTime = Math.max(this.maxPrintTime, logPrintTime);
可能的解决方案:hook console.table
,限制输出大小
### reg-to-string
原理和上面两个 to-string 一样
可能的解决方案:还是 hook console.log
### size
更逆天的方案,测屏幕和窗口大小
// screenRatio 是 window.devicePixelRatio,如果获取不到的话直接跳过检查
const widthUneven = window.outerWidth - window.innerWidth * screenRatio > 200; // 调大一点防止误伤
const heightUneven = window.outerHeight - window.innerHeight * screenRatio > 300; // 调大一点防止误伤
可能的解决方案:undock devtools 就好了(
## 解决方案
一个暴力解法,直接用油猴,在这个脚本加载前,给 console
的三个函数掐死
(function() {
console.log = ()=>{};
console.table = ()=>{};
console.clear = ()=>{};
alert("fxxking disable-devtools");
})();
注意要把 run at 设置为 document-start