Is it possible to remove "Inspect Element"?
Solution 1
It is possible to prevent the user from opening the context menu by right clicking like this (javascript):
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
By listening to the contextmenu event and preventing the default behavior which is "showing the menu", the menu won't be shown.
But the user will still be able to inspect code through the console (by pressing F12 in Chrome for example).
Solution 2
I have one requirement for one page. In that page I want to block the user to perform below actions,
- Right Click
- F12
- Ctrl + Shift + I
- Ctrl + Shift + J
- Ctrl + Shift + C
- Ctrl + U
For this I googled, finally got the below link,
http://andrewstutorials.blogspot.in/2014/03/disable-ways-to-open-inspect-element-in.html
I tested with it with Chrome & Firefox. It's working for my requirement.
Right Click
<body oncontextmenu="return false">
Keys
document.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;
}
}
Solution 3
You can't.
Everything on a web page is rendered by the browser, and they want web sites to properly work on them or their users would despise them. As a result, browsers want to expose the lower level ticks of everything to the web developers with tools like code inspectors.
You could try to prevent the user from entering the menu with a key event. Something like this:
// Disable inspect element
$(document).bind("contextmenu",function(e) {
e.preventDefault();
});
$(document).keydown(function(e){
if(e.which === 123){
return false;
}
});
But if a user want to see the code, he will do it in another way. He will just need a little longer.
Short: If you do not want people to get something in their browser, you shouldn't send it to their browser in the first place.
Solution 4
It is kinda possible.
-
Firstly, use ramakrishna's solution to block the devtools shortcut keys.
-
Add devtools-detect to your website. Here is a quick link for the devtools.js file from his github.
-
Then, finally, add the following:
if (devtools.isOpen) {
setInterval(() => {
var $all = document.querySelectorAll("*");
for (var each of $all) {
each.classList.add(`asdjaljsdliasud8ausdijaisdluasdjasildahjdsk${Math.random()}`);
}
}, 5);
}
or maybe this:
if (devtools.isOpen) {
while (true) {
console.log("access denied")
}
}
It will basically overload the DOM and make it impossible to interact with it via the devtools.
Additionally, this is a mere example; you can use much more elaborate ways to overload the DOM instead of just adding classes.
I don't think it will work flawlessly but it should be enough to offer at least some extra minor layer of "security".
Solution 5
While not an answer, Chrome certainly has a way to do this, I appear to be in an A/B test as my work account can't inspect in Gmail, meanwhile my personal account can.
I've searched for <meta> tags or HTTP headers which might be controlling this, but nothing stands out
Kim Honoridez
Hello! Im Kissa, a geeky Java (J2SE, J2ME, J2EE, Android) software developer. I have been practicing my career for quite some time now and it's really interesting and enjoyable. New technologies really bug me out, make me curious about life and my existence. Everyday, new problems are discovered and different answers are laid out. I hope I would be able to share something here and of course learn more. I hope to have fun with you guys! よろしくお願いします！
Updated on January 14, 2022Comments
-
Kim Honoridez over 2 years
Is it possible to remove or disable "Inspect Element" context menu in Chrome App via Javascript?
I have searched through several forums but there are no definite answer.