网站如何屏蔽开发者工具，比监听MouseDown舒服?

最新推荐文章于 2024-05-16 16:38:02 发布

前端瓶子君

最新推荐文章于 2024-05-16 16:38:02 发布

阅读量945

点赞数 1

文章标签： nginx html js web javascript

点击上方前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

之前，我曾提过一个问题, 网站如何检测到是否开启开发者工具?

问题很火，是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照样无法进行反向代理, 很多网站(百度地图, 超图等)都是这种做法。

关于本文

来源：undefined

https://segmentfault.com/a/1190000040157555

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

前端瓶子君

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
网站如何屏蔽开发者工具，比监听MouseDown舒服?

点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群之前，我曾提过一个问题, 网站如何检测到是否开启开发者工具?问题很火，是5月份问题top1，后面管理员给我删除掉了...
复制链接

扫一扫