如何在纯HTML中禁用Ctrl+U与F12以阻止查看网页源码

嘿，我来给你唠唠怎么实现这个需求，但先得明确一点：这种方法只能增加查看源码的门槛，没法完全阻止他人获取你的前端代码——毕竟浏览器本身就提供了多种绕开快捷键限制的方式，比如地址栏输入特定指令、通过浏览器菜单打开开发者工具等。

不过如果只是想挡住普通用户，下面的方法还是能用的：

具体实现代码 #

因为纯HTML本身没法处理键盘事件，我们需要内嵌JavaScript来实现（这也是纯HTML环境下唯一的办法，毕竟HTML是标记语言，没有交互逻辑处理能力）。直接把这段代码放到你的HTML文件里就行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>禁用快捷键示例</title>
</head>
<body>
    <!-- 这里放你的页面内容 -->

    <script>
        // 监听键盘按下事件，阻止指定快捷键
        document.addEventListener('keydown', function(e) {
            // 禁用F12（打开开发者工具）
            if (e.key === 'F12') {
                e.preventDefault();
            }
            // 禁用Ctrl+U（查看页面源代码）
            if (e.ctrlKey && e.key.toLowerCase() === 'u') {
                e.preventDefault();
            }
            // 额外补充：禁用Ctrl+Shift+I（打开开发者工具的另一快捷键）
            if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'i') {
                e.preventDefault();
            }
            // 可选：禁用Ctrl+Shift+C（元素审查快捷键）
            if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'c') {
                e.preventDefault();
            }
        });

        // 禁用右键菜单，防止右键选择"查看页面源代码"
        document.addEventListener('contextmenu', function(e) {
            e.preventDefault();
            // 可选：可以在这里加个提示，比如alert('右键菜单已禁用')
        });
    </script>
</body>
</html>

代码解释 #

• keydown事件监听：当用户按下指定快捷键时，调用e.preventDefault()来阻止浏览器执行默认行为（比如打开开发者工具、弹出源码页面）。
• contextmenu事件监听：阻止右键菜单弹出，这样用户没法通过右键菜单快速查看源码。

重要局限性（必须知道） #

就算你加了这些限制，懂行的用户还是能轻松绕过：

• 直接在浏览器地址栏输入 view-source:你的网页完整URL，就能直接查看源码。
• 通过浏览器顶部菜单的「更多工具」→「开发者工具」打开调试面板，完全不受快捷键限制。
• 如果用户在浏览器里禁用了JavaScript，上面所有的代码都会失效，所有限制直接归零。

所以如果你的核心逻辑或敏感内容不想被人看到，不要放在前端代码里，把这些内容放到后端处理，前端只负责展示非敏感的界面内容才是真正有效的保护方式。

内容的提问来源于stack exchange，提问作者Satya Chaitanya