讯飞星火认知大模型web端打开控制台就跳转空白页防debugger技术分析学习(二)

前言

分析

  • 代码是如何判断用户是否打开了devtool开发工具呢,肯定需要某种特征

第一种

  • 容易想到的,如果,devtool 是嵌入到页面中的,打开时页面的宽高 发生变化,我们就可以监听窗口size 事件,来触发ondevtoolopen方法
  • 下面来复现下
  1. 首先要调成devtool嵌入模式

2. 进行栈回溯,可以看到,对窗口进行了检测,具体的检测窗口变化代码在函数checkWindowSizeUneven,请自行分析

第二种

  • 如果devtool ,没有嵌入到页面,这样找开的时间,size事件是不是就监听不到了呢,那要如何来检测呢
  • 下面调成devtool非嵌入模式来复现下
  • 可以看到onDevToolOpen 打开前有一个判断条件t > 10 * this.maxPrintTime 这个就是用来判断是否打开了devtool,下面摘出代码:
js 复制代码
{
    key:"detect",
    value:function() {
        var e = this
        , t = g((function() {
        I(e.largeObjectArray)
        }
        ))
        , n = g((function() {
        D(e.largeObjectArray)
        }
        ));
        if (this.maxPrintTime = Math.max(this.maxPrintTime, n),
        M(),
        0 === t || 0 === this.maxPrintTime)
            return !1;
        t > 10 * this.maxPrintTime && this.onDevToolOpen()
    }
}
  • t > 10 * this.maxPrintTime ,又因为his.maxPrintTime = Math.max(this.maxPrintTime, n)只需要判断t 和10倍n 关系即可,下面分析tn怎么等到的:
js 复制代码
t = g((function() {
    I(e.largeObjectArray)
}
))

n = g((function() {
    D(e.largeObjectArray)
}
))

function m() {
    return (new Date).getTime()
}
function g(e) {
    var t = m();
    return e(),
    m() - t
}
  • 可以看到二者都是通过同一个g 得出的,里面函数内部执行了I 函数和D函数
  • g 函数内部执行e参数,也就是执行I D 函数,g的返回值就是一个执行代码的时间差值
  • 在执行I 函数控制台会打印出一个数组表格 ,肯定就是I函数打印的
  • 把鼠标悬在I 函数发现name为tableconsole.table对比,是同一个
  • D函数同理
  • 打印的值就是e.largeObjectArray ,控制台输出e.largeObjectArray是一个二维数组
  • 可以先出结论,判断控制台打开条件就是console.table 打印耗费的时间大于console.log10倍即可,两者关系不打开控制台的情况下我没对比过,暂时没想出怎么对比,欢迎留言

总结

  • 通过分析学习,我们可以使用这两种方法来检测debugger
  1. 监听窗口的size事件
  2. 通过输出一个复杂的二维数组,比较console.tableconsole.log执行时间

待续

  • 百度的文心一言采用了更高级防degguer白屏模式,如果后续呼声高了,就继续分析学习
相关推荐
iccb101316 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端
宇宙全栈Link21 分钟前
当 React 组件调用自定义 hooks,hooks 又调用其他 hooks 时,状态变化如何传播?
前端·javascript·react.js
南方kenny22 分钟前
从0到1理解JS事件委托:让你的代码性能提升一个level
前端·javascript
西瓜树枝22 分钟前
用 iframe 实现前端批量下载的优雅方案 —— 从原理到实战
前端·javascript
归于尽23 分钟前
原生JS与React的事件差异
前端·javascript·react.js
独立开阀者_FwtCoder44 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
独立开阀者_FwtCoder1 小时前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder1 小时前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
伍哥的传说1 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
AA-代码批发V哥1 小时前
JavaScript之数组方法详解
javascript