一次偶然的机会看到了微信读书。心中赞叹,这网站做的不错,尤其好奇图书排版的实现方案。
当我一贯在 Chrome 浏览器中右击的时候,发现没反应,以为鼠标坏了呢!最终确认不是我的鼠标问题。那问题来了如何阻止用户点击右键进行 inspect 调试呢,这背后的原理是什么?
通过下面这种方法可以阻止用户点击 F12 和点击右键:
// 禁止使用 F12
window.onkeydown = window.onkeyup = window.onkeypress = function (event) {
// F12 键码为 123
if (event.keyCode === 123) {
event.preventDefault();
window.event.returnValue = false;
}
}
// 为右键添加自定义事件,可以禁用
window.oncontextmenu = function () {
event.preventDefault();
return false;
}
既然微信读书网站不让点击右键,这就不能进入浏览器的调试模式,这时可以打开一个可以进入调试模式的页面,把微信读书的网站复制进去,即可进入调试模式。进入调试模式后,你会发现微信读书出现了 debugger:
想要阻止这个 debugger,最简单的方法是点击这个按钮:
点击完后,发现可以顺利打开阅读页。
那他这个 debugger 是如何启动的呢?我们看看它的代码,由于代码进行了混淆(你所看到的 _0xxxxx 这些其实是变量名,并不是内存地址,这点需要注意,至于如何混淆我没仔细研究),看的并不是很清楚,可以明确一点是 debugger 是通过函数动态生成的:
不过微信读书这种主要是为了防止爬虫,对于开发者调试来说并不是很难破解。大家加油,思考一下如何在代码中动态加入 debugger。
长按关注
素燕《前端小课》
帮助 10W 人入门并进阶前端