If you have a website and you want to restrict users from viewing your page source codes, copying page content, or for something else, then this blog is written for you.
In this blog, you’ll learn how to easily block users from doing these actions by disabling the mouse right click and the shortcut keys like ctrl + c, ctrl + x, ctrl + u, ctrl + shift + i, and f12 using vanilla JavaScript.
But before continuing this topic, if you still didn’t see my previous blog on How to Take Screenshots using JavaScript. Don’t miss to view it because I believe you’ll learn something new in JavaScript in that blog. Okay, let’s get back to the current topic.
If you don’t know, the ctrl + u shortcut key is used to view the page source codes, whereas ctrl + shift + i and f12 are used to open the developer mode in the browser which also reveals the page codes. So, you’ve to disable all these shortcut keys, not only the right click button.
To disable right-click and the shortcut keys using vanilla JavaScript, do the below steps according to your need.
If you don’t have a website but you want to test how these codes restrict users from doing such actions, you can create an index.html file and paste the given source codes into your file.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Disable Copy & Paste JavaScript</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis soluta, quam cupiditate quod.</p>
<script>
const disabledKeys = ["c", "C", "x", "J", "u", "I"]; // keys that will be disabled
const showAlert = e => {
e.preventDefault(); // preventing its default behaviour
return alert("Sorry, you can't view or copy source codes this way!");
}
document.addEventListener("contextmenu", e => {
showAlert(e); // calling showAlert() function on mouse right click
});
document.addEventListener("keydown", e => {
// calling showAlert() function, if the pressed key matched to disabled keys
if((e.ctrlKey && disabledKeys.includes(e.key)) || e.key === "F12") {
showAlert(e);
}
});
</script>
</body>
</html>
For website users, you can paste the given JavaScript codes into your website wherever you want.
<script>
const disabledKeys = ["c", "C", "x", "J", "u", "I"]; // keys that will be disabled
const showAlert = e => {
e.preventDefault(); // preventing its default behaviour
return alert("Sorry, you can't view or copy source codes this way!");
}
document.addEventListener("contextmenu", e => {
showAlert(e); // calling showAlert() function on mouse right click
});
document.addEventListener("keydown", e => {
// calling showAlert() function, if the pressed key matched to disabled keys
if((e.ctrlKey && disabledKeys.includes(e.key)) || e.key === "F12") {
showAlert(e);
}
});
</script>
In the codes, I’ve shown an alert if the user tries to copy or click the mouse right button. You can remove that alert and show your custom message. That’s all, now neither users can copy your site content nor view your page source codes.
Conclusion
If you write blogs on your site, these restrictions could be profitable for you. But remember, blocking the context menu that is shown on the mouse right click will also block the user from accessing its other features which are given by the browser or browser extensions.
If you like this blog, don’t forget to share it with others.
