琐碎笔记

简单一行代码禁用浏览器开发者工具

佩佩 · 11月25日 · 2020年 · · · · · · 4899次查看

前言

有时候前端源码不想被那么容易的被扒,所以就想到了禁用浏览器的开发者工具。但网页内容最终是要通过浏览器解析给用户的的,只要被解析,就不可能完全阻止他人查看。但是一定程度上还是有用的。

提示

代码若不生效或者有其它奇怪的 Bug,请去作者仓库提交 PR 反馈,我不是作者,本人无能为力。

适用环境

基本无限制,只要有解析 HTML 的地方,就能适用。

压轴出场

接下来就有请本次主角压轴出场~

灯光,音乐,鲜花,鼓掌~~~

Disable devtool

功能特性

disable-devtool 可以禁用所有一切可以进入开发者工具的方法,防止通过开发者工具进行的“代码搬运”。该库有以下特性:

  1. 支持可配置是否禁用右键菜单;
  2. 禁用 F12 和 Ctrl+Shift+i 快捷键;
  3. 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面;
  4. 开发者可以绕过禁用 (url 参数使用 tk 配合 md5 加密);
  5. 支持几乎所有浏览器(包含IE);
  6. 高度可配置;
  7. 使用极简、体积小巧 (仅6kb);
  8. 支持 npm 引用和 Script 标签引用(属性配置);
  9. 识别真移动端与浏览器开发者工具设置插件伪造的移动端,为移动端节省性能。

使用方法

npm 引用

# 克隆代码
git clone https://github.com/theajack/disable-devtool.git && cd disable-devtool

# 下载依赖
npm i disable-devtool

# 包引入
import disableDevtool from 'disable-devtool';

# 调用
disableDevtool();

npm 使用时的配置参数

# options 中的参数与说明
declare interface optionStatic {
    md5?: string; // 绕过禁用的md5值,详情见3.2,默认不启用绕过禁用
    url?: string; // 关闭页面失败时的跳转页面,默认值为 localhost
    tkName?: string; // 绕过禁用时的url参数名称,默认为 ddtk
    ondevtoolopen?(): void; // 开发者面板打开的回调,启用时url参数无效
    debugDelay?: number; // debug模式时的延迟 默认200ms
    interval?: number; // 定时器的时间间隔 默认200ms
    disableMenu?: boolean; // 是否禁用右键菜单 默认为 true
    stopIntervalTime?: number; // 在移动端时取消监视的等待时长
}

注意:

disableMenu 参数在 IE下无效,因为 IE 下右键会阻塞主进程,且无法监听。

md5 与 tk 绕过禁用

该库中使用 keymd5 配合的方式使得开发者可以在线上绕过禁用。流程如下:

先指定一个 key a(该值不要记录在代码中),使用 md5 加密得到一个值 b,将 b 作为 md5 参数传入,开发者在访问 url 的时候只需要带上 url 参数 ddtk = a,便可以绕过禁用。

disableDevtool 对象暴露了 md5 方法,可供开发者加密时使用:

disableDevtool.md5('xxx');

Script 属性配置

# 标准引用
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>

# 或者通过版本引用
## 使用指定版本
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/[email protected]/disable-devtool.min.js'></script>

## 使用最新版本
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/[email protected]/disable-devtool.min.js'></script>

# Script 使用属性配置
<script 
    disable-devtool-auto
    src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'
    md5='xxx'
    url='xxx'
    tk-name='xxx'
    debug-delay='xxx'
    interval='xxx'
    disable-menu='xxx'
></script>

注意:

  1. 属性配置时必须要带上 disable-devtool-auto 属性;
  2. 属性配置都是可选的,字段与 3.1 中一致,区别是将驼峰形式改成横线分割;
  3. Script 标签建议放在 body 标签内最底部。

Script 不使用属性配置

<script src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
<script>
    DisableDevtool({
        // 参数与3.1中一致
    })
</script>

效果展示

我的个人主页

结束

感谢作者,enjoy it !


本文作者:佩佩
原文链接:https://www.nange.cn/disable-devtool.html
版权声明:若无特殊注明,文章均为本站【楠格】原创,并以《知识共享署名-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》协议进行许可,转载时请以超链接形式标明文章原始出处和作者信息,否则谢绝转载!

12 条回应
  1. hackhp Chrome 86.0.4240.198 Windows 102021-4-26 · 13:30

    经测试Google Chrome通过右上角工具栏,就可以直接打开了。

  2. 111 Chrome 90.0.4430.72 Mac OS X 10_14_02021-4-20 · 0:39

    最简单的破解,打开开发者再打开网站,就破解了

  3. 林浩楠 Chrome 89.0.4389.114 Mac OS X 11_2_32021-4-3 · 9:22

    感觉这货在Mac上不管用吗?我macOS的谷歌浏览器,打开你的http://i.nan.ge,控制台、右键啥啥啥的,都没有禁用到,完全能打开。并没有看到Disable-devtool介绍的功效

    • 佩佩 Chrome 91.0.4464.5 Mac OS X Catalina 10_15_72021-4-4 · 4:19

      我的演示站默认允许右键菜单,不过由于我的实测,Chrome 仍然可以通过“菜单-更多工具-开发者工具”来打开开发者工具。而且我也测试了开发作者的演示站,也是如此,可能这是作者程序本身有Bug吧。

  4. qzjiajia Chrome 88.0.4324.182 Windows 102021-2-25 · 20:42

    好秀呀,你这备案号!

  5. hacker Chrome 69.0.3497.100 Windows 102021-1-16 · 14:52

    别拦我,我不会告诉你,这东西完全没有效果!

  6. OL Edge 87.0.664.75 Windows 102021-1-12 · 9:39

    请问在vue里具体如何使用呢?

  7. 你的ICP备案好秀啊 Edge 87.0.664.75 Windows 102021-1-11 · 22:35

    你的ICP备案好秀啊

  8. 达令 Chrome 87.0.4280.88 Windows 102020-12-23 · 10:05

    一直按F12没有用哈哈哈哈,按右键也没有用,可以的

    • 佩佩 Chrome 89.0.4356.6 Mac OS X 11_2_02020-12-24 · 1:54

      自测自定义参数不生效。

  9. 达令 Chrome 87.0.4280.88 Windows 102020-12-23 · 10:03

    F12没有用

  10. 达令 Chrome 87.0.4280.88 Windows 102020-12-23 · 10:02

    我按F12真的没用哈哈哈哈哈哈哈哈,右键鼠标也没有用