github/disable-devtool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 0.0.1

Browse Source
This commit is contained in:
theajack 2020-10-22 00:30:50 +08:00
parent 74ee0a9281
commit 79f118015e
20 changed files with 891 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
README.cn.md
View File

@ -0,0 +1,134 @@
<h1><a href='https://www.github.com/theajack/disable-devtool'>Disable-devtool</a></h1>
<h2>🚀 一行代码搞定禁用web开发者工具 </h2>
----
<p align="">
<a href="https://www.github.com/theajack/disable-devtool"><img src="https://img.shields.io/github/stars/theajack/disable-devtool.svg?style=social" alt="star"></a>
<a href="https://theajack.gitee.io"><img src="https://img.shields.io/badge/author-theajack-blue.svg?style=social" alt="Author"></a>
</p>
<p align="">
<a href="https://www.npmjs.com/package/disable-devtool"><img src="https://img.shields.io/npm/v/disable-devtool.svg" alt="Version"></a>
<a href="https://npmcharts.com/compare/disable-devtool?minimal=true"><img src="https://img.shields.io/npm/dm/disable-devtool.svg" alt="Downloads"></a>
<a href="https://cdn.jsdelivr.net/gh/theajack/disable-devtool/dist/disable-devtool.latest.min.js"><img src="https://img.shields.io/bundlephobia/minzip/disable-devtool.svg" alt="Size"></a>
<a href="https://github.com/theajack/disable-devtool/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/disable-devtool.svg" alt="License"></a>
<a href="https://github.com/theajack/disable-devtool/search?l=javascript"><img src="https://img.shields.io/github/languages/top/theajack/disable-devtool.svg" alt="TopLang"></a>
<a href="https://github.com/theajack/disable-devtool/issues"><img src="https://img.shields.io/github/issues-closed/theajack/disable-devtool.svg" alt="issue"></a>
<a href="https://www.github.com/theajack/disable-devtool"><img src="https://img.shields.io/librariesio/dependent-repos/npm/disable-devtool.svg" alt="Dependent"></a>
</p>
**[English](https://github.com/theajack/disable-devtool/blob/master/helper/README.en.md) | [在线试用/文档](https://theajack.gitee.io/disable-devtool) | [Gitee](https://gitee.com/theajack/disable-devtool)**
## 1. 快速使用
### 1.1 npm 引用
```
npm i disable-devtool
```
```js
import disableDevtool from 'disable-devtool';
disableDevtool();
```
### 1.2 script属性配置
```html
<script id='disable-devtool' src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
```
## 2.功能
disable-devtool 可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的 ‘代码搬运’
该库有以下特性:
1. 支持可配置是否禁用右键菜单
2. 禁用 f12 和 ctrl+shift+i 快捷键
3. 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
4. 开发者可以绕过禁用 (url参数使用tk配合md5加密)
5. 支持几乎所有浏览器
6. 高度可配置
7. 使用极简、体积小巧 (仅6kb)
8. 支持npm引用和script标签引用(属性配置)
## 3. 使用
### 3.1 npm使用时的配置参数
安装 disable-devtool
```
npm i disable-devtool
```
```js
import disableDevtool from 'disable-devtool';
disableDevtool(options);
```
options中的参数与说明如下：
```ts
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
}
```
### 3.2 md5 与 tk 绕过禁用
该库中使用 key 与 md5 配合的方式使得开发者可以在线上绕过禁用。
流程如下：
先指定一个 key a（该值不要记录在代码中），使用 md5 加密得到一个值 b，将b作为 md5 参数传入，开发者在访问 url 的时候只需要带上url参数 ddtk=a，便可以绕过禁用。
disableDevtool对象暴露了 md5 方法，可供开发者加密时使用：
```js
disableDevtool.md5('xxx');
```
### 3.2 script使用属性配置
```html
<script
id='disable-devtool'
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. 属性配置时必须要带上 `id='disable-devtool'` 属性
2. 属性配置都是可选的，字段与3.1中一致，区别是将驼峰形式改成横线分割
3. 该script标签建议放在body最底部
### 3.3 script不使用属性配置
```html
<script src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
<script>
DisableDevtool({
// 参数与3.1中一致
})
</script>
```

178
README.md
View File

@ -1,63 +1,133 @@
### This is a project build with [EBuild-Cli](https://github.com/theajack/ebuild-cli)
<h1><a href='https://www.github.com/theajack/disable-devtool'>Disable-devtool</a></h1>
### Install dependencies
<h2>🚀 Disable web developer tools with one line </h2>
----
<p align="">
<a href="https://www.github.com/theajack/disable-devtool"><img src="https://img.shields.io/github/stars/theajack/disable-devtool.svg?style=social" alt="star"></a>
<a href="https://theajack.gitee.io"><img src="https://img.shields.io/badge/author-theajack-blue.svg?style=social" alt="Author"></a>
</p>
<p align="">
<a href="https://www.npmjs.com/package/disable-devtool"><img src="https://img.shields.io/npm/v/disable-devtool.svg" alt="Version"></a>
<a href="https://npmcharts.com/compare/disable-devtool?minimal=true"><img src="https://img.shields.io/npm/dm/disable-devtool.svg" alt="Downloads"></a>
<a href="https://cdn.jsdelivr.net/gh/theajack/disable-devtool/dist/disable-devtool.latest.min.js"><img src="https://img.shields.io/bundlephobia/minzip/disable-devtool.svg" alt="Size"></a>
<a href="https://github.com/theajack/disable-devtool/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/disable-devtool.svg" alt="License"></a>
<a href="https://github.com/theajack/disable-devtool/search?l=javascript"><img src="https://img.shields.io/github/languages/top/theajack/disable-devtool.svg" alt="TopLang"></a>
<a href="https://github.com/theajack/disable-devtool/issues"><img src="https://img.shields.io/github/issues-closed/theajack/disable-devtool.svg" alt="issue"></a>
<a href="https://www.github.com/theajack/disable-devtool"><img src="https://img.shields.io/librariesio/dependent-repos/npm/disable-devtool.svg" alt="Dependent"></a>
</p>
**[中文](https://github.com/theajack/disable-devtool/blob/master/README.cn.md) | [online trial/document](https://theajack.gitee.io/disable-devtool) | [Gitee](https://gitee.com/theajack/disable-devtool)**
## 1. Quick use
### 1.1 npm reference
```
npm install
npm i disable-devtool
```
use taobao repository
```
npm install --registry https://registry.npm.taobao.org
```
### Init git repository
```
git init
git add README.md
git commit -m "first commit"
git remote add origin {Your remote git repository address}
git push -u origin master
```
### Commond
```
npm run dev
npm run build
npm run publish
npm run lint
```
### ebuild.config.js
```js
module.exports = {
'tranToEs5InNpm': true, // wether use babel
'packageFiles': [
'./package.json'
// config which package.json files need to modify version
// '../npm/package.json', // this is an example
],
'versioJsEs6Module': true, // use es6(export default) or require(module.exports=)
'versioJsFiles': [
// config which version.js files need to modify version
// '../npm/version.js', // this is an example
],
'name': '',
'version': '0.0.1',
'npmExternals': {
// example
// 'md5': 'md5'
},
'npmPaths': [
'npm'
]
};
import disableDevtool from 'disable-devtool';
disableDevtool();
```
### Vscode plugin
### 1.2 script attribute configuration
Install 'ESLint' plugin
```html
<script id='disable-devtool' src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
```
## 2. Function
disable-devtool can disable all the methods that can enter the developer tools to prevent ‘code handling’ through the developer tools
The library has the following features:
1. Support configurable whether to disable the right-click menu
2. Disable f12 and ctrl+shift+i shortcuts
3. Support recognition to open the developer tools from the browser menu bar and close the current page
4. Developers can bypass the disablement (use tk and md5 encryption for url parameters)
5. Support almost all browsers
6. Highly configurable
7. Minimal use, small size (only 6kb)
8. Support npm reference and script tag reference (attribute configuration)
## 3. Use
### 3.1 Configuration parameters when using npm
Install disable-devtool
```
npm i disable-devtool
```
```js
import disableDevtool from 'disable-devtool';
disableDevtool(options);
```
The parameters and descriptions in options are as follows:
```ts
declare interface optionStatic {
md5?: string; // Bypass the disabled md5 value, see 3.2 for details, the bypass disable is not enabled by default
url?: string; // Jump to the page when closing the page fails, the default value is localhost
tkName?: string; // Bypass the url parameter name when disabled, the default is ddtk
ondevtoolopen?(): void; // Callback for opening the developer panel, the url parameter is invalid when enabled
debugDelay?: number; // The delay in debug mode is 200ms by default
interval?: number; // Timer interval is 200ms by default
disableMenu?: boolean; // Whether to disable the right-click menu The default is true
}
```
### 3.2 md5 and tk bypass disable
The combination of key and md5 in the library allows developers to bypass the disabling online.
The process is as follows:
First specify a key a (the value should not be recorded in the code), use md5 encryption to obtain a value b, and pass in b as the md5 parameter. Developers only need to bring the url parameter ddtk=a when accessing the url. Bypass disabled.
The disableDevtool object exposes the md5 method, which can be used by developers when encrypting:
```js
disableDevtool.md5('xxx');
```
### 3.2 script uses attribute configuration
```html
<script
id='disable-devtool'
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>
```
Note:
1. You must bring the id='disable-devtool'` attribute when configuring attributes
2. Attribute configuration is optional, the fields are the same as in 3.1, the difference is that the hump form is changed to horizontal line division
3. The script tag is recommended to be placed at the bottom of the body
### 3.3 script does not use attribute configuration
```html
<script src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
<script>
DisableDevtool({
// The parameters are the same as in 3.1
})
</script>
```

162
index.html Normal file
View File

@ -0,0 +1,162 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一行代码搞定禁用web开发者工具</title>
<style>
code{
white-space: pre;
font-family: Consolas, "Courier New", monospace;
color: #fff;
background-color: #444;
display: block;
overflow-x: auto;
border-radius: 5px;
padding: 10px;
}
body{
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
</style>
</head>
<body>
<h1><a style='color:#222' href='https://www.github.com/theajack/disable-devtool'>Disable-devtool</a></h1>
<h2>🚀 Disable web developer tools with one line </h2>
<p>
<a href="https://www.github.com/theajack/disable-devtool"><img
src="https://img.shields.io/github/stars/theajack/disable-devtool.svg?style=social" alt="star"></a>
<a href="https://theajack.gitee.io"><img
src="https://img.shields.io/badge/author-theajack-blue.svg?style=social" alt="Author"></a>
</p>
<p>
<a href="https://www.npmjs.com/package/disable-devtool"><img
src="https://img.shields.io/npm/v/disable-devtool.svg" alt="Version"></a>
<a href="https://npmcharts.com/compare/disable-devtool?minimal=true"><img
src="https://img.shields.io/npm/dm/disable-devtool.svg" alt="Downloads"></a>
<a href="https://cdn.jsdelivr.net/gh/theajack/disable-devtool/dist/disable-devtool.latest.min.js"><img
src="https://img.shields.io/bundlephobia/minzip/disable-devtool.svg" alt="Size"></a>
<a href="https://github.com/theajack/disable-devtool/blob/master/LICENSE"><img
src="https://img.shields.io/npm/l/disable-devtool.svg" alt="License"></a>
<a href="https://github.com/theajack/disable-devtool/search?l=javascript"><img
src="https://img.shields.io/github/languages/top/theajack/disable-devtool.svg" alt="TopLang"></a>
<a href="https://github.com/theajack/disable-devtool/issues"><img
src="https://img.shields.io/github/issues-closed/theajack/disable-devtool.svg" alt="issue"></a>
<a href="https://www.github.com/theajack/disable-devtool"><img
src="https://img.shields.io/librariesio/dependent-repos/npm/disable-devtool.svg" alt="Dependent"></a>
</p>
<p><strong><a href="https://github.com/theajack/disable-devtool/blob/master/README.cn.md">中文</a> | <a
href="https://theajack.gitee.io/disable-devtool">online trial/document</a> | <a
href="https://gitee.com/theajack/disable-devtool">Gitee</a></strong></p>
<h2>1. Quick use</h2>
<h3>1.1 npm reference</h3>
<p><code>npm i disable-devtool</code></p>
<p>
<code>import disableDevtool from&#39;disable-devtool&#39;;
disableDevtool();</code>
</p>
<h3>1.2 script attribute configuration</h3>
<p><code>&lt;script id=&#39;disable-devtool&#39; src=&#39;https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js&#39;&gt;&lt;/script&gt;</code></p>
<h2>2. Function</h2>
<p>disable-devtool can disable all the methods that can enter the developer tools to prevent ‘code handling’ through
the developer tools</p>
<p>The library has the following features:</p>
<ol>
<li>Support configurable whether to disable the right-click menu</li>
<li>Disable f12 and ctrl+shift+i shortcuts</li>
<li>Support recognition to open the developer tools from the browser menu bar and close the current page</li>
<li>Developers can bypass the disablement (use tk and md5 encryption for url parameters)</li>
<li>Support almost all browsers</li>
<li>Highly configurable</li>
<li>Minimal use, small size (only 6kb)</li>
<li>Support npm reference and script tag reference (attribute configuration)</li>
</ol>
<h2>3. Use</h2>
<h3>3.1 Configuration parameters when using npm</h3>
<p>Install disable-devtool</p>
<p><code>npm i disable-devtool</code></p>
<p><code>import disableDevtool from&#39;disable-devtool&#39;;
disableDevtool(options);</code></p>
<p>The parameters and descriptions in options are as follows:</p>
<p><code>declare interface optionStatic {
md5?: string; // Bypass the disabled md5 value, see 3.2 for details, the bypass disable is not enabled by default
url?: string; // Jump to the page when closing the page fails, the default value is localhost
tkName?: string; // Bypass the url parameter name when disabled, the default is ddtk
ondevtoolopen?(): void; // Callback for opening the developer panel, the url parameter is invalid when enabled
debugDelay?: number; // The delay in debug mode is 200ms by default
interval?: number; // Timer interval is 200ms by default
disableMenu?: boolean; // Whether to disable the right-click menu The default is true
}</code></p>
<h3>3.2 md5 and tk bypass disable</h3>
<p>The combination of key and md5 in the library allows developers to bypass the disabling online.</p>
<p>The process is as follows:</p>
<p>First specify a key a (the value should not be recorded in the code), use md5 encryption to obtain a value b, and
pass in b as the md5 parameter. Developers only need to bring the url parameter ddtk=a when accessing the url.
Bypass disabled.</p>
<p>The disableDevtool object exposes the md5 method, which can be used by developers when encrypting:</p>
<p><code>disableDevtool.md5(&#39;xxx&#39;);</code></p>
<h3>3.2 script uses attribute configuration</h3>
<p><code>&lt;script
id=&#39;disable-devtool&#39;
src=&#39;https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js&#39;
md5=&#39;xxx&#39;
url=&#39;xxx&#39;
tk-name=&#39;xxx&#39;
debug-delay=&#39;xxx&#39;
interval=&#39;xxx&#39;
disable-menu=&#39;xxx&#39;>
&lt;/script&gt;</code></p>
</blockquote>
<p>Note:<br>
1. You must bring the id=&#39;disable-devtool&#39;` attribute when configuring attributes<br>
2.Attribute configuration is optional, the fields are the same as in 3.1, the difference is that the hump form is
changed to horizontal line division <br>
3. The script tag is recommended to be placed at the bottom of the body</p>
<h3>3.3 script does not use attribute configuration</h3>
<p><code>&lt;script src=&#39;https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js&#39;&gt;&lt;/script&gt;
&lt;script&gt;
DisableDevtool({
// The parameters are the same as in 3.1
})
&lt;/script&gt;</code></p>
<script id='disable-devtool' src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
</body>
</html>

134
npm/README.cn.md
View File

@ -0,0 +1,134 @@
<h1><a href='https://www.github.com/theajack/disable-devtool'>Disable-devtool</a></h1>
<h2>🚀 一行代码搞定禁用web开发者工具 </h2>
----
<p align="">
<a href="https://www.github.com/theajack/disable-devtool"><img src="https://img.shields.io/github/stars/theajack/disable-devtool.svg?style=social" alt="star"></a>
<a href="https://theajack.gitee.io"><img src="https://img.shields.io/badge/author-theajack-blue.svg?style=social" alt="Author"></a>
</p>
<p align="">
<a href="https://www.npmjs.com/package/disable-devtool"><img src="https://img.shields.io/npm/v/disable-devtool.svg" alt="Version"></a>
<a href="https://npmcharts.com/compare/disable-devtool?minimal=true"><img src="https://img.shields.io/npm/dm/disable-devtool.svg" alt="Downloads"></a>
<a href="https://cdn.jsdelivr.net/gh/theajack/disable-devtool/dist/disable-devtool.latest.min.js"><img src="https://img.shields.io/bundlephobia/minzip/disable-devtool.svg" alt="Size"></a>
<a href="https://github.com/theajack/disable-devtool/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/disable-devtool.svg" alt="License"></a>
<a href="https://github.com/theajack/disable-devtool/search?l=javascript"><img src="https://img.shields.io/github/languages/top/theajack/disable-devtool.svg" alt="TopLang"></a>
<a href="https://github.com/theajack/disable-devtool/issues"><img src="https://img.shields.io/github/issues-closed/theajack/disable-devtool.svg" alt="issue"></a>
<a href="https://www.github.com/theajack/disable-devtool"><img src="https://img.shields.io/librariesio/dependent-repos/npm/disable-devtool.svg" alt="Dependent"></a>
</p>
**[English](https://github.com/theajack/disable-devtool/blob/master/helper/README.en.md) | [在线试用/文档](https://theajack.gitee.io/disable-devtool) | [Gitee](https://gitee.com/theajack/disable-devtool)**
## 1. 快速使用
### 1.1 npm 引用
```
npm i disable-devtool
```
```js
import disableDevtool from 'disable-devtool';
disableDevtool();
```
### 1.2 script属性配置
```html
<script id='disable-devtool' src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
```
## 2.功能
disable-devtool 可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的 ‘代码搬运’
该库有以下特性:
1. 支持可配置是否禁用右键菜单
2. 禁用 f12 和 ctrl+shift+i 快捷键
3. 支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
4. 开发者可以绕过禁用 (url参数使用tk配合md5加密)
5. 支持几乎所有浏览器
6. 高度可配置
7. 使用极简、体积小巧 (仅6kb)
8. 支持npm引用和script标签引用(属性配置)
## 3. 使用
### 3.1 npm使用时的配置参数
安装 disable-devtool
```
npm i disable-devtool
```
```js
import disableDevtool from 'disable-devtool';
disableDevtool(options);
```
options中的参数与说明如下：
```ts
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
}
```
### 3.2 md5 与 tk 绕过禁用
该库中使用 key 与 md5 配合的方式使得开发者可以在线上绕过禁用。
流程如下：
先指定一个 key a（该值不要记录在代码中），使用 md5 加密得到一个值 b，将b作为 md5 参数传入，开发者在访问 url 的时候只需要带上url参数 ddtk=a，便可以绕过禁用。
disableDevtool对象暴露了 md5 方法，可供开发者加密时使用：
```js
disableDevtool.md5('xxx');
```
### 3.2 script使用属性配置
```html
<script
id='disable-devtool'
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. 属性配置时必须要带上 `id='disable-devtool'` 属性
2. 属性配置都是可选的，字段与3.1中一致，区别是将驼峰形式改成横线分割
3. 该script标签建议放在body最底部
### 3.3 script不使用属性配置
```html
<script src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
<script>
DisableDevtool({
// 参数与3.1中一致
})
</script>
```

182
npm/README.md
View File

@ -1,67 +1,133 @@
### This is a project build with [EBuild-Cli](https://github.com/theajack/ebuild-cli)
<h1><a href='https://www.github.com/theajack/disable-devtool'>Disable-devtool</a></h1>
### Install dependencies
<h2>🚀 Disable web developer tools with one line </h2>
----
<p align="">
<a href="https://www.github.com/theajack/disable-devtool"><img src="https://img.shields.io/github/stars/theajack/disable-devtool.svg?style=social" alt="star"></a>
<a href="https://theajack.gitee.io"><img src="https://img.shields.io/badge/author-theajack-blue.svg?style=social" alt="Author"></a>
</p>
<p align="">
<a href="https://www.npmjs.com/package/disable-devtool"><img src="https://img.shields.io/npm/v/disable-devtool.svg" alt="Version"></a>
<a href="https://npmcharts.com/compare/disable-devtool?minimal=true"><img src="https://img.shields.io/npm/dm/disable-devtool.svg" alt="Downloads"></a>
<a href="https://cdn.jsdelivr.net/gh/theajack/disable-devtool/dist/disable-devtool.latest.min.js"><img src="https://img.shields.io/bundlephobia/minzip/disable-devtool.svg" alt="Size"></a>
<a href="https://github.com/theajack/disable-devtool/blob/master/LICENSE"><img src="https://img.shields.io/npm/l/disable-devtool.svg" alt="License"></a>
<a href="https://github.com/theajack/disable-devtool/search?l=javascript"><img src="https://img.shields.io/github/languages/top/theajack/disable-devtool.svg" alt="TopLang"></a>
<a href="https://github.com/theajack/disable-devtool/issues"><img src="https://img.shields.io/github/issues-closed/theajack/disable-devtool.svg" alt="issue"></a>
<a href="https://www.github.com/theajack/disable-devtool"><img src="https://img.shields.io/librariesio/dependent-repos/npm/disable-devtool.svg" alt="Dependent"></a>
</p>
**[中文](https://github.com/theajack/disable-devtool/blob/master/README.cn.md) | [online trial/document](https://theajack.gitee.io/disable-devtool) | [Gitee](https://gitee.com/theajack/disable-devtool)**
## 1. Quick use
### 1.1 npm reference
```
npm install
npm i disable-devtool
```
use taobao repository
```
npm install --registry https://registry.npm.taobao.org
```
### Init git repository
```
git init
git add README.md
git commit -m "first commit"
git remote add origin {Your remote git repository address}
git push -u origin master
```
### Commond
```
npm run dev
npm run build
npm run build:npm
npm run publish
npm run lint
npm run copy-latest
npm run modify-version
npm run copy-npm
```
### ebuild.config.js
```js
module.exports = {
'tranToEs5InNpm': true, // wether use babel
'packageFiles': [
'./package.json'
// config which package.json files need to modify version
// '../npm/package.json', // this is an example
],
'versioJsEs6Module': true, // use es6(export default) or require(module.exports=)
'versioJsFiles': [
// config which version.js files need to modify version
// '../npm/version.js', // this is an example
],
'name': '',
'version': '0.0.1',
'npmExternals': {
// example
// 'md5': 'md5'
},
'npmPaths': [
'npm'
]
};
import disableDevtool from 'disable-devtool';
disableDevtool();
```
### Vscode plugin
### 1.2 script attribute configuration
Install 'ESLint' plugin
```html
<script id='disable-devtool' src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
```
## 2. Function
disable-devtool can disable all the methods that can enter the developer tools to prevent ‘code handling’ through the developer tools
The library has the following features:
1. Support configurable whether to disable the right-click menu
2. Disable f12 and ctrl+shift+i shortcuts
3. Support recognition to open the developer tools from the browser menu bar and close the current page
4. Developers can bypass the disablement (use tk and md5 encryption for url parameters)
5. Support almost all browsers
6. Highly configurable
7. Minimal use, small size (only 6kb)
8. Support npm reference and script tag reference (attribute configuration)
## 3. Use
### 3.1 Configuration parameters when using npm
Install disable-devtool
```
npm i disable-devtool
```
```js
import disableDevtool from 'disable-devtool';
disableDevtool(options);
```
The parameters and descriptions in options are as follows:
```ts
declare interface optionStatic {
md5?: string; // Bypass the disabled md5 value, see 3.2 for details, the bypass disable is not enabled by default
url?: string; // Jump to the page when closing the page fails, the default value is localhost
tkName?: string; // Bypass the url parameter name when disabled, the default is ddtk
ondevtoolopen?(): void; // Callback for opening the developer panel, the url parameter is invalid when enabled
debugDelay?: number; // The delay in debug mode is 200ms by default
interval?: number; // Timer interval is 200ms by default
disableMenu?: boolean; // Whether to disable the right-click menu The default is true
}
```
### 3.2 md5 and tk bypass disable
The combination of key and md5 in the library allows developers to bypass the disabling online.
The process is as follows:
First specify a key a (the value should not be recorded in the code), use md5 encryption to obtain a value b, and pass in b as the md5 parameter. Developers only need to bring the url parameter ddtk=a when accessing the url. Bypass disabled.
The disableDevtool object exposes the md5 method, which can be used by developers when encrypting:
```js
disableDevtool.md5('xxx');
```
### 3.2 script uses attribute configuration
```html
<script
id='disable-devtool'
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>
```
Note:
1. You must bring the id='disable-devtool'` attribute when configuring attributes
2. Attribute configuration is optional, the fields are the same as in 3.1, the difference is that the hump form is changed to horizontal line division
3. The script tag is recommended to be placed at the bottom of the body
### 3.3 script does not use attribute configuration
```html
<script src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
<script>
DisableDevtool({
// The parameters are the same as in 3.1
})
</script>
```

1
npm/disable-devtool.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
npm/ebuild.min.js vendored
View File

@ -1 +0,0 @@
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("ebuild",[],t):"object"==typeof exports?exports.ebuild=t():e.ebuild=t()}(this,(function(){return function(e){var t={};function o(n){if(t[n])return t[n].exports;var r=t[n]={i:n,l:!1,exports:{}};return e[n].call(r.exports,r,r.exports,o),r.l=!0,r.exports}return o.m=e,o.c=t,o.d=function(e,t,n){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(o.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)o.d(n,r,function(t){return e[t]}.bind(null,r));return n},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=0)}([function(e,t){console.log("Hello world!"),alert("Hello world!")}])}));

17
npm/index.d.ts vendored
View File

@ -0,0 +1,17 @@
declare interface optionStatic {
md5?: string;
url?: string;
tkName?: string;
ondevtoolopen?(): void; // ondevtoolopen 优先级高于 url
debugDelay?: number;
interval?: number;
disableMenu?: boolean;
}
declare interface DDTStatic {
(option?: optionStatic): void;
md5(text?: string): string;
}
declare const ddt: DDTStatic;
export default ddt;

15
npm/package.json
View File

@ -1,20 +1,21 @@
{
"name": "disable-devtool",
"version": "0.0.1",
"description": "Ebuild project",
"main": "ebuild.min.js",
"description": "Disable web developer tools from the f12 button, right-click and browser ",
"main": "disable-devtool.min.js",
"scripts": {
"dev": "webpack-dev-server --open --config webpack-config/dev.js",
"start": "npm run dev",
"build": "webpack --config webpack-config/build.js",
"publish": "npm publish npm",
"dev": "webpack-dev-server --open --config webpack-config/dev.js",
"lint": "eslint src --ext js"
},
"unpkg": "ebuild.min.js",
"jsdelivr": "ebuild.min.js",
"unpkg": "disable-devtool.min.js",
"jsdelivr": "disable-devtool.min.js",
"typings": "index.d.ts",
"repository": {
"type": "git",
"url": "https://github.com/theajack/ebuild-cli"
"url": "https://github.com/theajack/disable-devtool"
},
"keywords": [
"ebuild-cli"
@ -22,7 +23,7 @@
"author": "theajack",
"license": "MIT",
"bugs": {
"url": ""
"url": "https://github.com/theajack/disable-devtool/issues"
},
"homepage": ""
}

12
package.json
View File

@ -1,13 +1,13 @@
{
"name": "disable-devtool",
"version": "0.0.1",
"description": "Ebuild project",
"main": "ebuild.min.js",
"unpkg": "ebuild.min.js",
"jsdelivr": "ebuild.min.js",
"description": "Disable web developer tools from the f12 button, right-click and browser ",
"main": "disable-devtool.min.js",
"unpkg": "disable-devtool.min.js",
"jsdelivr": "disable-devtool.min.js",
"typings": "index.d.ts",
"bugs": {
"url": ""
"url": "https://github.com/theajack/disable-devtool/issues"
},
"homepage": "",
"scripts": {
@ -20,7 +20,7 @@
"author": "theajack",
"repository": {
"type": "git",
"url": "https://github.com/theajack/ebuild-cli"
"url": "https://github.com/theajack/disable-devtool"
},
"keywords": [
"ebuild-cli"

8
public/index.html
View File

@ -4,9 +4,13 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>A project build with EBuild-Cli</title>
<title>Disable Devtool Demo</title>
</head>
<body>
<script src="./bundle.js"></script>
<!-- <script src="./bundle.js"></script> -->
<script id='disable-devtool'
md5='d4de605ccb923b7e876b3218a1474653'
tk-name='tk'
src="../npm/disable-devtool.min.js"></script>
</body>
</html>

11
public/main.js
View File

@ -1,3 +1,10 @@
import {disableDevtool} from '../src';
import disableDevtool from '../src';
disableDevtool();
disableDevtool({
md5: 'd4de605ccb923b7e876b3218a1474653',
// url: 'https://www.qq.com',
ondevtoolopen: () => {
// window.location.href = 'https://www.qq.com';
},
tkName: 'xx',
});

7
src/config.js
View File

@ -2,9 +2,12 @@ import {closeWindow} from './util';
export let config = {
md5: '',
ondevtoolopen: closeWindow,
homeUrl: 'http://localhost',
ondevtoolopen: closeWindow, // ondevtoolopen 优先级高于 url
url: 'http://localhost',
tkName: 'ddtk',
debugDelay: 200,
interval: 200,
disableMenu: true
};
export function mergeConfig (opts = {}) {

17
src/index.d.ts vendored
View File

@ -0,0 +1,17 @@
declare interface optionStatic {
md5?: string;
url?: string;
tkName?: string;
ondevtoolopen?(): void; // ondevtoolopen 优先级高于 url
debugDelay?: number;
interval?: number;
disableMenu?: boolean;
}
declare interface DDTStatic {
(option?: optionStatic): void;
md5(text?: string): string;
}
declare const ddt: DDTStatic;
export default ddt;

66
src/index.js
View File

@ -1,65 +1,3 @@
import {disableKeyAndMenu} from './key-menu';
import {initInterval, registInterval} from './interval';
import {closeWindow, getNowTime, getUrlParam} from './util';
import {mergeConfig, config} from './config';
import md5 from './md5';
import {disableDevtool} from './main';
let _onDevToolOpen = closeWindow;
export function disableDevtool (opts) {
mergeConfig(opts);
if (checkTk()) {
return;
}
initInterval();
disableKeyAndMenu();
initDebugger();
initDevTool();
}
export function onDevToolOpen () {
_onDevToolOpen();
}
function checkTk () {
if (config.md5) { // 启用了 md5
let tk = getUrlParam(config.tkName);
if (md5(tk) === config.md5) { // 命中tk
return true;
}
}
return false;
}
function initDebugger () {
let last = getNowTime();
registInterval(() => {
eval('debugger');
let now = getNowTime();
if (now - last > 1200) {
onDevToolOpen();
} else {
last = now;
}
});
}
function initDevTool () {
const isFF = ~navigator.userAgent.indexOf('Firefox');
let toTest = '';
if (isFF) {
toTest = /./;
toTest.toString = function () {
onDevToolOpen();
};
} else {
toTest = new Image();
toTest.__defineGetter__('id', function () {
onDevToolOpen();
});
}
registInterval(() => {
console.log(toTest);
console.clear && console.clear();
});
}
export default disableDevtool;

20
src/interval.js
View File

@ -1,10 +1,20 @@
let interval = null;
import {config} from './config';
import {isPC} from './util';
let interval = null, timer = null;
let calls = [];
export function initInterval (time = 1000) {
export function initInterval () {
interval = window.setInterval(() => {
calls.forEach(fn => {fn();});
}, time);
}, config.interval);
// 两秒之后判断 如果不是pc去掉定时器interval，为了优化移动端的性能
// 如果控制面板被打开了该定时器timer会被清除
timer = setTimeout(() => {
if (!isPC()) {
clearInterval();
}
}, 2000);
}
export function registInterval (fn) {
@ -14,3 +24,7 @@ export function registInterval (fn) {
export function clearInterval () {
window.clearInterval(interval);
}
export function clearTimeout () {
window.clearTimeout(timer);
}

12
src/key-menu.js
View File

@ -1,3 +1,5 @@
import {config} from './config';
export function disableKeyAndMenu () {
window.addEventListener('keydown', (e) => {
if (e.keyCode === 123 || (e.shiftKey && e.ctrlKey && e.keyCode === 73)) {
@ -5,8 +7,10 @@ export function disableKeyAndMenu () {
return false;
}
});
window.addEventListener('contextmenu', (e) => {
e.returnValue = false;
return false;
});
if (config.disableMenu) {
window.addEventListener('contextmenu', (e) => {
e.returnValue = false;
return false;
});
}
}

91
src/main.js Normal file
View File

@ -0,0 +1,91 @@
import {disableKeyAndMenu} from './key-menu';
import {initInterval, registInterval, clearTimeout} from './interval';
import {formatName, getNowTime, getUrlParam} from './util';
import {mergeConfig, config} from './config';
import md5 from './md5';
export function disableDevtool (opts) {
mergeConfig(opts);
if (checkTk()) {
return;
}
initInterval();
disableKeyAndMenu();
initDevTool();
initDebugger();
}
disableDevtool.md5 = md5;
export function onDevToolOpen () {
clearTimeout();
config.ondevtoolopen();
}
function checkTk () {
if (config.md5) { // 启用了 md5
let tk = getUrlParam(config.tkName);
if (md5(tk) === config.md5) { // 命中tk
return true;
}
}
return false;
}
function initDebugger () {
let fn = new Function('debugger');
let last = getNowTime();
registInterval(() => {
fn();
let now = getNowTime();
// interval 时间是 config.interval，设置config.debugDelay是为了给一个执行的时间
if (now - last > config.interval + config.debugDelay) {
onDevToolOpen();
} else {
last = now;
}
});
}
function initDevTool () {
const isFF = ~navigator.userAgent.indexOf('Firefox');
let toTest = '';
if (isFF) {
toTest = /./;
toTest.toString = function () {
onDevToolOpen();
};
} else {
toTest = new Image();
toTest.__defineGetter__('id', function () {
onDevToolOpen();
});
}
registInterval(() => {
console.log(toTest);
console.clear && console.clear();
});
}
function checkScriptUse () {
let dom = document.getElementById('disable-devtool');
if (!dom) {
return;
}
let json = {};
['md5', 'url', 'tk-name', 'debug-delay', 'interval', 'disable-menu'].forEach(name => {
let value = dom.getAttribute(name);
if (value !== null) {
if (name === 'debug-delay' || name === 'interval') {
value = parseInt(value);
} else if (name === 'disable-menu') {
value = value === 'false' ? false : true;
}
json[formatName(name)] = value;
}
});
disableDevtool(json);
}
checkScriptUse();

26
src/util.js
View File

@ -1,12 +1,16 @@
import {config} from './config';
export function isPC () {
return !/(iphone|ipad|ipod|ios|android)/i.test(navigator.userAgent.toLowerCase());
}
export function closeWindow (url = 'https://localhost') {
export function closeWindow () {
// 需要是有js跳转到这个页面才可以关闭这个页面
window.opener = null;
window.open('', '_self');
window.close();
window.location.href = url;
// 否则执行跳转到 url
window.location.href = config.url;
}
export function getNowTime () {
@ -24,3 +28,21 @@ export function getUrlParam (name) {
}
return '';
}
export function formatName (name) {
if (name.indexOf('-') === -1) {
return name;
}
var flag = false;
return name.split('').map(c => {
if (c === '-') {
flag = true;
return '';
}
if (flag) {
flag = false;
return c.toUpperCase();
}
return c;
}).join('');
}

4
webpack-config/build.js
View File

@ -6,8 +6,8 @@ module.exports = {
entry: path.resolve('./', 'src/index.js'),
output: {
path: path.resolve('./', 'npm'),
filename: 'ebuild.min.js',
library: 'ebuild',
filename: 'disable-devtool.min.js',
library: 'DisableDevtool',
libraryTarget: 'umd',
umdNamedDefine: true,
globalObject: 'this'