(Devtool) Protect Your Site By Disabling the Browser Development Tool | console-ban

Console blocking is F12 / revision blocking to unlock console, protect website resources, reduce crawlers, lightweight attack solution, support forwarding, and rewrite, and customize multiple strategies.

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

disable f12 developer tools using javascript, how to disable developer tools in browser using javascript, how to disable inspect element in browser using javascript, how to disable console in browser

How to make use of it:

1. Import the console-ban into your undertaking.

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

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

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

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

3. Rewrite your doc when your customer 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 website to a different URL.

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

5. Determine whether or not to disable the console.clear function.

ConsoleBan.init({
  clear: false
})

6. Determine whether or not to allow the debugger.

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

Protect Your Site By Disabling The Browser Devtool, console-ban Plugin/Github, disable javascript execution from console, disable developer tools in web application, disable javascript chrome extension

See Demo And Download