禁用浏览器调试工具

禁用浏览器调试工具

 

在某些情况我们可能会需要禁止用户打开浏览器的调试面板来对页面做一些简单的安全保护，以下是我整理的一些方法：

一、禁止选中

禁止选中主要是防止用户复制文字和图片，样式中禁用即可：

/*禁止选中*/ 
body{ 
    -moz-user-select: none; /*火狐*/ 
    -webkit-user-select: none; /*webkit浏览器*/ 
    -ms-user-select: none; /*IE10*/ 
    -khtml-user-select: none; /*早期浏览器*/ 
    user-select: none; 
}

如果只是禁止部分区域的话，直接在标签上加上onselectstart=“return false”

<div onselectstart="return false">
	此区域禁止复制
</div>

或者

<div onselectstart="return false" id="copy" >
	此区域禁止复制
</div>

<script type="text/javascript" >
$(document).ready(function(){
    document.getElementById('copy').onselectstart =function(){  //禁止选中
        return false;
    };
});
</script>

二、禁用F12

对于使用F12打开调试窗口的方法，我们只要注册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;
}

四、禁用预先调试

另外用户也可以通过浏览器菜单打开开发者工具来开启调试窗口，还有诸如 shift+ctrl+i 的快捷键打开控制台。这种情况咱们就每秒检查一次控制台是否打开，如果打开就让他走。

var threshold = 160; // 打开控制台的宽或高阈值
// 每秒检查一次
setInterval(function() {
	if (window.outerWidth - window.innerWidth > threshold || 
	window.outerHeight - window.innerHeight > threshold) {
		// 如果打开控制台，则关闭控制台
		window.close();  
        window.location = "about:blank";  
	}
}, 1e3);

这种方法对于像IE8这种，打开调试窗口是在一个新的Windows窗口中，而不是在当前页面的下面或者上面的情况会失效。

到这已经可以阻止一大部分人了，但是如果别人想看你的代码的欲望比较强，那咱也拦不住。

也就是如果调试窗口是在新的窗口那此代码就不能阻止到他，就算排除这种情况也还可以在浏览器设置中禁用Javascript再打开调试，不过对于一般情况已经完全够用。