How to Disable Inspect Element on a Website

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.

Leave a Reply

You May Also Like
Disadvantages of Using Google Maps

Disadvantages of Using Google Maps

Table of Contents Hide Some Drawdowns in Using Google Maps1.       Limited Accuracy2.       Miss Information3.       Inappropriate Content4.       Used By CriminalsConclusion No doubt, the use of online mapping services like Google Maps…
View Post
How To Open Dwg File Without Autocad Software To Open

How to Open DWG File (without AutoCAD)

Table of Contents Hide What Is A DWG File?What Can You Do With A DWG File?Software to Open DWG FilesAutoCADMicrosoft VisioAdobe IllustratorA360 Viewer Many people have trouble opening a DWG…
View Post
How to Convert PMD Files to PDFs

How to Convert PMD Files to PDFs

Table of Contents Hide Two Easy Ways to Convert PMD Files to PDFsHow to Convert PMD Files to PDFs with Adobe PageMakerStep 1Step 2Step 3Step 4How to Convert PMD Files…
View Post
Best Instagram Proxy Providers

10 Best Instagram Proxies (Residential IPs) in 2021

Table of Contents Hide Best Instagram Proxies (Residential IP address Providers)HighProxiesCrawlera (Now Zyte Smart Proxy Manager)MexelaLuminatiSSL Private ProxyProxysellerSOAXBlazing SEO ProxyStorm ProxiesSmartproxy You are to use multiple Instagram accounts for digital…
View Post