写在前面
这两天突然想看看文心一言的http通信请求接口，于是想着用F12看看。
谁知道刚打开开发者工具，居然被动debugger了。
直接被JS写死的debugger关键字下了断点。行吧，不让调试就不让调试吧，关闭开发者工具之后，直接跳到了空白页。
其实几年之前就碰到过类似的情况，不过当时才学疏浅，也没当回事，就没研究过。这次又碰到了，毕竟已经不是当年的我了，于是便来研究研究。
分析
大家都知道浏览器的开发者工具能干啥，正经的用法：开发时调试代码逻辑，修改布局样式；不正经的用法：改改元素骗骗人，找找网站接口写爬虫，逆向js破解加密等等，所以说前端不安全，永远不要相信用户的输入。
而这次碰到的这个情况确实可以在用户端做一些防御操作，但是也可以绕过。 （PS：感谢评论区大佬指教：开发者工具Ctrl+F8可以禁用断点调试，学到了）
先做一波分析。
首先，防止你用F12调试，先用debugger关键字阻止你进行任何操作。随后，在你关闭之后，又直接跳转到空白页，不让你接着操作。
这就需要一个开发者工具检测的机制了，发现你打开了开发者工具，就给你跳走到空白页。
所以，关键就是要实现开发者工具的检测。
实现
经过查阅一番，发现原来这个debugger可能并不仅仅是阻止你进行调试的功能，同时还兼具判断开发者工具是否打开的作用。怎么实现？
debugger本身只是调试，阻止你继续对前端进行调试，但是代码中并不知道用户是否打开了开发者工具，所以就无法进行更进一步的操作，例如文心一言的跳转到空白页。
但是，有一点，你打开开发者工具之后，debugger下了断点，程序就停到那里了，如果你不打开开发者工具，程序是不会停止到断点的。没错，这就是我们可以判断的方式，时间间隔。正常情况下debugger前后的时间间隔可以忽略不计。但是，当你打开开发者工具之后，这个时间间隔就产生了，判断这个时间间隔，就可以知道是否打开了开发者工具。
直接上示例代码
html 体验AI代码助手 代码解读复制代码<!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卡住，那么上下文时间间隔就会增加，在对时间间隔进行判断，就能巧妙的知道绝对开了开发者工具，随后直接跳转到空白页，一气呵成。
测试
现在来进行测试，打开F12
关闭开发者工具。
完美！
写在后面
这样确实可以阻挡住通过在开发者工具上获取信息，但是仅仅是浏览器场景。我想要拿到对话的api接口也不是只有这一种方法。
感谢评论区大佬指教：开发者工具Ctrl+F8可以禁用断点调试
或者说，开个代理抓包不好吗？hhh
关于网络安全技术储备
学好网络安全不论是就业还是做副业赚钱都不错，但要学会网络安全还是要有一个学习规划。最后大家分享一份全套的网络安全学习资料，给那些想学习网络安全的小伙伴们一点帮助！
对于0基础小白入门：
如果你是零基础小白，想快速入门网络安全是可以考虑的。
一方面是学习时间相对较短，学习内容更全面更集中。
二方面是可以找到适合自己的学习方案
包括：网安成长学习路线图、SRC&黑客文档、护网行动、黑客必读书单、面试题、学习视频等教程。带你从零基础系统性的学好网络安全！
需要的可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】
👉1.成长路线图&学习规划👈 要学习一门新的技术，作为新手一定要先学习成长路线图，方向不对，努力白费。
对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图&学习规划。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。
👉2.网安入门到进阶视频教程👈 很多朋友都不喜欢晦涩的文字，我也为大家准备了视频教程，其中一共有21个章节，每个章节都是当前板块的精华浓缩。（全套教程文末领取哈）
👉3.SRC&黑客文档👈 大家最喜欢也是最关心的SRC技术文籍&黑客技术也有收录
SRC技术文籍：
黑客资料由于是敏感资源，这里不能直接展示哦！（全套教程文末领取哈）
👉4.护网行动资料👈 其中关于HW护网行动，也准备了对应的资料，这些内容可相当于比赛的金手指！
👉5.黑客必读书单👈
随着互联网技术的飞速发展，网络安全已经成为了当今科技领域的一大热点。这些SQL注入、CCNA、Web渗透、Linux服务器等，以其强大的语言理解和防御能力，正在守护着我们网络世界。 那以下这些PDF籍就是非常不错的学习资源。
👉6.网络安全岗面试题合集👈 当你自学到这里，你就要开始思考找工作的事情了，而工作绕不开的就是真题和面试题。
这份完整版的网络安全学习资料已经上传CSDN，朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】
发布者：admin，转转请注明出处：http://www.yc00.com/web/1755021405a5227351.html
评论列表（0条）