Polish_20250122_165134461.jpg
在前端开发中，出于保护网页内容、防止代码被轻易查看或用户误操作等目的，我们有时需要对网页进行一些限制，比如屏蔽鼠标右键和F12调试功能。本文将详细介绍实现这些功能的方法。

一、屏蔽鼠标右键

屏蔽鼠标右键可以防止用户通过右键菜单执行一些操作，如查看网页源代码、保存图片等。在JavaScript中，我们可以通过 oncontextmenu 事件来实现这一功能。

<script>
    document.oncontextmenu = new Function("event.returnValue = false");
    document.onselectstart = new Function("event.returnValue = false");
</script>
162Bytes
© 白衣

上述代码中， document.oncontextmenu用于捕获鼠标右键点击事件，当该事件触发时，event.returnValue = false语句会阻止默认的右键菜单显示。而 document.onselectstart则用于禁止用户选中网页上的文字内容。

二、屏蔽F12调试

F12键通常用于打开浏览器的开发者工具，这可能会导致网页代码被查看或修改。以下是屏蔽F12调试功能的代码实现。

<script>
    document.onkeydown = function (e) {
        var currKey = 0, evt = e || window.event;
        currKey = evt.keyCode || evt.which || evt.charCode;
        if (currKey == 123) {
            window.event.cancelBubble = true;
            window.event.returnValue = false;
        }
    }
</script>
306Bytes
© 白衣

在这段代码中， document.onkeydown 监听键盘按下事件。当检测到按下的键码 currKey 等于123（即F12键的键码）时，通过 window.event.cancelBubble = true 阻止事件冒泡， window.event.returnValue = false 取消默认的F12键行为，从而达到屏蔽F12调试功能的目的。

三、其他综合屏蔽JS代码

除了上述基本方法，还可以通过一段综合性的代码来屏蔽多种可能打开开发者工具的操作。

// 禁止鼠标右键
document.oncontextmenu = function () {
    return false;
}
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，等同于F12
        return false;
    } else if (e.shiftKey && e.keyCode == 121) {    // 屏蔽Shift+F10，等同于鼠标右键
        return false;
    }
}
471Bytes
© 白衣

这段代码不仅屏蔽了F12键，还阻止了通过 Ctrl + Shift + I 组合键（在某些浏览器中等同于F12）以及 Shift + F10 组合键（等同于鼠标右键）打开开发者工具或调出右键菜单的操作。

四、补充版JS：防止通过工具栏调起开发者工具

为了更全面地防止开发者工具的使用，我们可以通过监测浏览器窗口大小变化来判断用户是否从工具栏调起了开发者工具，并采取相应措施。

// 如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面 
var h = window.innerHeight, w = window.innerWidth;
window.onresize = function () {
    if (h!= window.innerHeight || w!= window.innerWidth) {
        window.close();
        window.location = "about:blank";
    }
}
366Bytes
© 白衣

这段代码在页面加载时记录当前浏览器窗口的高度 h 和宽度 w 。当 window.onresize 事件触发（即窗口大小发生变化）时，检查当前窗口的高度和宽度是否与初始值不同。如果不同，说明可能是用户通过工具栏调起了开发者工具，此时通过 window.close() 关闭当前页面，并将 window.location 设置为 about:blank ，防止用户继续访问页面内容。

五、借助开源工具插件

disable-devtool 可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的 ‘代码搬运’
该库有以下特性:
支持可配置是否禁用右键菜单
禁用 f12 和 ctrl+shift+i 等快捷键
支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
开发者可以绕过禁用 (url参数使用tk配合md5加密)
多种监测模式，支持几乎所有浏览器（IE,360,qq浏览器,FireFox,Chrome,Edge...）
高度可配置、使用极简、体积小巧
支持npm引用和script标签引用(属性配置)
识别真移动端与浏览器开发者工具设置插件伪造的移动端，为移动端节省性能
支持识别开发者工具关闭事件
支持可配置是否禁用选择、复制、剪切、粘贴功能
支持识别 eruda 和 vconsole 调试工具
支持挂起和恢复探测器工作
支持配置ignore属性，用以自定义控制是否启用探测器
支持配置iframe中所有父页面的开发者工具禁用

//一行代码搞定禁用web开发者工具
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>
134Bytes
© 白衣

通过合理运用上述方法，可以在一定程度上提高网页的安全性和稳定性，保护网页内容和代码不被轻易获取或修改。但请记住，任何防护措施都不是绝对的，持续学习和采用更先进的安全策略是保障前端应用安全的关键。更何况，前端本就是开源的。