如何监控是否打开网页的f12开发者模式？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

苏南大叔最近发现一个类似同业的网址，出于职业习惯，就去点开发者模式看看源码。结果就发现了里面有个很有意思的功能。作用是对开发者模式进行监控，蛮新奇的功能。所以，这里对这个代码进行了分析。

测试环境：chrome@97.0.4692.71。

标的物

这位仁兄的博客是：

• https://www.yuanzifan.com/

点开开发者模式，就会看到被debug到。

然后点击关闭开发者模式的话，就会有个“打开过开发者模式”的提示信息。

这个js文件如下所示：

• https://www.yuanzifan.com/wp-content/themes/begin/js/copyrightpro.js

源码大家可以自己打开查看，这里苏南大叔就捡着几段分析分析。

页面禁止被iframe

if (parent.frames.length > 0) {
    top.location.replace(document.location)
}

这个功能也挺常见的，不过以前苏南大叔都是写if (top!=self){}。

禁止快捷键

document.onkeydown = function() {
    var e = window.event || arguments[0];
    if (e.keyCode == 123) { //f12
        return false
    } else {
        if ((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)) { //ctrl+shift+i
            return false
        } else {
            if ((e.ctrlKey) && (e.keyCode == 85)) { //ctrl+u
                return false
            } else {
                if ((e.ctrlKey) && (e.keyCode == 83)) { //ctrl+s
                    return false
                }
            }
        }
    }
}

嚯嚯，这快捷键禁止的这是一个齐全。

时刻生成debugger

var check = function() {
    function doCheck(a) {
        if (("" + a / a)["length"] !== 1 || a % 20 === 0) {
            (function() {}
            ["constructor"]("debugger")())
        } else {
            (function() {}
            ["constructor"]("debugger")())
        }
        doCheck(++a)
    }
    try {
        doCheck(0)
    } catch (err) {}
};
check();

这段代码，着实烧脑。不过要是仔细琢磨个个把小时的话，这段代码的意思就是：

while(true){debuger;}

你说，就这么简单的事情，干嘛写的这么复杂呢？打半天哑谜。顺便说一下，0/0的结果是NaN。

最玄幻的一段

var forbidDebug = function() {
    try {
        ((function() {
            var callbacks = []
              , timeLimit = 50
              , open = false;
            setInterval(loop, 1);
            return {
                addListener: function(fn) {
                    callbacks.push(fn)
                },
                cancleListenr: function(fn) {
                    callbacks = callbacks.filter(function(v) {
                        return v !== fn
                    })
                }
            };
            function loop() {
                var startTime = new Date();
                debugger ;if (new Date() - startTime > timeLimit) {
                    if (!open) {
                        callbacks.forEach(function(fn) {
                            fn.call(null)
                        })
                    }
                    open = true;
                    window.stop();
                    alert("\u5173\u95ed\u63a7\u5236\u53f0\u540e\u5237\u65b0\uff01");
                    document.body.innerHTML = ""
                } else {
                    open = false
                }
            }
        }
        )()).addListener(function() {
            window.location.reload()
        })
    } catch (e) {}
};
forbidDebug();

这段代码就是最核心的代码，看似简单实则非常玄妙。

• addListener这东西是自定义的，并不是大家所熟悉的那个addListener。
• debugger;这个关键代码放置的位置非常有技巧。
• 利用debugger;前后的时间差来计算debugger;有没有被执行。执行的话，就是打开了开发者模式。
• 而这个debuger是只有浏览器的开发者模式才能够识别的，正常网页是无感的。

相关文章

• https://newsn.net/say/electron-f12.html
• https://newsn.net/say/safari-f12.html
• https://newsn.net/say/f12-format-js.html

总结

没想到，这个日常最常用的浏览器开发者模式，居然是个双刃剑。居然能用来提防别人使用开发者模式，哈哈。虽然效果不咋地，但是打开开发者模式这一事件，能够被监控到，这是始料未及的。

更多f12的故事，请点击：

• https://newsn.net/search/f12/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。