How To Disable Right Click On a Website

In today’s blog, we will see how to Disable Right click on the website.

DevTools is a powerful tool for developers and designers, offering features that make the development process more productive and debugging easier. With DevTools, you can inspect and manipulate the DOM, view, and style CSS, debug JavaScript, monitor network activity, analyze local storage and session storage, optimize website performance, and much more. It can greatly enhance productivity during development.

However, it’s important to exercise caution when it comes to the use of DevTools in a production environment. Since DevTools allows anyone to view and modify source code, it poses a security risk. Hackers can inspect and manipulate the code, potentially exploiting vulnerabilities or stealing sensitive information, such as API keys.

While it’s not possible to completely disable or block access to DevTools in a web browser, there are measures you can take to enhance security:

Server-side security: Implement strong server-side validation and authentication mechanisms to ensure that only authorized users can access sensitive areas or perform specific actions on your website.

Protect sensitive information: Avoid storing sensitive data like API keys directly in client-side code. Instead, handle such information securely on the server side and employ techniques like environment variables or server-side encryption to protect them.

Secure your APIs: Implement authentication and authorization mechanisms for your APIs to ensure that only authorized requests can access and modify your data. Use secure communication protocols such as HTTPS to encrypt the data transmitted between the client and server.

Code obfuscation and minification: Employ tools or build processes to obfuscate and minify your JavaScript and CSS code. While this won’t completely prevent determined individuals from reverse-engineering your code, it can make it more difficult for casual inspection.

Monitoring and logging: Set up logging and monitoring systems to track and detect any suspicious or unauthorized activities on your website. Regularly review logs to identify potential security issues and take appropriate actions.

It’s important to note that while implementing security measures is essential, it’s equally crucial to prioritize robust server-side security measures over attempts to block access to DevTools. A comprehensive security approach will provide a stronger defense against potential threats.

Solution

Note: DevTools can’t close completely. But you can make it inaccessible.

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

   <script>
     // 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;
};
    </script>

While it’s generally not recommended to Disable essential browser functionality like right-click or keyboard shortcuts, here’s an example of how you can Disable the right-click and specific keyboard shortcuts (Ctrl+I, Ctrl+C, and Ctrl+U) using JavaScript:

<script>
    // Disable right-click
    document.addEventListener('contextmenu', function (event) {
        event.preventDefault();
    });

    // Disable specific keyboard shortcuts
    document.addEventListener('keydown', function (event) {
        if (event.ctrlKey && event.code === 'KeyI') { // Disable Ctrl+I
            event.preventDefault();
        }
        if (event.ctrlKey && event.code === 'KeyC') { // Disable Ctrl+C
            event.preventDefault();
        }
        if (event.ctrlKey && event.code === 'KeyU') { // Disable Ctrl+U
            event.preventDefault();
        }
    });
</script>

In the above code, the first part Disables the right-click by preventing the default context menu event. The second part listens for key-down events and checks if the Ctrl key is pressed along with specific key codes (‘KeyI’ for Ctrl+I, ‘KeyC’ for Ctrl+C, and ‘KeyU’ for Ctrl+U). If the conditions are met, it prevents the default action for that key combination.

However, it’s important to note that these measures can inconvenience users and negatively impact the user experience. Determined users can still find alternative methods to access the browser’s developer tools or copy content. Disabling these browser functionalities goes against standard web practices and can frustrate users.

To protect your website and its content, consider focusing on other security measures, such as authentication, input validation, and secure coding practices.

Note: Paste one of the scripts in your site