如何防止用戶惡意調試前端網頁代碼,防止打開控制臺進行調試,首先禁用了瀏覽器頁面右鍵事件和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.;
}
ConsoleManager.init();
DisableDevtool({
ondevtoolopen: (type) => {
const info = 'devtool opened!; type =' + type;
},
})
</script>