防止用户调试网页的若干方法

1、禁用鼠标右键

document.addEventListener('contextmenu', function (e) {
    e.preventDefault();
});

2、禁止F12或其他打开调试面板的快捷键

document.addEventListener('keydown', function (event) {
    if (event.key == "F12" || (event.ctrlKey && event.shiftKey && (event.key === 'I' || event.key === 'C'))) {
        event.preventDefault(); // F12, Control+Shift+I, Control+Shift+C
    }
}, true);

3、debugger检测

setInterval(() => {
    let yy1 = performance.now();
    debugger;
    let yy2 = performance.now();
    if (yy2 - yy1 > 111) {
        window.location.href = 'about:blank';
    }
}, 1111);

performance.now()返回高精度时间戳

打开调试面板时会停留在debugger行，从而导致if成立。

4、判断当前环境，并整合代码

// stop.js
if (process.env.NODE_ENV == 'production') {
    setInterval(() => {
        let yy1 = performance.now();
        debugger;
        let yy2 = performance.now();
        if (yy2 - yy1 > 111) {
            window.location.href = 'about:blank';
        }
    }, 1111);
    document.addEventListener('contextmenu', function (e) {
        e.preventDefault();
    });

    document.addEventListener('keydown', function (event) {
        if (event.key == "F12" || (event.ctrlKey && event.shiftKey && (event.key === 'I' || event.key === 'C'))) {
            event.preventDefault(); // F12, Control+Shift+I, Control+Shift+C
        }
    }, true);
}

最后在main.js中引入，就完成了

5、局限性

即便禁用鼠标右键、F12、快捷键，浏览器仍然能打开调试面板

打开之后还能通过下面这个按钮禁用断点，所有的努力白费~~~

所以前端的代码运行在魔鬼计算机上，后端安全才是王道~~~