一下敏感环境下,比如h5游戏,产品活动等页面下,我们是不希望用户可以打开控制台进行调试和查看代码的.所以要进行一些保护.
初级
阻止F12事件, 右键事件
window.onkeydown = window.onkeyup = window.onkeypress = function (event) {
// 判断是否按下F12,F12键码为123
if (event.keyCode = 123) {
event.preventDefault() // 阻止默认事件行为
window.event.returnValue = false
}
}
window.oncontextmenu = function() {
event.preventDefault() // 阻止默认事件行为
return false
}
解决方式:
这个仅仅阻止了部分能打开控制台的方式,但还是会有漏网之鱼,可以先按F12,再访问网站就可以了
中级
debugger疯狂输出断点防止调试
在控制台打开的情况下, debugger语句用于停止执行JS代码,并调用 (如果可用) 调试函数。使用debugger语句类似于在代码中设置断点
(() => {
function block() {
setInterval(() => {
debugger;
}, 50);
}
try {
block();
} catch (err) {}
})();
解决方式:
浏览器里面关闭Debug调试
高级
var errorDetector = function errorDetector(trigger) {
var e = new Error();
Object.defineProperty(e, 'message', {
get: function get() {
trigger();
}
});
console.log(e);
};
var getChromeTest = function getChromeTest(fire) {
var re = /./;
re.toString = getChromeRerenderTestFunc(fire);
var func = function func() {
return re;
};
func.toString = getChromeRerenderTestFunc(fire);
var date = new Date();
date.toString = getChromeRerenderTestFunc(fire);
console.log('%c', // < 92
func, // 92
func(), // >= 93, <= 101
date); // >= 102
var errorFire = getChromeRerenderTestFunc(fire);
errorDetector(errorFire);
};
var counts = 0;
var triggered = 0;
var getChromeRerenderTestFunc = function getChromeRerenderTestFunc(fire) {
var mark = 0;
var seq = 1 << counts++;
return function () {
if (triggered && !(triggered & seq)) {
return;
}
mark++;
if (mark === 2) {
triggered |= seq;
fire();
mark = 1;
}
};
};
利用了Error类型对象的get函数,实现了控制台触发的监听. 使用时,初始化执行getChromeTest(fire),其中fire函数为触发回调函数,我们可以设置为
() => {
setInterval(() => {
location.reload();
location.href = "https://womenzhai.cn/message";
}, 50);
}}
在用户打开控制台的时候,页面就会刷新和调转到其他页面,分支进行调试