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

南极一块修炼千年的大冰块
4,700 阅读5分钟

这是我参与更文挑战的第21天，活动详情查看： 更文挑战

前言

大家好哇，周一过的开心吗？

今天我们来谈谈浏览器控制台的那点事儿，作为一名程序员来说，肯定是不希望自己的代码被别人反复的调试，万一被别人调试出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无反应）： GIF 2021-6-21 21-41-01.gif 看不出任何效果啊喂！

阻止右键事件

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

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

实现效果如下（右键无反应）： GIF 2021-6-21 21-41-01.gif 还是看不出任何效果啊喂！

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)

实现效果如下（可以看出打开控制台后，页面一直在持续刷新）： GIF 2021-6-21 21-44-10.gif

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

打开控制台弹窗,启用调试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模式）： GIF 2021-6-21 21-46-48.gif

第二种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模式）： GIF 2021-6-21 21-46-48.gif

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

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

function toDevtools(){

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

实现效果如下： GIF 2021-6-21 22-07-58.gif

完结撒花！！！

后记

今天分享的内容希望对你有所帮助，通过以上代码可以监听到控制台是否被打开以及后续的逻辑操作，防止别人进行代码调试，在实际应用中的场景还是蛮多的~ 今天是我坚持日更的第二十一天，周一过得有点慢啊~ 每天输出一点点，进步一点点。有志者，事竟成。大家一起加油呀~

如果本文对你有帮助，关注大冰块，点个赞吧~

更文挑战的文章目录如下：

avatar
文章
阅读
粉丝