网页防止打开开发者模式，防止恶意测试或采集方法

admin

网页防止打开开发者模式，防止恶意测试或采集方法,为什么要防止被恶意调式？

我们的目的是尽可能的减少资源被盗取，防止爬虫和攻击、以及api ！
第一种方式
禁止F12和右击、审查元素设置中强行打开开发者会直接关闭网页。

<script>
                        //禁用右键（防止右键查看源代码）
                        window.oncontextmenu = function() {
                                return false;
                        }
                        //禁止任何键盘敲击事件（防止F12和shift+ctrl+i调起开发者工具）
                        window.onkeydown = window.onkeyup = window.onkeypress = function() {
                                window.event.returnValue = false;
                                return false;
                        }
                        //如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面
                        var h = window.innerHeight,
                                w = window.innerWidth;
                        window.onresize = function() {
                                if (h != window.innerHeight || w != window.innerWidth) {
                                        window.close();
                                        window.location = "about:blank";
                                }
                        }
</script>


第二种方式
使用开源项目ConsoleBan。
Github：https://github.com/fz6m/console-ban/blob/master/README.zh.md

<script src="https://cdn.jsdelivr.net/npm/console-ban@5.0.0/dist/console-ban.min.js"></script>
<script>
        // 第一种防爬虫的方法，打开F12自动重定向
        // ConsoleBan.init({
        //         redirect: '/404'
        // })

        //第二种防爬虫的方法，重写页面元素
        var div = document.createElement('div')
        div.innerHTML = '<h1> 不要偷看啦~</h1>'
        ConsoleBan.init({
        // 重写 body 为字符串
        write: '<h1> 不要偷看啦~ </h1>',
        // 可传入节点对象
        write: div
        })

        //第三种防爬虫的方法，打开F12自动走debugger
        ConsoleBan.init({
        debug: true,
        debugTime: 1
        })
</script>


主要是通过ConsoleBan.init()进行实例化，跟Vue实例化用法类似，该对象可传参数如下：

第三种方式
自动清空控制台。

<script>
        var clear = console.clear
        setTimeout(clear, 1)
</script>

三种方式都很好用，具体使用那种方式进行防范可以根据自己实际需求进行选定！