Disable Inspect Element and View Page Source on Website

Disable Inspect Element and View Page Source on Website

Preventing users from accessing your website’s source code or confidential functions can be essential for safeguarding your work and protecting intellectual property. Whether you want to deter duplication or secure sensitive elements, disabling features like Inspect Element and View Page Source is a practical step. This guide will show you how to disable these functionalities in a user-friendly manner.

Important Disclaimer

Disabling Inspect Element and View Page Source including related shortcuts only applies to pages where the necessary scripts are implemented. To ensure comprehensive coverage, insert the scripts into your website’s header or a globally loaded section. Avoid placing them in the footer, as footer scripts load last, leaving a temporary window for inspection.

Inspect Element and View Page Source

Now, let’s dive into the steps!

Step 1: Disable Mouse Right-Click

To disable right-click functionality on your website, add the following script within the <script></script> tags:

// Disable right-click
document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});

If you want to display an alert message when users attempt to right-click, use this version:

// Disable right-click with an alert
document.addEventListener('contextmenu', function(e) {
  alert("Sorry, right click is disabled!");
  e.preventDefault();
});

This script ensures that users cannot access the context menu via right-click.

Step 2: Disable Shortcut Keys for ‘Inspect Element’ and ‘View Page Source’

Several keyboard shortcuts allow users to access developer tools or view your website’s source code. These include:

  • Ctrl+Shift+I: Opens the ‘Inspect Element’ panel
  • Ctrl+Shift+J: Opens the Console panel
  • Ctrl+Shift+C: Opens the Elements panel
  • Ctrl+S: Saves the website as an HTML file
  • Ctrl+U: Opens the ‘View Source Code’ panel
  • F12: Opens Developer Tools

To disable these shortcuts, include the following script after the right-click disabling code but before the closing </script> tag:

// Disable specific keyboard shortcuts
document.onkeydown = function(e) {
  if (e.keyCode == 123) { // Disable F12
    return false;
  }
  if (e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) { // Disable Ctrl+Shift+I
    return false;
  }
  if (e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) { // Disable Ctrl+Shift+C
    return false;
  }
  if (e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) { // Disable Ctrl+Shift+J
    return false;
  }
  if (e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) { // Disable Ctrl+U
    return false;
  }
  if (e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)) { // Disable Ctrl+S
    return false;
  }
};

This code effectively blocks these shortcuts, making it harder for users to inspect or copy your website’s content.

So, the final codes should be this before your </head> tag:

<script>
// Disable right-click with an alert
document.addEventListener('contextmenu', function(e) {
  alert("Sorry, right click is disabled!");
  e.preventDefault();
});

// Disable specific keyboard shortcuts
document.onkeydown = function(e) {
  if (e.keyCode == 123) { // Disable F12
    return false;
  }
  if (e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)) { // Disable Ctrl+Shift+I
    return false;
  }
  if (e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)) { // Disable Ctrl+Shift+C
    return false;
  }
  if (e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)) { // Disable Ctrl+Shift+J
    return false;
  }
  if (e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)) { // Disable Ctrl+U
    return false;
  }
  if (e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)) { // Disable Ctrl+S
    return false;
  }
};
</script>

Final Thoughts

While these methods provide a layer of protection, it’s important to note that they are not foolproof. Advanced users can still bypass these restrictions using specialized tools or techniques. For robust security, consider combining these steps with server-side protections and obfuscation methods.

Implement these scripts thoughtfully, ensuring they do not interfere with your website’s functionality or user experience. By taking these precautions, you can better protect your website from unwanted scrutiny and duplication.

Stay secure and happy coding!

Was this helpful?

Previous Article

Complete SEO Guide for Beginners

Next Article

Create Custom Widget in WordPress

Write a Comment

Leave a Comment