# 禁止浏览器打开控制台
出于安全等方面的考虑,可以禁止浏览器打开控制台
有以下几种方式:
# 禁止F12键
通过键盘事件判断键值===123时拦截即可
window.onkeydown = window.onkeyup = window.onkeypress = function (event) {
if (event.keyCode = 123) {
event.preventDefault(); // 阻止默认事件行为
window.event.returnValue = false;
}
}
# 禁止右键
右键有查看源代码和打开控制台功能,通过右键事件拦截即可
// 为右键添加自定义事件,可以禁用
window.oncontextmenu = function() {
event.preventDefault(); // 阻止默认事件行为
return false;
}
# 检查是否已打开控制台
通过上面的两种方式可以阻止新手打开控制台,但是还是有别的办法能打开:
选中地址栏再按F12
ctrl+shift+i
浏览器的菜单里找
事先打开控制台再访问页面
。。。
针对这些情况只能用定时器不断地检查是否打开了控制台,打开则刷新页面,达到无法正常使用的目的。
# 检查办法
通过页面宽度
这种如果控制台选择另开窗口的方式就无效了,所以也不贴代码了。
通过设置对象的属性的getter方法
当控制台在输出的某个对象时,是会去get对象属性的,因此会调用到属性的getter。
function checkDebugByGetter () { var checkStatus; var element = document.createElement('any'); element.__defineGetter__('id', function() { checkStatus = 'on'; }); var interval = setInterval(function() { checkStatus = 'off'; console.log(element); console.clear(); if (checkStatus === 'on') { clearInterval(interval) window.location.reload() } }, 1000) }
通过debugger
打开了控制台的情况下,代码有debugger时就会进入断点,但是还是可以选中dom的,要看还是看得到,不如刷新直接
function checkDebugByDebugTime() { function testDebuger() { var d = new Date(); debugger; if (new Date() - d > 10) { window.location.reload(); return true; } return false; } function start() { while (testDebuger()) { testDebuger(); } } if (!testDebuger()) { window.onblur = function () { setTimeout(function () { start(); }, 500) } }else { start(); } }
# 禁用js的情况
可以通过禁用js跳过js的判断打开控制台,但是如今的项目绝大多数都是通过客户端渲染页面的,禁用js页面也就不会生效了,可以不用考虑。
# 最终源码
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;
}
// 通过设置对象的属性的getter方法
// 原理:当控制台在输出的某个对象时,是会去get对象属性的,因此会调用到属性的getter。
function checkDebugByGetter () {
var checkStatus;
var element = document.createElement('any');
element.__defineGetter__('id', function() {
checkStatus = 'on';
});
var interval = setInterval(function() {
checkStatus = 'off';
console.log(element);
console.clear();
if (checkStatus === 'on') {
clearInterval(interval)
window.location.reload()
}
}, 1000)
}
checkDebugByGetter();