防止浏览器开发者工具打开及禁用F12等快捷键分析与探讨

在网页开发中，有时出于特定的安全或保密需求，可能需要防止用户打开浏览器的开发者工具进行查看或修改页面内容。废话不多说，先上代码！

一、完整代码

<!DOCTYPE html>
<html>

<body>

</body>

<script>
    // 定义当检测到控制台打开时执行的回调函数
    function consoleOpenCallback() {
        // 如果控制台被打开，将页面重定向到指定网址
        window.location.href = "https://www.baidu.com/s?word=%E5%B8%8C%E9%80%9F%E4%BA%91%E5%AE%98%E7%BD%91";
    }
   !function () {
        const handler = setInterval(() => {
            const before = new Date();
            // 这里的 debugger 语句用于触发时间检测
            debugger;
            const after = new Date();
            const cost = after.getTime() - before.getTime();
            // 如果时间差大于 100 毫秒，认为控制台被打开
            if (cost > 100) {
                consoleOpenCallback();
                // 清除定时器
                clearInterval(handler);
            }
        }, 10);
    }();
</script>
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>
<script>
    var ConsoleManager = {
        onOpen: function () {
            // 当检测到控制台打开时执行的操作
        },
        onClose: function () {
            // 当检测到控制台关闭时执行的操作
        },
        init: function () {
            var self = this;
            var x = document.createElement('div');
            var isOpening = false;
            var isOpened = false;
            // 使用 Object.defineProperty 定义元素属性的 getter
            Object.defineProperty(x, 'id', {
                get: function () {
                    if (!isOpening) {
                        // 当首次检测到可能打开控制台时执行
                        self.onOpen();
                        isOpening = true;
                    }
                    isOpened = true;
                }
            });
            setInterval(function () {
                isOpened = false;
                console.info(x);
                console.clear();
                if (!isOpened && isOpening) {
                    // 当确认控制台已关闭时执行
                    self.onClose();
                    isOpening = false;
                }
            }, 10);
        }
    };
    ConsoleManager.init();
    // 当检测到控制台打开时，重定向页面
    ConsoleManager.onOpen = function () {
        window.location.href = "https://www.baidu.com/s?word=%E5%B8%8C%E9%80%9F%E4%BA%91%E5%AE%98%E7%BD%91";
    };

    DisableDevtool({
        ondevtoolopen: (type) => {
            const info = 'devtool opened!; type =' + type;
        }
    });

    document.addEventListener('keydown', function (event) {
        // 如果按下的键是与打开开发者工具相关的快捷键组合，阻止默认行为并返回 false
        if (event.keyCode === 123 || (event.ctrlKey && event.shiftKey && event.keyCode === 73) || (event.ctrlKey && event.shiftKey && event.keyCode === 74) || (event.ctrlKey && event.shiftKey && event.keyCode === 75) || (event.ctrlKey && event.shiftKey && event.keyCode === 67) || (event.metaKey && event.altKey && event.keyCode === 73) || (event.metaKey && event.altKey && event.keyCode === 67) || (event.metaKey && event.altKey && event.keyCode === 74) || (event.metaKey && event.altKey && event.keyCode === 75)) {
            event.preventDefault();
            return false;
        }
    }, false);

    document.addEventListener('contextmenu', function (event) {
        // 禁用鼠标右键菜单
        event.preventDefault();
    });
</script>

</html>

二、知识延伸与扩展:

防止开发者工具打开的可行性与局限性：

虽然上述代码尝试了多种方法来防止开发者工具打开，但实际上，这种做法并不是绝对可靠的。有经验的用户可能会通过各种方式绕过这些限制。例如，一些浏览器插件可能会干扰这种检测机制，或者用户可以在浏览器的设置中禁用 JavaScript，从而使这些限制失效。
此外，从用户体验的角度来看，过度限制用户打开开发者工具可能会引起用户的不满。开发者工具在调试网页、分析性能等方面非常有用，对于一些技术用户来说，它是不可或缺的工具。

安全与隐私的权衡：

在某些情况下，防止开发者工具打开可能是出于安全或隐私的考虑。例如，一些网站可能包含敏感信息，不希望用户通过开发者工具查看或修改页面内容。然而，这种做法也可能会引起用户对网站安全性和可信度的质疑。
为了在安全和隐私与用户体验之间取得平衡，可以考虑采用其他更友好的方式来保护敏感信息。例如，可以使用加密技术来保护数据传输，或者在服务器端进行严格的访问控制。

浏览器的安全机制与开发者工具的作用：

浏览器本身具有一系列的安全机制，以保护用户的安全和隐私。开发者工具虽然可以被用户用来查看和修改页面内容，但它也有很多合法的用途，如调试网页、分析性能问题等。
浏览器厂商通常会对开发者工具的使用进行一定的限制，以防止恶意用户利用它进行攻击。同时，浏览器也会不断更新和改进其安全机制，以应对新的安全威胁。

未来的发展趋势：

随着技术的不断发展，防止开发者工具打开的方法可能会变得越来越困难。同时，用户对隐私和安全的要求也会越来越高。因此，未来可能需要更加创新和有效的方法来保护网页的安全和隐私，同时又不影响用户体验。
例如，可以使用人工智能和机器学习技术来检测和防止恶意用户的行为，或者开发更加安全的浏览器插件和扩展，以增强网页的安全性。

总之，虽然上述代码提供了一种尝试防止浏览器开发者工具打开及禁用快捷键的方法，但在实际应用中需要谨慎考虑其必要性和可能带来的影响。同时，我们也需要不断探索更加安全和有效的方法来保护网页的安全和隐私，同时又不影响用户体验。

Browser JavaScript Debug Analysis and Discussion

#浏览器 #F12 #调试 #分析与探讨

防止浏览器开发者工具打开及禁用F12等快捷键分析与探讨

https://najest.github.io/Analysis-and-Discussion/防止浏览器开发者工具打开及禁用F12等快捷键分析与探讨.html

作者

najest's Yang

发布于

2025年8月18日

许可协议

Black Myth: Wukong wallpaper 下一篇