diff --git a/README.cn.md b/README.cn.md index e69de29..0a7a2ed 100644 --- a/README.cn.md +++ b/README.cn.md @@ -0,0 +1,134 @@ + +

Disable-devtool

+ +

🚀 一行代码搞定禁用web开发者工具

+ +---- + +

+ star + Author +

+ +

+ Version + Downloads + Size + License + TopLang + issue + Dependent +

+ +**[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 + +``` + +## 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 + +``` + +注: + +1. 属性配置时必须要带上 `id='disable-devtool'` 属性 +2. 属性配置都是可选的,字段与3.1中一致,区别是将驼峰形式改成横线分割 +3. 该script标签建议放在body最底部 + +### 3.3 script不使用属性配置 + +```html + + +``` \ No newline at end of file diff --git a/README.md b/README.md index d179dc7..b07c7b8 100644 --- a/README.md +++ b/README.md @@ -1,63 +1,133 @@ -### This is a project build with [EBuild-Cli](https://github.com/theajack/ebuild-cli) +

Disable-devtool

-### Install dependencies +

🚀 Disable web developer tools with one line

+ +---- + +

+ star + Author +

+ +

+ Version + Downloads + Size + License + TopLang + issue + Dependent +

+ +**[中文](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 \ No newline at end of file +```html + +``` + +## 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 + +``` + +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 + + +``` \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..716e72e --- /dev/null +++ b/index.html @@ -0,0 +1,162 @@ + + + + + + + 一行代码搞定禁用web开发者工具 + + + + +

Disable-devtool

+ +

🚀 Disable web developer tools with one line

+ + +

+ star + Author +

+ +

+ Version + Downloads + Size + License + TopLang + issue + Dependent +

+ +

中文 | online trial/document | Gitee

+ +

1. Quick use

+ +

1.1 npm reference

+ +

npm i disable-devtool

+ +

+ import disableDevtool from'disable-devtool'; +disableDevtool(); +

+ +

1.2 script attribute configuration

+ +

<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. +
  3. Disable f12 and ctrl+shift+i shortcuts
  4. +
  5. Support recognition to open the developer tools from the browser menu bar and close the current page
  6. +
  7. Developers can bypass the disablement (use tk and md5 encryption for url parameters)
  8. +
  9. Support almost all browsers
  10. +
  11. Highly configurable
  12. +
  13. Minimal use, small size (only 6kb)
  14. +
  15. Support npm reference and script tag reference (attribute configuration)
  16. +
+ +

3. Use

+ +

3.1 Configuration parameters when using npm

+ +

Install disable-devtool

+ +

npm i disable-devtool

+ +

import disableDevtool from'disable-devtool'; +disableDevtool(options);

+ +

The parameters and descriptions in options are as follows:

+ +

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:

+ +

disableDevtool.md5('xxx');

+ +

3.2 script uses attribute configuration

+ +

<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

+ +

<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>

+ + + + \ No newline at end of file diff --git a/npm/README.cn.md b/npm/README.cn.md index e69de29..0a7a2ed 100644 --- a/npm/README.cn.md +++ b/npm/README.cn.md @@ -0,0 +1,134 @@ + +

Disable-devtool

+ +

🚀 一行代码搞定禁用web开发者工具

+ +---- + +

+ star + Author +

+ +

+ Version + Downloads + Size + License + TopLang + issue + Dependent +

+ +**[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 + +``` + +## 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 + +``` + +注: + +1. 属性配置时必须要带上 `id='disable-devtool'` 属性 +2. 属性配置都是可选的,字段与3.1中一致,区别是将驼峰形式改成横线分割 +3. 该script标签建议放在body最底部 + +### 3.3 script不使用属性配置 + +```html + + +``` \ No newline at end of file diff --git a/npm/README.md b/npm/README.md index 9b9c7e8..b07c7b8 100644 --- a/npm/README.md +++ b/npm/README.md @@ -1,67 +1,133 @@ -### This is a project build with [EBuild-Cli](https://github.com/theajack/ebuild-cli) +

Disable-devtool

-### Install dependencies +

🚀 Disable web developer tools with one line

+ +---- + +

+ star + Author +

+ +

+ Version + Downloads + Size + License + TopLang + issue + Dependent +

+ +**[中文](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 \ No newline at end of file +```html + +``` + +## 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 + +``` + +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 + + +``` \ No newline at end of file diff --git a/npm/disable-devtool.min.js b/npm/disable-devtool.min.js new file mode 100644 index 0000000..86fa3f6 --- /dev/null +++ b/npm/disable-devtool.min.js @@ -0,0 +1 @@ +!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define("DisableDevtool",[],n):"object"==typeof exports?exports.DisableDevtool=n():e.DisableDevtool=n()}(this,(function(){return function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=0)}([function(e,n,t){"use strict";function r(){return(new Date).getTime()}t.r(n);var o={md5:"",ondevtoolopen:function(){window.opener=null,window.open("","_self"),window.close(),window.location.href=o.url},url:"http://localhost",tkName:"ddtk",debugDelay:200,interval:200,disableMenu:!0};var u=null,i=null,a=[];function l(){u=window.setInterval(()=>{a.forEach(e=>{e()})},o.interval),i=setTimeout(()=>{/(iphone|ipad|ipod|ios|android)/i.test(navigator.userAgent.toLowerCase())&&window.clearInterval(u)},2e3)}function f(e){a.push(e)}function c(e,n,t,r,o,u){return b((i=b(b(n,e),b(r,u)))<<(a=o)|i>>>32-a,t);var i,a}function d(e,n,t,r,o,u,i){return c(n&t|~n&r,e,n,o,u,i)}function s(e,n,t,r,o,u,i){return c(n&r|t&~r,e,n,o,u,i)}function v(e,n,t,r,o,u,i){return c(n^t^r,e,n,o,u,i)}function p(e,n,t,r,o,u,i){return c(t^(n|~r),e,n,o,u,i)}function b(e,n){var t=(65535&e)+(65535&n);return(e>>16)+(n>>16)+(t>>16)<<16|65535&t}var y=function(e){return function(e){for(var n="0123456789abcdef",t="",r=0;r<4*e.length;r++)t+=n.charAt(e[r>>2]>>r%4*8+4&15)+n.charAt(e[r>>2]>>r%4*8&15);return t}(function(e,n){e[n>>5]|=128<>>9<<4)]=n;for(var t=1732584193,r=-271733879,o=-1732584194,u=271733878,i=0;i>5]|=(255&e.charCodeAt(t/8))<0&&void 0!==arguments[0]?arguments[0]:{};for(var n in o)e[n]&&typeof o[n]==typeof e[n]&&(o[n]=e[n])}(e),function(){if(o.md5){var e=function(e){var n=window.location.search;if(""!==n){var t=new RegExp("(^|&)"+e+"=([^&]*)(&|$)","i"),r=n.substr(1).match(t);if(null!=r)return unescape(r[2])}return""}(o.tkName);if(y(e)===o.md5)return!0}return!1}())||(l(),window.addEventListener("keydown",e=>{if(123===e.keyCode||e.shiftKey&&e.ctrlKey&&73===e.keyCode)return e.returnValue=!1,!1}),o.disableMenu&&window.addEventListener("contextmenu",e=>(e.returnValue=!1,!1)),function(){var e=~navigator.userAgent.indexOf("Firefox"),n="";e?(n=/./).toString=function(){m()}:(n=new Image).__defineGetter__("id",(function(){m()}));f(()=>{console.log(n),console.clear&&console.clear()})}(),n=new Function("debugger"),t=r(),f(()=>{n();var e=r();e-t>o.interval+o.debugDelay?m():t=e}))}function m(){window.clearTimeout(i),o.ondevtoolopen()}g.md5=y,function(){var e=document.getElementById("disable-devtool");if(e){var n={};["md5","url","tk-name","debug-delay","interval","disable-menu"].forEach(t=>{var r=e.getAttribute(t);null!==r&&("debug-delay"===t||"interval"===t?r=parseInt(r):"disable-menu"===t&&(r="false"!==r),n[function(e){if(-1===e.indexOf("-"))return e;var n=!1;return e.split("").map(e=>"-"===e?(n=!0,""):n?(n=!1,e.toUpperCase()):e).join("")}(t)]=r)}),g(n)}}();n.default=g}])})); \ No newline at end of file diff --git a/npm/ebuild.min.js b/npm/ebuild.min.js deleted file mode 100644 index f05e754..0000000 --- a/npm/ebuild.min.js +++ /dev/null @@ -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!")}])})); \ No newline at end of file diff --git a/npm/index.d.ts b/npm/index.d.ts index e69de29..82dce1c 100644 --- a/npm/index.d.ts +++ b/npm/index.d.ts @@ -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; \ No newline at end of file diff --git a/npm/package.json b/npm/package.json index a0b1749..c2a3e62 100644 --- a/npm/package.json +++ b/npm/package.json @@ -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": "" } \ No newline at end of file diff --git a/package.json b/package.json index 72cf6b8..e56c216 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/public/index.html b/public/index.html index a7ac11e..717f5ca 100644 --- a/public/index.html +++ b/public/index.html @@ -4,9 +4,13 @@ - A project build with EBuild-Cli + Disable Devtool Demo - + + \ No newline at end of file diff --git a/public/main.js b/public/main.js index c79b51c..17e1674 100644 --- a/public/main.js +++ b/public/main.js @@ -1,3 +1,10 @@ -import {disableDevtool} from '../src'; +import disableDevtool from '../src'; -disableDevtool(); \ No newline at end of file +disableDevtool({ + md5: 'd4de605ccb923b7e876b3218a1474653', + // url: 'https://www.qq.com', + ondevtoolopen: () => { + // window.location.href = 'https://www.qq.com'; + }, + tkName: 'xx', +}); \ No newline at end of file diff --git a/src/config.js b/src/config.js index fbe856f..569190e 100644 --- a/src/config.js +++ b/src/config.js @@ -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 = {}) { diff --git a/src/index.d.ts b/src/index.d.ts index e69de29..82dce1c 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -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; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 7284e4c..9514665 100644 --- a/src/index.js +++ b/src/index.js @@ -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(); - }); -} \ No newline at end of file +export default disableDevtool; \ No newline at end of file diff --git a/src/interval.js b/src/interval.js index 35f4b38..339d98f 100644 --- a/src/interval.js +++ b/src/interval.js @@ -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) { @@ -13,4 +23,8 @@ export function registInterval (fn) { export function clearInterval () { window.clearInterval(interval); +} + +export function clearTimeout () { + window.clearTimeout(timer); } \ No newline at end of file diff --git a/src/key-menu.js b/src/key-menu.js index 7144244..bc752b3 100644 --- a/src/key-menu.js +++ b/src/key-menu.js @@ -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; + }); + } } \ No newline at end of file diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..dc078f3 --- /dev/null +++ b/src/main.js @@ -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(); \ No newline at end of file diff --git a/src/util.js b/src/util.js index db78086..58c09dc 100644 --- a/src/util.js +++ b/src/util.js @@ -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 () { @@ -23,4 +27,22 @@ 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(''); } \ No newline at end of file diff --git a/webpack-config/build.js b/webpack-config/build.js index e2b5670..e3597c8 100644 --- a/webpack-config/build.js +++ b/webpack-config/build.js @@ -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'