Block Developer tools on your website

I found this really cool script that allows you to disable all the ways to let users open developer tools windows on your website.
One additional step in hardening security across your website.

Here's a little video showing its operation

This script can disable all the methods that can enter the developer tools to prevent ‘code handling’ through the developer tools.

Some of its features,

1. Support configurable whether to disable the right-click menu
2. Disable f12 and ctrl+shift+i shortcuts
3. Support recognition to open the developer tools from the browser menu bar and close the current page
4. Developers can bypass the disablement (use tk and md5 encryption for URL parameters)
5. Multiple monitoring modes, support almost all browsers (IE, 360, qq browser, Firefox, Chrome, Edge...)
6. Highly configurable
7. Minimal use, small size (only 7kb)
8. Support npm reference and script tag reference (attribute configuration)
9. Identify the real mobile terminal and browser developer tool settings plug-in forged mobile terminal, saving performance for the mobile terminal

I'm gonna explain the steps to use it in your ghost blog. But it's pretty straightforward for any website.

Just include this script in the footer (recommended by the developer) of your website.

<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'
    nonce=""
></script>

Attributes

1. disable-devtool-auto: this is what enables the script.
2. md5: you can generate an md5 value for a string and pass that string in your website URL to also disable the script. Default is disabled. Refer to the bypass disable section below.
3. url: the browser will be redirected to this URL in case the developer tools window is opened somehow. Default is localhost.
4. tk-name: the variable to pass your string into in the URL to disable the script. Default is ddtk. Refer to the bypass disable section below.
5. interval: Timer interval. Default is 200ms.
6. disable-menu: specify whether to disable the right-click menu or not. Default is true.
7. nonce: added by me for content security policy. Just for security.

Bypass disable

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 string (the value should not be recorded in the code), use md5 encryption to obtain an md5 value for that string, and pass that string as a parameter. Developers only need to bring the URL parameter ddtk=string when accessing the URL. Bypass disabled.

Example:

• Suppose your website is https://www.example.com
• The string that you choose: highlysecurepassword
• Go here, and get your md5 key from that string.
• Specify the md5 value in your script tag.
• Now whenever you want to bypass this script, you would go to https://www.example.com?ddtk=highlysecurepassword

Issues

So far, I have experienced these two issues in particular.

If your website is loaded inside an iframe, then this script thinks the Developer tools window is open somehow and automatically redirects you to a block-page URL.

In the latest iOS versions, the same issue occurs and the site is redirected to the block-page URL.

My workaround for this:

I have created a short snippet script that detects if your website is in an iframe or device is of iOS type and disables this script.
This is not ideal, but until the developer fixes this issue, you can use this as a workaround.
I have already raised an issue on the developer's GitHub repository here regarding this.

<!-- disable dev tools -->
<script nonce="">
function inIframe () {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}
function iOS() {
  return [
    'iPad Simulator',
    'iPhone Simulator',
    'iPod Simulator',
    'iPad',
    'iPhone',
    'iPod'
  ].includes(navigator.platform)
  // iPad on iOS 13 detection
  || (navigator.userAgent.includes("Mac") && "ontouchend" in document)
}
window.onload = function() {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = 'https://cdn.jsdelivr.net/npm/disable-devtool@latest/disable-devtool.min.js';
    if(!inIframe() && !iOS()){
        s.setAttribute('disable-devtool-auto','');
    	s.setAttribute('url','https://google.com');
    }
    s.setAttribute('nonce','');
    try {
      document.body.appendChild(s);
    } catch (e) {
      document.body.appendChild(s);
    }
  }
</script>

Credits

All credits for the above script go to its original developer here.

Go ahead and give him some stars if you liked this.