Protect Your Site By Disabling The Browser Devtool (F12) – console-ban

console-ban is a JavaScript library that can be used to protect your site against malicious crawlers and attacks by rewriting or redirecting your site when visitors try to open the browser’s devtool (F12).

How to use it:

1. Import the console-ban into your project.

<script src="dist/console-ban.min.js"></script>

// or
import { init as ConsoleBan } from 'console-ban'

2. Initialize the console-ban and trigger a function when your visitor tries to open the browser’s devtool.

ConsoleBan.init({
  callback: () => {
    //  do something
  }
})

3. Rewrite your document when your visitor tries to open the browser’s devtool.

var div = document.createElement('div')
div.innerHTML = 'Devtool is disabled'
ConsoleBan.init({
  write: '<h1>Devtool is disabled</h1>',
  write: div
})

4. Or direct your site to another URL.

ConsoleBan.init({
  redirect: '/path/to/another/site'
})

5. Determine whether to disable the console.clear function. Default: true.

ConsoleBan.init({
  clear: false
})

6. Determine whether to enable the debugger. Default: true.

ConsoleBan.init({
  debug: true,
  debugTime: 3000,
})