Disable inspect element - DevTools in your Website

#devtools #javascript #html #chrome

A Website can build with simple HTML / CSS / Javascript. When you published, all source code can see with DevTools of Browser.

What is DevTools?

DevTools is a great tool in the hands of developers and designers for the need to making the development process more productive and debugging easy.

With the Inspect Element on Chrome, you have more power than the traditional web users:

View and change the DOM
View and style CSS
Debug Javascript
Watch network activity
Show Local Storage, Session Storage,...
Optimize website performance
etc...

You can discover that the DevTools can be a serious boost to your productivity. But...

With great power comes great responsibility
— Tom Precious

Why need disable Devtools?

DevTools is powerful for Development, but is dangerous on production environment.
Anyone can see your source code, which means it's not secure. With DevTools, hacker easily inspect, edit, modify your code.

I was access to admin of website by change is_admin variable to true

Besides, he can see when your website get API (Application Programming Interface) and steal API_KEY or exploit information.

Solution

DevTools can't closed completely. But you can make it inaccessible. Launching DevTools in the following ways:

Right-click -> Inspect
Ctrl + Shift + I (DevTools shortcut)
F12 (DevTools shortcut)
Ctrl + Shift + J (Open the Console panel)
Ctrl + Shift + C (Open the Elements panel)
Ctrl + U (View Source-code)

// Disable right-click
document.addEventListener('contextmenu', (e) => e.preventDefault());

function ctrlShiftKey(e, keyCode) {
  return e.ctrlKey && e.shiftKey && e.keyCode === keyCode.charCodeAt(0);
}

document.onkeydown = (e) => {
  // Disable F12, Ctrl + Shift + I, Ctrl + Shift + J, Ctrl + U
  if (
    event.keyCode === 123 ||
    ctrlShiftKey(e, 'I') ||
    ctrlShiftKey(e, 'J') ||
    ctrlShiftKey(e, 'C') ||
    (e.ctrlKey && e.keyCode === 'U'.charCodeAt(0))
  )
    return false;
};