防止用户调试网页的若干方法
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、快捷键,浏览器仍然能打开调试面板
打开之后还能通过下面这个按钮禁用断点,所有的努力白费~~~
所以前端的代码运行在魔鬼计算机上,后端安全才是王道~~~