中文 | online trial/document | Version Log | Gitee
npm i disable-devtool
import disableDevtool from 'disable-devtool';
disableDevtool();
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
Or use cdn with version:
<!--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>
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:
- Support configurable whether to disable the right-click menu
- Disable f12 and ctrl+shift+i shortcuts
- Support recognition to open the developer tools from the browser menu bar and close the current page
- Developers can bypass the disablement (use tk and md5 encryption for url parameters)
- Multiple monitoring modes, support almost all browsers (IE, 360, qq browser, FireFox, Chrome, Edge...)
- Highly configurable
- Minimal use, small size (only 7kb)
- Support npm reference and script tag reference (attribute configuration)
- Identify the real mobile terminal and browser developer tool settings plug-in forged mobile terminal, saving performance for the mobile terminal
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?(type: DetectorType, next: Function): void; // Callback for opening the developer panel, the url parameter is invalid when it is enabled, and the type is the monitoring mode, see 3.5 for details
interval?: number; // Timer interval is 200ms by default
disableMenu?: boolean; // Whether to disable the right-click menu The default is true
clearIntervalWhenDevOpenTrigger?: boolean; // Whether to stop monitoring after triggering The default is false
detactors?: Array<DETECTOR_TYPE>; // 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 | 4; // For details of the detector, see 3.5
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');
<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>
Note:
- If you want to automatically disable,you must bring the
disable-devtool-auto
attribute when configuring attributes - 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
- The script tag is recommended to be placed at the bottom of the body
- detectors Need to use spaces to separate, such as detectors='1 2 3'
<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>
Disable-Devtool has five monitoring modes, DisableDevtool.DETECTOR_TYPE is an enumeration of all monitoring modes
const DETECTOR_TYPE = {
UNKONW: -1,
REG_TO_STRING: 0, // According to regular detection
DEFINE_ID: 1, // Detect according to dom id
SIZE: 2, // Detect according to window size
DATE_TO_STRING: 3, // Check according to Date.toString
FUNC_TO_STRING: 4, // Detect according to Function.toString
}
The callback parameter of the ondevtoolopen event is the triggered monitoring mode