Disable Right Click & Developer Tools (Basic Frontend Protection)

Disable Right Click & Developer Tools (Basic Frontend Protection)



📌 Thumbnail Text
“Disable Right Click”
“Block DevTools”
“Not 100% Secure”
📌 Content
📌 Important Note

Before we start:

👉 You cannot fully block users from accessing developer tools.
👉 This is NOT real security.

It only:

discourages beginners
protects basic content
1️⃣ Disable Right Click
<script>
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
</script>

👉 Blocks mouse right-click

2️⃣ Disable keyboard shortcuts
<script>
document.addEventListener('keydown', function(e) {
if (
e.key === "F12" ||
(e.ctrlKey && e.shiftKey && e.key === "I") ||
(e.ctrlKey && e.shiftKey && e.key === "J") ||
(e.ctrlKey && e.key === "U")
) {
e.preventDefault();
}
});
</script>

👉 Blocks:

F12
Ctrl + Shift + I
Ctrl + U
3️⃣ Detect DevTools (basic)
<script>
setInterval(function() {
if (window.outerWidth - window.innerWidth > 160) {
alert("Developer tools detected!");
}
}, 1000);
</script>

👉 Detects open devtools (not reliable)

4️⃣ Disable text selection (optional)
<style>
body {
user-select: none;
}
</style>

👉 Prevents copying text

🔥 What this actually does

✔ Stops basic users
✔ Prevents easy copying
❌ Does NOT stop developers

⚠️ Limitations
Users can disable JavaScript
DevTools cannot be fully blocked
Source code is always accessible
🔐 Real Security (Important)

If you want real protection:

validate on server
use authentication
protect APIs
never expose sensitive logic in frontend
✅ Summary

Frontend blocking:

right click ❌
devtools ❌
shortcuts ❌

👉 Useful for UI protection only