How to Disable Inspect Element on a Website

There are many reasons that would make one want to disable browsers from viewing the source codes of a website. Some being the need to improve security or for confidentiality.

Whichever the reason may be, in this article, we will show you two simple steps you can use to disable inspect element and view page source option on a website.

What you need

Carrying out this procedure is very simple and straightforward. You only need to have basic HTML and JavaScript knowledge, or at know how to copy lines of codes without making errors.

So let’s get to it!

 

Step 1 — Disable Mouse Right-Click Function on the Website

You can disable the mouse right-click function on the website by adding the following codes in the ‘<script></script>‘ tag:

document.addEventListener(‘contextmenu’, function(e){

e.preventDefault();

});

 

You can also choose to display an alert whenever the visitors right-click their mouse button. To do this, you’ll use this edited version of the previous code:

document.addEventListener(‘contextmenu’, function(e){

alert(“Sorry, right click is disabled”);

e.preventDefault();

});

 

Step 2 — Disabling the Shortcut Key Combination that Triggers the Inspect Element Tool

There are certain key combos that launch the inspect element tool of a browser. They are:

  1. “Ctrl+Shift+I” for ‘Inspect Element
  2. “Ctrl+Shift+J” for ‘Inspect Element‘ Console panel
  3. “Ctrl+Shift+C” for ‘Inspect Element‘ Elements panel
  4. “Ctrl+S” for Saving Website as HTML file
  5. “Ctrl+U” for ‘View Source Code

We will go ahead to disable them using this piece of code below, also by adding them to the ‘<script></script>‘ tag.

cdocument.onkeydown = function(e) {
if(event.keyCode == 123) {
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) {
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) {
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) {
return false;
}
if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) {
return false;
}
if(e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)) {
return false;
}
}

 

All Done!

Conclusion

Disabling of inspect element only works on page where these codes are present. If you want it to ally to all webpages on the site, you should implement the codes inside the ‘<header></header>‘ tag, or somewhere that appears on all pages/posts in the website.

Make mistake, codes still need to be in the ‘<script></script>‘ tag, however this tag will be placed inside the header. Just like this:

<header>

<script>

‘Line of codes’

</script>

</header>

Avoid inserting codes in the footer tags, this will mean that all contents will load before the script, thereby affecting user experience.

Also See:

76 Views

pinit fg en rect red 28

Leave a Reply

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: