DOCSEARCHbyAlgolia
Submit Docs

disable-devtool

repository·master·Indexed 25 days ago

https://github.com/theajack/disable-devtool

A security-focused library designed to prevent users from accessing browser developer tools to protect web application source code. It disables right-click menus, shortcut keys (F12, Ctrl+Shift+I), and text selection/copy/cut/paste. The library supports multiple monitoring modes across browsers, identifies mobile debugging tools like eruda and vconsole, and provides options for iframe support, custom bypasses via MD5 and encrypted URL parameters, and specific ignored scenarios.

Tokens
5.7K
Snippets
15
Records
36
Agent score
86%

What's inside disable-devtool

  1. Overview of disable-devtool features

    master

    The disable-devtool library prevents users from accessing browser developer tools to protect source code. Key features include:

    • Disabling right-click menus, shortcut keys (F12, Ctrl+Shift+I), and text selection/copy/cut/paste.
    • Detecting devtools opened via browser menu bars and closing the page.
    • Support for multiple monitoring modes across browsers (Chrome, Edge, Firefox, IE, etc.).
    • Identification of mobile terminals and mobile-specific debugging tools like eruda and vconsole.
    • Support for iframes (configuring all parent pages to be disabled).
    • Ability to suspend and resume probe work.
    • Bypassing protections via encrypted URL parameters (tk and md5).

  2. Bypass disabling using MD5 and TK

    master

    You can allow specific users to bypass the developer tool ban using an MD5 key.

    1. Choose a secret key a (do not hardcode this in your client-side code).
    2. Generate an MD5 hash of a, let's call it b.
    3. Pass b as the md5 parameter in the DisableDevtool configuration.
    4. To bypass the ban, the user must access the URL with the parameter ddtk=a (where ddtk is the value of tkName).

    You can use the built-in md5 method to generate the hash:

    DisableDevtool.md5('xxx');

  3. Install and use disable-devtool via npm

    master

    Install the package using npm. It is recommended to use this method because script-based implementations can be intercepted and blocked by proxies. After installing, import the default export and call it with a configuration object.

    npm i disable-devtool
    import DisableDevtool from 'disable-devtool';

DisableDevtool(options);

  4. Bypass disabling with MD5 and tk

    master

    You can allow authorized users to bypass the disabling mechanism using a key and an MD5 hash.

    1. Choose a secret key (e.g., mySecretKey). Do not hardcode this in your client-side code.
    2. Generate an MD5 hash of that key using DisableDevtool.md5('mySecretKey').
    3. Pass the resulting hash as the md5 option in your configuration.
    4. To bypass disabling, users must visit your site with a URL parameter ddtk set to your secret key (e.g., ?ddtk=mySecretKey).

  5. Configure disable-devtool via script tag attributes

    master

    You can use the library by adding a <script> tag to your HTML. To enable automatic disabling, you must include the disable-devtool-auto attribute.

    Note:

    • Attributes use kebab-case (e.g., disable-menu) instead of the camelCase used in the npm options object.
    • The detectors attribute should be a space-separated string of detector IDs (e.g., '1 2 3').
    • It is recommended to place this script tag at the bottom of the <body>.

    All attributes are optional and correspond to the npm configuration parameters.

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

  6. Configure disable-devtool via script attribute

    master

    You can use disable-devtool directly in HTML by including a <script> tag.

    Requirements:

    • To enable automatic disabling, you must include the disable-devtool-auto attribute.
    • Attributes use kebab-case (e.g., disable-menu) instead of camelCase.
    • For the detectors attribute, separate values with spaces (e.g., detectors='1 2 3').
    • It is recommended to place the script tag at the bottom of the <body>.
    <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>

  8. Install and use disable-devtool via script tag

    master
    You can include the library directly in your HTML using a <script> tag. To enable automatic initialization, add the disable-devtool-auto attribute to the script tag. You can reference specific versions or the latest version from a CDN like jsDelivr.

  10. Configure IConfig options

    master

    When calling DisableDevtool(options), you can pass an IConfig object to customize behavior.

    KeyTypeDefaultDescription
    md5stringundefinedBypass disabled md5 value.
    urlstringlocalhostPage to jump to when closing the page fails.
    tkNamestring'ddtk'URL parameter name used to bypass disabling.
    ondevtoolopen(type: DetectorType, next: Function) => voidundefinedCallback for when the developer panel is opened. next is a function to close the current window.
    ondevtoolclose() => voidundefinedCallback for when the developer panel is closed.
    intervalnumber200Timer interval in ms.
    disableMenubooleantrueWhether to disable the right-click menu.
    stopIntervalTimenumberundefinedWaiting time to cancel monitoring on mobile.
    clearIntervalWhenDevOpenTriggerbooleanfalseWhether to stop monitoring after triggering.
    detectorsArray<DetectorType>allEnabled detectors.
    clearLogbooleanundefinedWhether to clear the log every time.
    disableSelectbooleanfalseWhether to disable text selection.
    disableInputSelectbooleanfalseWhether to disable input selection text.
    disableCopybooleanfalseWhether to disable copying.
    disableCutbooleanfalseWhether to disable cutting.
    disablePastebooleanfalseWhether to disable pasting.
    ignore(string| RegExp)[] | null | (()=>boolean)undefinedScenarios to ignore the disablement.
    disableIframeParentsbooleanundefinedWhether all parent windows in an iframe are disabled.
    timeOutUrlstringhttps://theajack.github.io/disable-devtool/404.html?h=${encodeURIComponent(location.host)}URL to redirect to on page timeout.
    rewriteHTMLstringundefinedDetecting the rewriting page after opening.

  11. Configure disable-devtool via npm options

    master

    When calling DisableDevtool(options), you can pass an IConfig object to customize behavior.

    Key options include:

    • md5: MD5 value to bypass disabling (see 'Bypass disabling with MD5 and tk').
    • url: Page to redirect to when disabling fails (default: localhost).
    • tkName: URL parameter name used for bypassing (default: ddtk).
    • ondevtoolopen: Callback when devtools are opened. type is the DetectorType that triggered it; next() is a function to close the current window.
    • ondevtoolclose: Callback when devtools are closed.
    • interval: Timer interval in ms (default: 200).
    • disableMenu: Whether to disable the right-click menu (default: true).
    • detectors: Array of DetectorType to enable (default: all).
    • disableSelect, disableInputSelect, disableCopy, disableCut, disablePaste: Boolean flags to disable specific user interactions.
    • ignore: A way to skip disabling for specific URLs or conditions.
    • rewriteHTML: String used to rewrite the page upon detection.

  12. Debug false devtool triggers

    master

    If the library is triggering incorrectly (e.g., closing the page when the console isn't actually open), you can use the ondevtoolopen callback to identify the trigger type. This is useful for locating which probe is causing the false positive.

    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
    },
})