之前,我曾提过一个问题, 网站如何检测到是否开启开发者工具?
问题很火,是5月份问题top1, 后面管理员给我删除掉了...
在此, 把这问题及解决方法记录下来.
监听键盘事件F12之类的方法, 不记录, 因为刚开始大家都是这么玩的。
方法一
chrome72以下
var im = new Image();
Object.defineProperty(im, 'id', {
get: function() {
window.location.href = "http://106.53.103.200:8082/error.html"
blast();
}
});
console.log(im); //谷歌最新版失效
原理就是chrome在打开控制台的时候会读取页面上所有的id元素.
方法二
let num = 0; //谷歌最新版有效
var devtools = new Date();
devtools.toString = function() {
num++;
if (num > 1) {
window.location.href = "http://106.53.103.200:8082/error.html"
blast();
}
}
console.log('', devtools);
只有打开控制台,才会执行console打印方法, 由此控制。
以上两个方法,堪称无解,任何人都打不开控制台, 两个方法都是利用了数据劫持,或者重写一些核心方法而达到的,值得思考。
制裁方法
世界上没有完全安全的方案,所以以上两种方法也有了应对的方法。我也是实践过了,才将方法分享出来。
制裁原理: nginx反向代理
第一步, 配置nginx
server {
listen 82;
server_name localhost;
location / {
root html;
try_files $uri $uri/ /index.html;
}
location /static/ {
// 这个是使用上以上方法让开发者工具无法打开的网站。
proxy_pass http://xxxxxxx:8080;
}
}
第二步, 自己写index.html
虽然开发者工具不能打开, 但是可以ctrl+U查看源代码. 因为现在js驱动网站很多, 大部分是js引用,没有具体的html代码.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
</head>
<script>
alert()
</script>
<body>
<div id=app></div>
<!-- 经发现,禁止打开开发者工具的代码在此js中,我将他注释掉 -->
<!-- <script type=text/javascript src=/static/js/manifest.ac0205a4d14e568cdf78.js></script> -->
<script type=text/javascript src=/static/js/vendor.51344c75d51319ec081e.js></script>
<script type=text/javascript src=/static/js/app.a5efc5fda1887b531135.js></script>
</body>
</html>
现在输入localhost:82, 就可以破解啦.
反制裁方法
以上方法是通过nginx代理从而破解的,反制裁的思路就是不让nginx进行代理。
如果一个链接存在协议+域名(或者ip), 那么nginx是无法代理的。
通常说, /static/js....
是能被代理的, 而具体的链接 http://12.134./static/js...
是不能被代理的。
或者有更好的方法,
页面引入如下js
<script src="/static/js/test.js"></script>
而/static/js/test.js
返回如下类似片段
document.write('<script src="http://1221.34.34/static/test.js"></script>')
这样,nginx照样无法进行反向代理, 很多网站(百度地图, 超图等)都是这种做法。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。