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

道锋潜鳞
2022-04-09 / 2 评论 / 113 阅读 / 正在检测是否收录...

前言

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

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

说明

本教程将使用两个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.dfql.io/usr/themes/Joe/assets/js/layer1.js"></script>
<script src="https://www.dfql.io/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主题设置如下:
l1rqntu3.png

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主题设置如下:
l1rqojm3.png


html代码如下:

<div class="usercm" style="left: 199px; top: 5px; display: none;">
    <ul>
        <li><a href="https://www.dfql.io/"><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主题设置方法如下:
l1rqqxqx.png
ps:切记,请务必先引用相关库,代码内的跳转页面地址记得改成您自己的

使用效果:
保存您的修改,并且刷新缓存后在您的页面上右键,不出意外的话,有如下的效果
l1rqseey.png
l1rqthp6.png

禁止恶意调试和复制提示

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主题设置如下:
l1rqojm3.png

功能说明:

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

缺点说明:

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

缺点建议:

  1. 可以修改成加密内容调用

使用效果

添加好脚本后,打开您的页面
尝试使用F12打开:
l1rr9opc.png
按下30次后
l1rrahvb.png
自动跳转百度
尝试使用ctrl+shift+i打开:
按下无反应(无图)
尝试使用Ctrl+U打开查看源代码:
l1rrcym0.png
弹出数据
按下5次后
l1rrdnf5.png
跳转百度
尝试使用浏览器更多工具打开:
l1rrecn8.png
l1rrek8g.png
五秒后
l1rrdnf5.png
自动跳转百度
尝试复制内容:
l1rrfjn0.png
弹出版权提示

总结

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

1

评论 (2)

取消
  1. 头像
    小透明
    Windows 10 · Google Chrome

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

    回复
    1. 头像
      道锋潜鳞 作者
      Windows 10 · FireFox
      @ 小透明

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

      回复