HTML防窥技巧：让源码难以偷窥

在原生 HTML 网页中，完全禁止 访问源码在技术上是不可能实现的。因为浏览器的工作原理就是先下载 HTML、CSS 和 JavaScript 文件，然后在本地进行渲染。只要用户能看到页面，代码就已经存在于他们的设备上了。

不过，我们可以通过一系列"反调试"和"防偷窥"手段，增加他人获取和阅读代码的成本。以下是几种常见的方法及思路解析：

1. 禁用鼠标右键菜单

这是最基础的入门级手段，主要针对普通用户，防止他们通过右键"查看网页源代码"。

html 复制代码

<script>
    document.oncontextmenu = function() {
        return false;
    }
</script>

思路解析： 监听 contextmenu 事件并直接拦截，使用户无法呼出浏览器的默认菜单。

2. 禁用开发者工具快捷键

屏蔽如 F12、Ctrl+Shift+I、Ctrl+U（查看源码）等常见的开发者工具触发按键。

javascript 复制代码

document.onkeydown = function (e) {
    if (e.keyCode === 123 || // F12
        (e.ctrlKey && e.shiftKey && e.keyCode === 73) || // Ctrl+Shift+I
        (e.ctrlKey && e.keyCode === 85)) { // Ctrl+U
        return false;
    }
};

思路解析： 通过监听键盘事件 keydown，识别特定的键码（KeyCode）并阻止其默认行为。

3. Debugger 陷阱（动态断点）

这是目前比较流行且有效的对抗手段。当用户打开开发者工具时，页面会卡死在断点处。

javascript 复制代码

setInterval(function() {
    debugger;
}, 100);

思路解析： debugger 关键字在控制台关闭时无效，但一旦控制台开启，浏览器会自动在此处暂停执行。配合 setInterval 循环触发，会让调试者陷入无尽的暂停循环，导致页面无法操作。

4. 检测开发者工具是否打开

通过监测窗口尺寸变化或特定的控制台行为，检测用户是否开启了控制台，并在开启后执行清空页面或跳转。

javascript 复制代码

const checkDebugger = function() {
    const threshold = 160;
    if (window.outerWidth - window.innerWidth > threshold || 
        window.outerHeight - window.innerHeight > threshold) {
        document.body.innerHTML = "请关闭开发者工具后继续访问";
    }
};
window.addEventListener('resize', checkDebugger);

思路解析： 开启侧边或底部的开发者工具会改变视口（Viewport）的大小，通过计算浏览器外窗口与内窗口的差值来判断。

5. 代码混淆与压缩（最推荐）

与其费劲心机隐藏代码，不如让代码变得"不可读"。

混淆 (Obfuscation)： 将变量名改为无意义的 a, b, c，并打乱代码逻辑顺序。
加密 (Encryption)： 将代码转为 Base64 或自定义加密字符串，运行时再通过 eval() 解密执行。
思路解析： 既然代码必须发给客户端，那就让它看起来像一堆乱码，即使对方拿到了源码，也无法理解其核心逻辑。