检测“检查元素”何时打开

晚会

Samy Kamkar的网站http://samy.pl知道何时打开控制台，并在打开控制台时擦除源代码/控制台。

这是如何运作的？

kevingessner：

这需要一些挖掘。samy.pl在此代码的顶部具有多个间接和混淆级别。它使用的检测代码版本不同于JohanP找到的GitHub存储库。该代码samy.pl，不像GitHub的仓库，可以检测出devtools时不停靠他们。

它是通过使用简短的脚本来实现的，该脚本根据devtools是打开还是关闭而执行不同。

示例脚本

Here's a self-contained example; open it in a browser and notice how the output changes as the devtools are opened and closed (whether it is docked or not):

<!DOCTYPE html>
<html>
    <body>
        <pre id="output"></pre>
        <script type="text/javascript">
            var element = new Image;
            var devtoolsOpen = false;
            element.__defineGetter__("id", function() {
                devtoolsOpen = true; // This only executes when devtools is open.
            });
            setInterval(function() {
                devtoolsOpen = false;
                console.log(element);
                document.getElementById('output').innerHTML += (devtoolsOpen ? "dev tools is open\n" : "dev tools is closed\n");
            }, 1000);
        </script>
    </body>
</html>

How it works

The setInterval is executed every second. console.log always executes, whether the devtools are open or closed: The console object is always defined. However, the log method only writes output to the console when the devtools are open. If the devtools are closed, console.log is a no-op. That's the key that lets you detect if the devtools are open: detecting if the log operation is a no-op.

在写入element控制台的过程中，它获取元素的ID。那会调用附带的函数__defineGetter__。因此，console.log(element)仅在devtools打开且console.log不是no-op 时才调用该函数。在该函数中设置该标志，使我们每秒都能获得关于devtools状态的更新视图。

samy.pl使用一些其他技巧来隐藏此内容：控制台也会每秒清除一次，并且此代码使用空格（！）编码进行混淆。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2020-07-17

我来说两句

0 条评论

登录后参与评论

TOP 榜单

文章