disable-devtool v0.3.8
中文 | Online Trial | Changelog | Gitee | Message Board | QQ Group: 720626970
0. Sponsor
1. Quick use
1.1 npm reference
npm i disable-devtool
import DisableDevtool from 'disable-devtool';
DisableDevtool();
1.2 script attribute configuration
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>
Or cite by version:
<!--Use the specified version-->
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@x.x.x'></script>
<!--Use latest version-->
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@latest'></script>
1.3 False trigger problem location help
Because there are many devices, browsers, and operating environments, it is inevitable that there will be some scenarios where the library is incompatible, and this part is used for developers to check the problem by themselves, and then feedback the details to issues to help us locate and solve bugs
1.3.1 The probe was triggered incorrectly
In some cases, if the console is not opened but the page does not close or the jump is away, because a probe is triggered by error, use the following code to locate which probe was triggered by mistake:
DisableDevtool({
ondevtoolopen: (type) => {
const info = 'devtool opened!; type =' + type;
alert(info);
// If you are worried about blocking the page, use console.warn(info); and open the console to view
},
})
The above code needs to be used this when using script references
<script src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>
<script>
DisableDevtool({
ondevtoolopen: (type) => {
const info = 'devtool opened!; type =' + type;
alert(info); // If you are worried about blocking the page, use console.warn(info); and open the console to view
},
})
</script>
1.3.2 The probe is not triggered
When devtool is opened in any way, but the page does not close or jump correctly, first try printing the following to see if the detector is working properly
console.log(DisableDevtool.isRunning);
If it returns true, then this is an incompatibility problem because none of the probes are triggered, which is tricky, and there is currently no universal way to locate it
Please submit an issue, as detailed as possible with the browser version, device model and version, operating environment, preferably a screenshot or demo address, we will troubleshoot the corresponding problem later
2. Function
disable-devtool disables all access to the devtools, preventing 'code porting' via the devtools
The library has the following features:
- Support configurable whether to disable the right-click menu
- Disable shortcut keys such as f12 and ctrl+shift+i
- Support recognition to open developer tools from browser menu bar and close the current page
- Developers can bypass the disable (url parameters are encrypted with tk and md5)
- Multiple monitoring modes, support almost all browsers (IE, 360, qq browser, FireFox, Chrome, Edge...)
- Highly configurable, minimalist to use, compact
- Support npm reference and script tag reference (property configuration)
- Identify the real mobile terminal and the browser developer tool to set the plug-in forged mobile terminal to save performance for the mobile terminal
- Support for identifying developer tools close events
- Support configurable whether to disable selection, copy, cut, paste function
- Support to identify eruda and vconsole debugging tools
- Support suspending and resuming probe work
- Support configuring ignore attributes to customize whether to enable probes
Support for configuring all parent pages in iframes to be disabled
3. Use
3.1 Configuration parameters when using npm
It is recommended to use this method of installation and use, and the script script can be intercepted by the agent separately and cannot be executed
install disable-devtool
npm i disable-devtool
import DisableDevtool from 'disable-devtool';
DisableDevtool(options);
3.1.1 Return value
Return value DisableDevtool The return value is of the following type
interface IDDResult {
success: boolean; Indicates whether it is enabled normally
reason: string; The reason why it was not properly enabled
}
3.1.2 parameters
The parameters and descriptions in options are as follows:
declare interface IConfig {
md5?: string; // bypass disabled md5 value, see 3.2 for details, bypass disabled by default
url?: string; // Jump page when closing the page fails, the default value is localhost
tkName?: string; // bypass url parameter name when disabled, default is ddtk
ondevtoolopen?(type: DetectorType, next: Function): void; // The callback for opening the developer panel, the url parameter is invalid when enabled, the type is monitoring mode, see 3.5 for details, the next function is to close the current window
ondevtoolclose?(): void; // callback for developer panel close
interval?: number; // timer interval default 200ms
disableMenu?: boolean; // Whether to disable the right-click menu Default is true
stopIntervalTime?: number; // Waiting time to cancel monitoring on mobile
clearIntervalWhenDevOpenTrigger?: boolean; // Whether to stop monitoring after triggering the default is false, this parameter is invalid when using ondevtoolclose
detectors?: Array<DetectorType>; // Enabled detectors See 3.5 for details of detectors. The default is all, it is recommended to use all
clearLog?: boolean; // Whether to clear the log every time
disableSelect?: boolean; // Whether to disable selection text Default is false
disableCopy?: boolean; // Whether to disable copying, default is false
disableCut?: boolean; // Whether to disable cutting, default is false
disablePaste: boolean; // Whether to disable paste, default is false
ignore?: (string| RegExp)[] | null | (()=>boolean); // Some cases ignore the disablement
disableIframeParents?: boolean; // Whether all parent windows are disabled in the iframe
timeOutUrl?: string; // Turn off URLs that page timeouts forward towards
rewriteHTML?: string; // Detecting the rewriting page after opening
}
enum DetectorType {
Unknown = -1,
RegToString = 0, // Check according to regular
DefineId, // detect based on dom id
Size, // Detect based on window size // After version 0.3.5, this probe is not enabled by default
DateToString, // check against Date.toString
FuncToString, // check according to Function.toString
Debugger, // According to breakpoint detection, it is only valid in the case of ios chrome real machine
Performance, // Performance detection based on log big data
DebugLib, // Detect third-party debugging tools eruda and vconsole
};
3.2 md5 and tk bypass disabled
The way in which the key is used in conjunction with md5 in this library allows developers to bypass the ban 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. When accessing the url, the developer only needs to bring the url parameter ddtk=a, then you can Bypass disable.
The disableDevtool object exposes the md5 method, which can be used by developers when encrypting:
DisableDevtool.md5('xxx');
3.3 script uses attribute configuration
<script
disable-devtool-auto
src='https://cdn.jsdelivr.net/npm/disable-devtool'
md5='xxx'
url='xxx'
tk-name='xxx'
interval='xxx'
disable-menu='xxx'
detectors='xxx'
clear-log='true'
disable-select='true'
disable-copy='true'
disable-cut='true'
disable-paste='true'
></script>
Note:
- If you want to disable it automatically, you must include the
disable-devtool-auto
property when configuring the property - The attribute configuration is optional, and the fields are the same as in 3.1, the difference is that the hump form is changed to a horizontal line.
- The script tag is recommended to be placed at the bottom of the body
- Detectors need to be separated by spaces, such as detectors='1 2 3'
3.4 script does not use attribute configuration
<script src='https://cdn.jsdelivr.net/npm/disable-devtool'></script>
<script>
DisableDevtool({
// The parameters are the same as in 3.1
})
</script>
3.5 Monitoring Mode
Disable-Devtool has the following monitoring modes, DisableDevtool.DetectorType enumerates all monitoring modes
enum DetectorType {
Unknown = -1,
RegToString = 0, // Check according to regular
DefineId, // detect based on dom id
Size, // Detect based on window size
DateToString, // check against Date.toString
FuncToString, // check according to Function.toString
Debugger, // According to breakpoint detection, it is only valid in the case of ios chrome real machine
Performance, // Performance detection based on log big data
DebugLib, // Detect third-party debugging tools
};
The callback parameter of the ondevtoolopen event is the triggered monitoring mode
You can execute business logic in OndevtoolOpen, such as data reporting, user behavior analysis, etc
DisableDevtool({
ondevtoolopen(type, next){
alert('Devtool opened with type:' + type);
next();
}
});
3.6 Additional APIs
3.6.1 isRunning
Used to get whether DisableDevtool is running (the pending or ignore state is also considered running because it can be turned on dynamically)
DisableDevtool.isRunning;
3.6.2 isSuspend
Used to get or set whether DisableDevtool is suspended (suspended state, all disabled will be temporarily disabled)
DisableDevtool.isSuspend = true;
DisableDevtool.isSuspend = false;
3.6.3 config.ignore
ignore is used to customize certain ignored scenarios
- Pass in the array
The incoming array is supported by strings and regular expressions that indicate whether the matching link contains the incoming content, using the following
DisableDevtool({
ignore: [
'/user/login', // Disabled is temporarily ignored when the link contains this content
/\/user\/[0-9]{6}/, // When a link matches that regular, disabling is temporarily ignored
]
});
- Pass in the function
The passing function represents a custom judgment condition and returns a bool type, as follows
DisableDevtool({
ignore: () => {
return userType === 'admin'; // Disable is ignored when you are an administrator
}
});
3.6.4 version
Get DisableDevtool version
DisableDevtool.version;
3 months ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago