207 lines
8.9 KiB
HTML
207 lines
8.9 KiB
HTML
<!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>
|
||
|
||
<p>
|
||
Now that the devtool on this page has been disabled, use the <a href='https://theajack.gitee.io/disable-devtool?ddtk=dd'>?ddtk=dd</a> url parameter to un-disable (ddtk value is configurable)
|
||
</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'disable-devtool';
|
||
disableDevtool();</code>
|
||
</p>
|
||
|
||
<h3>1.2 script attribute configuration</h3>
|
||
|
||
<p><code><script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script></code></p>
|
||
|
||
<p>Or use cdn with version:</p>
|
||
|
||
<p><code><!--Use a specific version-->
|
||
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@x.x.x/disable-devtool.min.js'></script>
|
||
<!--Use latest version-->
|
||
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@latest/disable-devtool.min.js'></script></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>Multiple monitoring modes, support almost all browsers (IE, 360, qq browser, FireFox, Chrome, Edge...)</li>
|
||
<li>Highly configurable</li>
|
||
<li>Minimal use, small size (only 7kb)</li>
|
||
<li>Support npm reference and script tag reference (attribute configuration)</li>
|
||
<li>Identify the real mobile terminal and browser developer tool settings plug-in forged mobile terminal, saving performance for the mobile terminal</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'disable-devtool';
|
||
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?(type: DetectorType): void; // Callback for opening the developer panel, the url parameter is invalid when it is enabled
|
||
interval?: number; // Timer interval is 200ms by default
|
||
disableMenu?: boolean; // Whether to disable the right-click menu The default is true
|
||
stopIntervalTime?: number; // Waiting time to cancel monitoring on mobile
|
||
clearIntervalWhenDevOpenTrigger?: boolean; // Whether to stop monitoring after triggering
|
||
detactors?: Array; // Enabled detectors For details of detectors, see 3.5. The default is all, it is recommended to use all
|
||
}
|
||
|
||
declare type DETECTOR_TYPE = -1 | 0 | 1 | 2 | 3;</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('xxx');</code></p>
|
||
|
||
<div>
|
||
TOOL:
|
||
<input type="text" id='md5_key' placeholder="Enter a key">
|
||
<button onclick="generateMd5()">Generate md5</button>
|
||
<span id='md5_value'></span>
|
||
</div>
|
||
|
||
<h3>3.2 script uses attribute configuration</h3>
|
||
|
||
<p><code><script
|
||
disable-devtool-auto
|
||
src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'
|
||
md5='xxx'
|
||
url='xxx'
|
||
tk-name='xxx'
|
||
interval='xxx'
|
||
disable-menu='xxx'
|
||
detectors='xxx'>
|
||
</script></code></p>
|
||
</blockquote>
|
||
|
||
<p>Note:<br>
|
||
1. You must bring the <strong>disable-devtool-auto</strong> 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 <br>
|
||
4. detectors Need to use spaces to separate, such as detectors='1 2 3'</p>
|
||
|
||
<h3>3.3 script does not use attribute configuration</h3>
|
||
|
||
<p><code><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></code></p>
|
||
<script
|
||
disable-devtool-auto
|
||
md5='1aabac6d068eef6a7bad3fdf50a05cc8'
|
||
src='https://cdn.jsdelivr.net/npm/disable-devtool@0.1.10/disable-devtool.min.js#use'
|
||
></script>
|
||
<!-- <script disable-devtool-auto md5='1aabac6d068eef6a7bad3fdf50a05cc8' src='./npm/disable-devtool.min.js'></script> -->
|
||
<script>
|
||
function setText(text){
|
||
document.getElementById('md5_value').innerText = text;
|
||
}
|
||
function generateMd5(){
|
||
if(!window.DisableDevtool){
|
||
alert('DisableDevtool not ready');
|
||
return;
|
||
}
|
||
let key = document.getElementById('md5_key').value;
|
||
if(!key){
|
||
alert('Key is empty');
|
||
return;
|
||
}
|
||
setText(DisableDevtool.md5(key));
|
||
}
|
||
</script>
|
||
</body>
|
||
|
||
</html> |