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

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、快捷键，浏览器仍然能打开调试面板

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

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