谈谈基于 JS 实现阻止别人调试通过控制台调试网站的问题

2022 年 7 月 28 日
本文字数：1808 字
阅读完需：约 6 分钟

前言

大家好哇，今天我们来谈谈浏览器控制台的那点事儿，作为一名程序员来说，肯定是不希望自己的代码被别人反复的调试，万一被别人调试出 bug 怎么办？被不怀好意的人获取接口信息恶意攻击怎么办？所以，这时候 JavaScript 防审查开启控制台就很有必要了~

总所周知，要开启控制台，有三种方法，

F12
右键==》检查
浏览器==》更多工具==》开发者工具（快捷键：ctrl+shift+i）

需要注意的是：前两种都是可以通过代码阻止的，但是最后一种打开控制台的方式是无法被阻止掉的。那么下面我们就从这个角度出发，好好理一下这个过程~

阻止打开控制台

能阻止就先阻止，把打开控制台的举动扼杀在摇篮之中~

阻止 F12 事件

window.onkeydown = window.onkeyup = window.onkeypress = function (event) {      // 判断是否按下F12，F12键码为123      if (event.keyCode = 123) {          event.preventDefault() // 阻止默认事件行为          window.event.returnValue = false      }  }

复制代码

实现效果如下（摁了 F12 无反应）：

看不出任何效果啊喂！

阻止右键事件

为右键添加自定义事件，可以禁用 oncontextmenu 事件在元素中用户右击鼠标时触发并打开上下文菜单。

window.oncontextmenu = function() {      event.preventDefault() // 阻止默认事件行为      return false  }

复制代码

实现效果如下（右键无反应）：

还是看不出任何效果啊喂！

JS 操作控制台

虽然阻止了部分能打开控制台的方式，但还是会有漏网之鱼通过浏览器==》更多工具==》开发者工具（快捷键：ctrl+shift+i） 的方式打开控制台，那么我们就需要在打开后的控制台再做点文章了~

定时检查浏览器窗口变化

如果打开了控制台，浏览器窗口就会发生变化，利用这个特点，我们可以做出如下的监听：

let threshold = 160 // 打开控制台的宽或高阈值  window.setInterval(function() {      if (window.outerWidth - window.innerWidth > threshold ||       window.outerHeight - window.innerHeight > threshold) {          // 如果打开控制台，则刷新页面          window.location.reload()      }  }, 1000)

复制代码

实现效果如下（可以看出打开控制台后，页面一直在持续刷新）：

当然，如果用户把控制台改为了悬浮窗口模式，那么这个监听就会无效，并且当用户切换为非全屏的时候，可能也会误触此函数，所以这个方法还是有一点过的缺陷，可以做个补充。

打开控制台弹窗,启用调试 debug 调试

控制台弹框的 debug 调试，可能很多人都不太了解，其实是挺简单的功能。

debugger 语句用于停止执行 JS 代码，并调用 (如果可用) 调试函数。
使用 debugger 语句类似于在代码中设置断点。

我们可以在代码中添加如下代码来实现debugger的调试：

第一种 debug 调试

setInterval(function() {    check()}, 1000);var check = function() {    function doCheck(a) {        if (("" + a / a)["length"] !== 1 || a % 20 === 0) {            (function() {}            ["constructor"]("debugger")())        } else {            (function() {}            ["constructor"]("debugger")())        }        doCheck(++a)    }    try {        doCheck(0)    } catch (err) {}};check();

复制代码

实现效果如下（可以看出打开控制台后，变成 debug 模式）：

第二种 debug 调试

if(window.location.href.indexOf('#debug')==-1){    setInterval(function(){        (function (a) {return (function (a) {return (Function('Function(arguments[0]+"' + a + '")()'))})(a)})('bugger')('de', 0, 0, (0, 0))  }, 1000)}

复制代码

实现效果如下（和上一个 debug 模式相同，可以看出打开控制台后，变成 debug 模式）：

虽然打开了控制台弹窗 debug 调试，但控制台终究是开着，还是能查看相关的文件和代码，也能重新在控制台清除 debug 模式再进行部分调试。那么有没有更好一点的方法呢？

打开控制台提示（可实现跳转 url 或刷新）

function toDevtools(){
    let num = 0    var devtools = new Date()    devtools.toString = function() {        num++;        if(num>0){            alert('控制台打开了')            // 可以写刷新或者跳转的逻辑        }    }    console.log(devtools);}toDevtools()

复制代码

实现效果如下：

完结撒花！！！

后记

今天分享的内容希望对你有所帮助，通过以上代码可以监听到控制台是否被打开以及后续的逻辑操作，防止别人进行代码调试，在实际应用中的场景还是蛮多的~

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/cf4fa1cb3dd433b20ce1e5bb2】。文章转载请联系作者。

南极一块修炼千年的大冰块

关注

还未添加个人签名 2022.07.01 加入

还未添加个人简介

发布

暂无评论

创作场景

谈谈基于 JS 实现阻止别人调试通过控制台调试网站的问题

前言

阻止打开控制台

阻止 F12 事件

阻止右键事件

JS 操作控制台

定时检查浏览器窗口变化

打开控制台弹窗,启用调试 debug 调试

第一种 debug 调试

第二种 debug 调试

打开控制台提示（可实现跳转 url 或刷新）

后记

南极一块修炼千年的大冰块

评论