Javascript反调试实现判断用户是否打开了浏览器控制台

前言

晓杰最近在研究如何防止用户恶意调试前端网页代码，防止打开控制台进行调试，首先禁用了浏览器页面右键事件和F12等快捷键！然后利用了创建元素是否成功方式进行校验,具体实现代码如下。

代码

<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>
<script >
document.addEventListener('keydown', function(event) {
    // 检查 F12 键
    if (event.key === 'F12') {
        event.preventDefault();
    }
    // 检查 Ctrl + Shift + I 组合键
    if (event.ctrlKey && event.shiftKey && event.key === 'i') {
        event.preventDefault();
    }
    // 检查 Ctrl + Shift + J 组合键
    if (event.ctrlKey && event.shiftKey && event.key === 'j') {
        event.preventDefault();
    }
    // 检查 Ctrl + Shift + C 组合键
    if (event.ctrlKey && event.shiftKey && event.key === 'c') {
        event.preventDefault();
    }
});
document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
});
var ConsoleManager={
    onOpen(){
    },
    onClose(){
    },
    init(){
        var self = this;
        var x = document.createElement('div');
        var isOpening = false,isOpened=false;
        Object.defineProperty(x, 'id', {
            get(){
                if(!isOpening){
                    self.onOpen();
                    isOpening=true;
                }
                isOpened=true;
            }
        });
        setInterval(function(){
            isOpened=false;
            console.info(x);
            console.clear();
            if(!isOpened && isOpening){
                self.onClose();
                isOpening=false;
            }
        },200)
    }
}
//检测到打开 直接跳转到其他网址 或者做其他方式自己改
ConsoleManager.onOpen = function(){
    location.href="https://bbs.125.la/";
}
ConsoleManager.init();
DisableDevtool({
    ondevtoolopen: (type) => {
        const info = 'devtool opened!; type =' + type;
        },
})
</script>

本文作者

Soujer