禁止调试,阻止浏览器F12开发者工具

924次阅读 32人点赞 作者: WuBin 发布时间: 2024-03-21 08:56:31
扫码到手机查看

分析

这两天突然想看看文心一言的http通信请求接口,于是想着用F12看看。谁知道刚打开开发者工具,居然被动debugger了。直接被JS写死的debugger关键字下了断点。行吧,不让调试就不让调试吧,关闭开发者工具之后,直接跳到了空白页。

大家都知道浏览器的开发者工具能干啥,正经的用法:开发时调试代码逻辑,修改布局样式;不正经的用法:改改元素骗骗人,找找网站接口写爬虫,逆向js破解加密等等,所以说前端不安全,永远不要相信用户的输入。

而这次碰到的这个情况确实可以在用户端做一些防御操作,但是也可以绕过。

PS:开发者工具Ctrl+F8可以禁用断点调试

先做一波分析。

首先,防止你用F12调试,先用debugger关键字阻止你进行任何操作。随后,在你关闭之后,又直接跳转到空白页,不让你接着操作。

这就需要一个开发者工具检测的机制了,发现你打开了开发者工具,就给你跳走到空白页。

所以,关键就是要实现开发者工具的检测。

实现

经过查阅一番,发现原来这个debugger可能并不仅仅是阻止你进行调试的功能,同时还兼具判断开发者工具是否打开的作用。怎么实现?

debugger本身只是调试,阻止你继续对前端进行调试,但是代码中并不知道用户是否打开了开发者工具,所以就无法进行更进一步的操作,例如文心一言的跳转到空白页。

但是,有一点,你打开开发者工具之后,debugger下了断点,程序就停到那里了,如果你不打开开发者工具,程序是不会停止到断点的。没错,这就是我们可以判断的方式,时间间隔。正常情况下debugger前后的时间间隔可以忽略不计。但是,当你打开开发者工具之后,这个时间间隔就产生了,判断这个时间间隔,就可以知道是否打开了开发者工具。

<!DOCTYPE html>
<html>
    <header>
        <title>test</title>
    </header>
    <body>
        <h1>test</h1>
    </body>
    <script>
        setInterval(function() {

            var startTime = performance.now();
          	// 设置断点
            debugger; 
            var endTime = performance.now();
           	// 设置一个阈值,例如100毫秒
            if (endTime - startTime > 100) {
                window.location.href = 'about:blank';
            } 
            
        }, 100);

    </script>

</html>

通过设置一个定时循环任务来进行检测。

在不打开发者工具的情况下,debugger是不会执行将页面卡住,而恰恰是利用debugger的这一点,如果你打开开发者工具一定会被debugger卡住,那么上下文时间间隔就会增加,在对时间间隔进行判断,就能巧妙的知道绝对开了开发者工具,随后直接跳转到空白页即可。

performance.now()

返回的时间戳以双精度浮点数 double 的形式表示时间,精度最高可达微秒级。而Date.now():返回的时间戳没有被限制在一毫秒的精确度内,小于 1ms 的测试不出来结果。

1s =1000ms(毫秒) = 1000000(微秒),即1毫秒 = 1000微秒

比如一个例子:

let start = performance.now();
// 调用一个耗时间的循环
for (let i = 0; i < 100000; i++) {
  let doSomething = i * i;
}
let end = performance.now()

// 返回的时间戳,是自创建上下文以来经过的时间,跟打开网页的时间有关,但是这不是绝对的。
// 如果返回的值是178764.00000002384185791 这类的,这种的会被处理为 178764
console.log('开始时间:', start);	// 178764
console.log('结束时间:', end);		// 178764.10000002384
// 以毫秒计的运行时长
console.log('运行时长:',end - start)	// 0.10000002384185791 毫秒

performance.now()是一个用于测量代码执行时间的方法,它返回一个高精度的时间戳,表示自页面加载以来的毫秒数。

