前言

开博客网站的各位站长，常常会遇到如下几种困扰。

网站被一些人恶意调试
被低级的查看源码手段扒取页面
右键复制菜单不美观
网站如果程序设计良好的话，虽然说没有什么影响，但是正所谓：
攻击性不大，侮辱性极强

说明

本教程将使用两个js和CSS库来实现功能

layer.js

layer.js 是一个用JavaScript编写的web弹窗插件。

disable-devtool.js

disable-devtool.js 是一个用JavaScript编写的禁用web开发者工具的js库

该库还有以下特性:

支持可配置是否禁用右键菜单
禁用 f12 和 ctrl+shift+i 快捷键
支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
开发者可以绕过禁用 (url参数使用tk配合md5加密)
支持几乎所有浏览器

配置

引用相关库

使用本站地址（推荐）

<script src="https://www.silverdragon.cn/usr/themes/Joe/assets/js/layer1.js"></script>
<script src="https://www.silverdragon.cn/usr/themes/Joe/assets/js/disable-devtool.min.js"></script>

使用公共地址

<script src="https://cdn.staticfile.org/layer/1.8.5/layer.min.js"></script>
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>

右键菜单

右键菜单分css部分，js部分，html部分三块组成。
css部分：

a {text-decoration: none;}
div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba
(0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;}
div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block}
div.usercm ul li{margin:0px;padding:0px;line-height:35px;}
div.usercm ul li a{color:#666;padding:0 15px;display:block}
div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)}
div.usercm ul li a i{margin-right:10px}
a.disabled{color:#c8c8c8!important;cursor:not-allowed}
a.disabled:hover{background-color:rgba(255,11,11,0)!important}
div.usercm{background:#fff !important;}

这段CSS代码填写在您的主题设置中，自定义CSS的部分，如果没有自定义CSS部分，请在前后分别增加
然后增加在您的主题设置自定义html的内容中，或者修改源码，添加在页面之间
joe主题设置如下：

js部分：

    (function(a) {
        a.extend({
            mouseMoveShow: function(b) {
                var d = 0,
                    c = 0,
                    h = 0,
                    k = 0,
                    e = 0,
                    f = 0;
                a(window).mousemove(function(g) {
                    d = a(window).width();
                    c = a(window).height();
                    h = g.clientX;
                    k = g.clientY;
                    e = g.pageX;
                    f = g.pageY;
                    h + a(b).width() >= d && (e = e - a(b).width() - 5);
                    k + a(b).height() >= c && (f = f - a(b).height() - 5);
                    a("html").on({
                        contextmenu: function(c) {
                            3 == c.which && a(b).css({
                                left: e,
                                top: f
                            }).show()
                        },
                        click: function() {
                            a(b).hide()
                        }
                    })
                })
            },
            disabledContextMenu: function() {
                window.oncontextmenu = function() {
                    return !1
                }
            }
        })
    })(jQuery);
   
    function getSelect() {
        "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("啊噢...你没还没选择文字呢！") : document.execCommand("Copy")
    }
    function baiduSearch() {
        var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        "" == a ? layer.msg("啊噢...你没还没选择文字呢！") : window.open("https://www.baidu.com/s?wd=" + a)
    }
    $(function() {
        for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) {
            d = !1;
            break
        }
        d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
    });

这段JS代码填写在您的主题设置中，自定义JS的部分，如果没有自定义JS部分，请在前后分别增加
然后增加在您的主题设置自定义html的内容中，或者修改源码，添加在页面之间
joe主题设置如下：

html代码如下：

<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="https://www.silverdragon.cn/"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
        <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制</span></a></li>
        <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>搜索</span></a></li>
        <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
        <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
        <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>重载网页</span></a></li>
        <li><a href="/友情链接.dfql"><i class="fa fa-meh-o fa-fw"></i><span>加个友联吧</span></a></li>  
    </ul>
</div>

这段HTML代码填写在您的主题设置中，自定义HTML的部分，如果没有自定义JS部分，请修改源码，添加在页面之间
JOE主题设置方法如下：

ps:切记，请务必先引用相关库，代码内的跳转页面地址记得改成您自己的

使用效果：
保存您的修改，并且刷新缓存后在您的页面上右键，不出意外的话，有如下的效果

禁止恶意调试和复制提示

js代码：

DisableDevtool({
    "ondevtoolopen": devdis,
    "interval": 1000,
    "md5": "81854aa650344da26"//您的授权绕过码的md5值
})
document.body.oncopy = function () { layer.msg('复制成功,若要转载请务必保留原文链接！'); };
 var f12_times = 1;
var ctrlu_times = 1;
document.onkeydown = function () {
    if (window.event.ctrlKey == true && window.event.keyCode == 85) {
        window.event.keyCode = 0;
        window.event.returnValue = false;
        window.event.cancelBubble = true;
        layer.msg("查看源代码被禁用了哦~</br>您已经尝试" + (ctrlu_times++) + "次了哦</br>站长要生气了");
        if (ctrlu_times > 5) {
            window.event.keyCode = 0;
            window.event.returnValue = false;
            window.event.cancelBubble = true;
            window.location.href = "https://www.baidu.com/";
            document.body.innerHTML = 'Dev Tools is on Page protecting......';
        } else {
            window.event.keyCode = 0;
            window.event.returnValue = false;
            window.event.cancelBubble = true;
            layer.msg("查看源代码被禁用了哦~</br>您已经尝试" + (ctrlu_times++) + "次了哦</br>站长要生气了");
        }
    } else if (window.event && window.event.keyCode == 123) {
        if (f12_times == 30) {
            event.keyCode = 0;
            event.returnValue = false;
            window.location.href = "https://www.baidu.com/";
        } else if (f12_times >= 10) {
            layer.msg("F12被禁用了哦~</br>您已经尝试" + (f12_times++) + "次了哦</br>站长要生气了");
            event.keyCode = 0;
            event.returnValue = false;
        } else {
            layer.msg("F12被禁用了哦~</br>您已经尝试" + (f12_times++) + "次了哦");
            event.keyCode = 0;
            event.returnValue = false;
        }

    }
}
var dev_times = 1;
function devdis() {
    if (dev_times <= 5) {
        layer.msg("devtool被禁用了哦~</br>您已经打开" + (dev_times++) + "秒了哦</br>" + (5 - dev_times + 1) + "秒后进入保护");
    } else {
        window.location.href = "https://www.baidu.com/";
        document.body.innerHTML = 'Dev Tools is on Page protecting......';
    }
}

这段JS代码填写在您的主题设置中，自定义JS的部分，如果没有自定义JS部分，请在前后分别增加
然后增加在您的主题设置自定义html的内容中，或者修改源码，添加在页面之间

joe主题设置如下：

功能说明：

本段代码能够防止使用F12打开开发者工具
本段代码能够防止使用Ctrl+Shift+I打开开发者工具
本段代码能够防止使用浏览器右上角工具菜单打开开发者工具
本段代码能够防止使用Ctrl+U打开查看源代码的页面
本段代码能够实现内容复制版权提示

缺点说明：

本段代码无法防御基于抓包的攻击
本段代码无法防御使用地址栏打开页面源代码的操作
本段代码无法拦截手机端的浏览源码

缺点建议：

可以修改成加密内容调用

使用效果

添加好脚本后，打开您的页面
尝试使用F12打开：

按下30次后

自动跳转百度
尝试使用ctrl+shift+i打开：
按下无反应（无图）
尝试使用Ctrl+U打开查看源代码:

弹出数据
按下5次后

跳转百度
尝试使用浏览器更多工具打开：

五秒后

自动跳转百度
尝试复制内容：

弹出版权提示

总结

此方法只能说是小聪明，如果对方使用传输层工具，以及非标准浏览器工具，还是能够获取到源代码的，只不过无法轻松进行页面调试而已。
右键菜单能够一点程度美化页面，但同时也增加了页面加载的文件内容，在一定程度上有可能影响页面的加载速度。

松鼠老方

Android · Google Chrome

挺好，有空试一下（？）

2023-04-06 回复

小透明

Windows 10 · Google Chrome

龙龙你好，路过提醒一下，前端禁止 DevTools 本质上是不可能的呢。
比如目前贵站在 Chrome 102 下可以通过在打开网页前先打开（独立窗口的）DevTools 的方式饶过限制。
另外，根据浏览器内外窗口大小的差来判断 DevTools 的方式不是太推荐的哈，因为现在很多浏览器（如新 Edge 和 Vivaldi）都会有其他的内嵌边栏，比如 Vivaldi 会把下载、历史记录、书签这些都放在网页左边的内嵌窗口里，会被误判成 DevTools 呢。这种防君子不防小人的方法，建议弹框提醒一下就行了，不要强制跳转到站外去，可能会误伤用户的。
其他利用浏览器 DevTools 的 Bug（或者是特性？谁知道呢）检测的方法，一般不会所有浏览器都适用的（通常都不适用于 Firefox），而且之后是有可能会被修复的。
没有恶意的哈，只是提醒一下，谢谢。

2022-06-11 回复

道锋潜鳞作者
Windows 10 · FireFox

@ 小透明

感谢评论，确实只是个防君子不防小人的方法，提供个参考而已

2022-06-12 回复

优化你的Typecho禁止F12和查看源码

前言

说明