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

苏南大叔:如何监控是否打开网页的f12开发者模式? - chrome-f12-mode
如何监控是否打开网页的f12开发者模式?(图3-1)

测试环境:chrome@97.0.4692.71

标的物

这位仁兄的博客是:

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

苏南大叔:如何监控是否打开网页的f12开发者模式? - f12-debuger
如何监控是否打开网页的f12开发者模式?(图3-2)

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

苏南大叔:如何监控是否打开网页的f12开发者模式? - f12-debuger-time-diff
如何监控是否打开网页的f12开发者模式?(图3-3)

这个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是只有浏览器的开发者模式才能够识别的,正常网页是无感的。

相关文章

总结

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

更多f12的故事,请点击:

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