performance.now()`方法返回的时间戳基于浏览器的性能计时器,通常具有更高的精度和准确性,比使用 Date对象的方式更为精确。这个方法在性能分析和代码优化中经常被使用,可以帮助开发者确定代码执行的耗时,从而找到性能瓶颈并进行优化。

const startTime = performance.now();

// 执行一些耗时的操作
for (let i = 0; i < 1000000; i++) {
  // 模拟一些计算任务
  Math.sqrt(i);
}

const endTime = performance.now();
const executionTime = endTime - startTime;

console.log(`代码执行时间:${executionTime} 毫秒`);

在上述示例代码中,我们使用 `performance.now()` 方法获取代码执行前的时间戳,并将其保存在 `startTime` 变量中。然后,我们执行一些耗时的操作(在这个例子中是一个简单的循环计算平方根)。最后,我们再次调用 `performance.now()` 方法获取代码执行后的时间戳,并将其保存在 `endTime` 变量中。通过计算 `endTime - startTime`,我们得到了代码执行的时间差,即代码执行时间。

请注意,`performance.now()` 返回的时间戳是一个浮点数,通常以毫秒为单位。然而,浏览器可能会根据不同的环境和实现返回更高精度的值,例如微秒(百万分之一秒)或纳秒(十亿分之一秒)。因此,不同浏览器和设备上的精度可能会有所不同。

使用 `performance.now()` 方法可以帮助开发者进行性能测试和优化,以确保代码在执行时达到预期的性能要求。

点赞 支持一下 觉得不错?客官您就稍微鼓励一下吧!
关键词:debugger
推荐阅读
  • uniapp实现被浏览器唤起的功能

    当用户打开h5链接时候,点击打开app若用户在已经安装过app的情况下直接打开app,若未安装过跳到应用市场下载安装这个功能在实现上主要分为两种场景,从普通浏览器唤醒以及从微信唤醒。

    8186次阅读 521人点赞 发布时间: 2022-12-14 16:34:53 立即查看
  • Vue

    盘点Vue2和Vue3的10种组件通信方式

    Vue中组件通信方式有很多,其中Vue2和Vue3实现起来也会有很多差异;本文将通过选项式API组合式API以及setup三种不同实现方式全面介绍Vue2和Vue3的组件通信方式。

    3282次阅读 241人点赞 发布时间: 2022-08-19 09:40:16 立即查看
  • JS

    几个高级前端常用的API

    推荐4个前端开发中常用的高端API,分别是MutationObserver、IntersectionObserver、getComputedstyle、getBoundingClientRect、requ...

    13228次阅读 854人点赞 发布时间: 2021-11-11 09:39:54 立即查看
  • PHP

    【正则】一些常用的正则表达式总结

    在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。了解一些常用的正则表达式,能大大提高你的工作效率。

    12104次阅读 385人点赞 发布时间: 2021-10-09 15:58:58 立即查看
  • 【中文】免费可商用字体下载与考证

    65款免费、可商用、无任何限制中文字体打包下载,这些字体都是经过长期验证,经得住市场考验的,让您规避被无良厂商起诉的风险。

    10347次阅读 829人点赞 发布时间: 2021-07-05 15:28:45 立即查看
  • Vue

    Vue3开发一个v-loading的自定义指令

    在vue3中实现一个自定义的指令,有助于我们简化开发,简化复用,通过一个指令的调用即可实现一些可高度复用的交互。

    14248次阅读 1132人点赞 发布时间: 2021-07-02 15:58:35 立即查看
  • JS

    关于手机上滚动穿透问题的解决

    当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。在PC上使用css即可解决,但是在手机端,情况就变的比较复杂,就需要禁止触摸事件才可以。

    14180次阅读 1156人点赞 发布时间: 2021-05-31 09:25:50 立即查看
  • Vue

    Vue+html2canvas截图空白的问题

    在使用vue做信网单页专题时,有海报生成的功能,这里推荐2个插件:一个是html2canvas,构造好DOM然后转canvas进行截图;另外使用vue-canvas-poster(这个截止到2021年3月...

    27073次阅读 2131人点赞 发布时间: 2021-03-02 09:04:51 立即查看
  • Vue

    vue-router4过度动画无效解决方案

    在初次使用vue3+vue-router4时候,先后遇到了过度动画transition进入和退出分别无效的情况,搜遍百度没没找到合适解决方法,包括vue-route4有一些API都进行了变化,以前的一些操...

    23237次阅读 1791人点赞 发布时间: 2021-02-23 13:37:20 立即查看
交流 收藏 目录