SoFunction
Updated on 2025-03-10

disable-devtool disables web developer tools to protect web page source code

introduction

In today's Internet era, the protection of web page source code is particularly important, especially the front-end code, which is almost displayed in plain text, which can easily lead to source code leakage. Hackers and malicious users often use browser developer tools to steal sensitive information from the website. In order to effectively prevent users from opening the browser's web developer tool panel, today we recommend a good npm library, which can help developers better protect their website source code. Next, we will introduce the functions and usage methods of this library.

Functional introduction

npm library name:disable-devtool, github address:/theajack/disable-devtool. Web development tools can be disabled from the f12 button, right-click, and browser menu.

🚀 One line of code to disable web developer tools

This library has the following features:

  • Supports 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 the browser menu bar and close the current page
  • Developers can bypass disabling (url parameters are encrypted with tk and md5)
  • Multiple monitoring modes, supporting almost all browsers (IE, 360, qq browser, FireFox, Chrome, Edge...)
  • Highly configurable, minimalist in use, small in size
  • Support npm reference and script tag reference (attribute configuration)
  • Identify the real mobile terminal and the browser developer tool setting plug-in forged mobile terminals to save performance on the mobile terminal
  • Supports identification of developer tool shutdown events
  • Supports configurable whether to disable selection, copy, cut and paste functions
  • Supports identification of eruda and vconsole debugging tools
  • Supports suspend and restore detector operation
  • Supports configuration of ignore attributes to customize whether to enable detectors
  • Developer tools that support configuring all parent pages in iframe are disabled

How to use

Using the library is very simple, just follow these steps:

1.1 npm quote

It is recommended to use this method to install and use script scripts that can be intercepted by the agent separately and cannot be executed.

npm i disable-devtool
import DisableDevtool from 'disable-devtool';
DisableDevtool(options);

1.2 Use script

<script disable-devtool-auto src='/npm/disable-devtool'></script>

Or referenced by version:

&lt;!--Use the specified version--&gt;
&lt;script disable-devtool-auto src='/npm/disable-devtool@'&gt;&lt;/script&gt;
&lt;!--Use the latest version--&gt;
&lt;script disable-devtool-auto src='/npm/disable-devtool@latest'&gt;&lt;/script&gt;

1.3 npm method options parameter description

The parameters and descriptions in options are as follows, and the configurations in all aspects are quite complete.

interface IConfig {
    md5?: string; // Bypass the disabled md5 value, bypass the disabled by default    url?: string; // The page jumps when closing the page fails, the default value is localhost    tkName?: string; // Bypass the disabled url parameter name, default is ddtk    ondevtoolopen?(type: DetectorType, next: Function): void; // The callback opened on the developer panel, the URL parameter is invalid when enabled, type is the monitoring mode, and the next function closes the current window    ondevtoolclose?(): void; // Callback for the developer panel closed    interval?: number; // Time interval of timer: default 200ms    disableMenu?: boolean; // Whether to disable the right-click menu, the default is true    stopIntervalTime?: number; // Waiting time for canceling monitoring on mobile    clearIntervalWhenDevOpenTrigger?: boolean; // Whether to stop monitoring after triggering. Default is false. This parameter is invalid when using ondevtoolclose    detectors?: Array&lt;DetectorType&gt;; // Enabled Detector Details    clearLog?: boolean; // Whether to clear the log every time    disableSelect?: boolean; // Whether to disable the selection text, default to false    disableCopy?: boolean; // Whether to disable replication, default is false    disableCut?: boolean; // Whether to disable cut? Default is false    disablePaste: boolean; // Whether to disable paste, default is false    ignore?: (string|RegExp)[] | null | (()=&gt;boolean); // Ignore disables in certain situations    disableIframeParents?: boolean; // Whether to disable all parent windows in the iframe    timeOutUrl?: // Close the url that jumps out of the page;}
enum DetectorType {
  Unknown = -1,
  RegToString = 0, // Detection according to regular  DefineId, // Detection based on dom id  Size, // Detection based on window size  DateToString, // According to the test  FuncToString, // According to the test  Debugger, // According to breakpoint detection, it is only valid in the case of real ios chrome  Performance, //Discover the performance of the log big data  DebugLib, // Detect third-party debugging tools eruda and vconsole};

1.4 Use attribute configuration in script mode

<script 
    disable-devtool-auto
    src='/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>

1.5 Event listening

The callback parameter of the ondevtoolopen event is the triggered monitoring mode. Business logic can be executed in ondevtoolopen, such as data reporting, user behavior analysis, etc.

DisableDevtool({
    ondevtoolopen(type, next){
        alert('Devtool opened with type:' + type);
        next();
    }
});

1.6 md5 and tk bypass disabled

The use of key and md5 in this library allows developers to bypass disabling online.

The process is as follows:

First specify a key a (this value should not be recorded in the code), use md5 encryption to obtain a value b, and pass b in as md5 parameter. When the developer accesses the url, he only needs to bring the url parameter ddtk=a to bypass the disable.

The disableDevtool object exposes the md5 method, which can be used when developers encrypt:

DisableDevtool.md5('xxx');

For more details, please refer to the official document, Chinese document address:/theajack/disable-devtool/blob/master/

at last

Although this library can effectively disable the browser's developer tool panel, the following points need to be noted:

  • This library can only disable the panel of the developer tool and cannot prevent users from accessing web page source code through other channels. Therefore, it is recommended to combine other security measures to protect the website.
  • Disabling developer tools may cause certain troubles to the debugging and maintenance of the website. When debugging online code, you can use the above 1.6 to bypass disable for debugging.
  • This library is only available for modern browsers and may have compatibility issues for some older browsers. Make sure to test compatibility before use.

To further enhance the security of web page source code, we can take the following additional measures:

  • Encrypted sensitive code, encrypting key code using encryption algorithms to prevent unauthorized access and modification.
  • Using server-side rendering, put the rendering process of the web page on the server side, only return the final rendering result to the client, hiding the source code and logic.
  • Update code regularly, regularly update the code base to take advantage of new security features and fix known vulnerabilities.

Protecting the security of web page source code is crucial for web development. By using npm librarydisable-devtool, and combined with other security measures, we can effectively reduce the risk of users accessing and modifying source code. But absolute security does not exist, so regular updates and strengthening security measures are also necessary.

The above is the detailed content of disable-devtool disable web developer tools to protect web page source code. For more information about disable-devtool disable web, please follow my other related articles!