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

Fxxking the disable-devtools