Is it possible to remove "Inspect Element"?

Question

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.

@David: yes, david and I just found out the solution by using oncontextmenu="return false". — Kim Honoridez, Feb 24 '15 at 07:54
Why do you want to disable the context menu? This can be turned off in browsers (preventing scripts to disable it). Then there are (shortcut) keys (F12 for win/linux) to do element inspection. — Kasper Agg, Feb 24 '15 at 08:02
because I am creating a chrome app and client doesn't want users to be able to see the source codes. — Kim Honoridez, Feb 24 '15 at 08:03
You can't!!! Ctrl+Mayus+I Can open the Devtools of Chrome always!!! — Danyel Cabello, Feb 24 '15 at 08:07
Yeah, by doing a web app users will *always* be able to see the source code. You should go for a native desktop app instead — 255kb - Mockoon, Feb 24 '15 at 08:20
Well, when you say they don't want them to be able to see source code, do you mean the code that generates the pages? Because to show them anything, you have to send them HTML. You have the option of doing minimal javascript, so everything is generated on the server, which will be a black box to them (they can't see what happens there), but to give them a web page, you MUST send them HTML (unless you want to use a plugin like Flash or a Java Applet, but even those can be reverse engineered, decompiled, etc). — childofsoong, Feb 24 '15 at 17:48

score 75 · Answer 1 · edited Mar 12 '23 at 22:57

I have one requirement for one page. On that page, I want to block the user from performing the below actions,

Right Click
F12
Ctrl + Shift + I
Ctrl + Shift + J
Ctrl + Shift + C
Ctrl + U

For this, I googled and finally got the below link,

http://andrewstutorials.blogspot.in/2014/03/disable-ways-to-open-inspect-element-in.html

I tested it with Chrome & Firefox. It's working for my requirement.

Right Click

 <body oncontextmenu="return false">

Keys

document.onkeydown = (e) => {
    if (e.key == 123) {
        e.preventDefault();
    }
    if (e.ctrlKey && e.shiftKey && e.key == 'I') {
        e.preventDefault();
    }
    if (e.ctrlKey && e.shiftKey && e.key == 'C') {
        e.preventDefault();
    }
    if (e.ctrlKey && e.shiftKey && e.key == 'J') {
        e.preventDefault();
    }
    if (e.ctrlKey && e.key == 'U') {
        e.preventDefault();
    }
};

Above method is disable for mouse and keyboard but what if i go to Developer tools and inspect from there. — Shaan Ansari, Oct 31 '18 at 08:56
There is still one more way - the user can click the "..." menu in the upper-right corner, select "More Tools", and click "Developer tools". — YJiqdAdwTifMxGR, Jun 02 '21 at 19:28

255kb - Mockoon · Accepted Answer · 2016-08-24T18:19:46.430

22

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).

edited Aug 24 '16 at 18:19

answered Feb 24 '15 at 07:54

255kb - Mockoon

6,657
2
22
29

1

But this will prevent right click only. Is there a way to prevent keyboard shortcuts? – Naresh Kukreti Oct 12 '21 at 17:45
3

Please don't do this. This is super harmful for web accessibility. Even if it's what the question asked for, I'm afraid folks will put this snippet into production. – Lucien Greathouse Dec 31 '21 at 01:53

score 14 · Answer 3 · answered Oct 08 '20 at 12:07

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.

Diego Fortes · Answer 4 · 2021-03-14T00:57:00.483

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".

score 4 · Answer 5 · answered Jun 11 '22 at 19:51

  

 "put this script before ending your body tag"

 <script> 
      document.addEventListener('contextmenu', event=> event.preventDefault()); 
      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 == 'J'.charCodeAt(0)){ 
      return false; 
      } 
      if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){ 
      return false; 
      } 
      } 
      </script>

score 3 · Answer 6 · answered Jul 16 '19 at 11:06

3

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

answered Jul 16 '19 at 11:06

cloakedninjas

4,007
2
31
45

3

This is the organization (your admin) controlling the account, not the website. Websites can't control whether or not you can inspect elements. – Reality Mar 23 '21 at 15:27
but still, it is possible! – RwkY Nov 16 '22 at 13:01

score 3 · Answer 7 · answered Dec 12 '21 at 14:01

Yes, there is, some of the above scripts successfully disable one but can't close the other so below's the summary of the above.

document.addEventListener('contextmenu',(e)=>{
    e.preventDefault();
  }
  );
  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;
  }
}

Use this and you are all secure, now nobody can steal ur code or use js to crack open ur database!

Except now things like Burp Suite are now a thing. Edit: I know that it existed before this answer was posted — Fighter178, May 23 '23 at 03:31

score 2 · Answer 8 · answered Feb 24 '15 at 07:50

2

Nope. Closest you can do is capture right clicks, and make them not open the context menu, but the savvy user will know the keyboard combos or menu options to access it anyway, defeating the point. That's a feature of the browser, so nothing you do in your page is going to defeat it (short of installing malware on their computer).

answered Feb 24 '15 at 07:50

childofsoong

1,918
16
23

Overwrite keyboard keystrokes :D – David Snabel Feb 24 '15 at 07:51
2

Besides, you can always open `chrome://inspect`. – Xan Feb 24 '15 at 11:07

score 2 · Answer 9 · answered Nov 17 '20 at 06:26

2

Add this to the html tag of your page

<html oncontextmenu="return false">

answered Nov 17 '20 at 06:26

Malshan Gunawardana

51
3

مهراسا صدیقی فر · Answer 10 · 2021-04-01T12:33:21.520

document.addEventListener('keydown', function() {
    if (event.keyCode == 123) {
      alert("You Can not Do This!");
      return false;
    } else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) {
      alert("You Can not Do This!");
      return false;
    } else if (event.ctrlKey && event.keyCode == 85) {
      alert("You Can not Do This!");
      return false;
    }
  }, false);
  
  if (document.addEventListener) {
    document.addEventListener('contextmenu', function(e) {
      alert("You Can not Do This!");
      e.preventDefault();
    }, false);
  } else {
    document.attachEvent('oncontextmenu', function() {
      alert("You Can not Do This!");
      window.event.returnValue = false;
    });
  }

No F12 No Rightclick

Hi I use this codes. Have fun♥

score 1 · Answer 11 · answered Jul 15 '21 at 04:22

well yes its possible to stop inspecting the website into the browser. as you know that there are three ways to inspect a website into the browser

using keyboard shortcuts
using right click
using developer menu of the browser

i have solution for the 1 and the 2 ways here is the JavaScript code but user user 3rd way is very rare cases

// take body to change the content
const body = document.getElementsByTagName('body');
// stop keyboard shortcuts
window.addEventListener("keydown", (event) => {
  if(event.ctrlKey && (event.key === "S" || event.key === "s")) {
     event.preventDefault();
     body[0].innerHTML = "sorry, you can't do this "
  }

  if(event.ctrlKey && (event.key === "C")) {
     event.preventDefault();
     body[0].innerHTML = "sorry, you can't do this "
  }
  if(event.ctrlKey && (event.key === "E" || event.key === "e")) {
     event.preventDefault();
     body[0].innerHTML = "sorry, you can't do this "
  }
  if(event.ctrlKey && (event.key === "I" || event.key === "i")) {
     event.preventDefault();
     body[0].innerHTML = "sorry, you can't do this ";
  }
  if(event.ctrlKey && (event.key === "K" || event.key === "k")) {
     event.preventDefault();
     body[0].innerHTML = "sorry, you can't do this ";
  }
  if(event.ctrlKey && (event.key === "U" || event.key === "u")) {
     event.preventDefault();
     body[0].innerHTML = "sorry, you can't do this ";
  }
});
// stop right click
document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
});

score 0 · Answer 12 · answered Aug 22 '16 at 04:41

0

<script language="javascript">
document.onmousedown=disableclick;
status="Right Click Disabled";
function disableclick(event)
{
  if(event.button==2)
   {
     alert(status);
     return false;    
   }
}
</script>

answered Aug 22 '16 at 04:41

Waruna Manjula

3,067
1
34
33

score 0 · Answer 13 · answered Aug 19 '20 at 16:02

0

In case it helps anyone, Inspect Element can be disabled for an individual element by adding the style pointer-events: none; to it.

This is very useful if you have any elements that are purely for the purpose of aligning child elements that necessarily overlap a large area of more useful elements; it lets you prevent the aligner elements from responding to the Inspect Element command.

answered Aug 19 '20 at 16:02

Jamie Birch

5,839
1
46
60

They can always open the devtools and navigate to the element that has the inspect menu "disabled". – Reality Mar 23 '21 at 15:32
@Reality This tip is not about stopping visitors from inspecting elements (good luck with that), but about helping you, the developer, make Inspect Element better at picking out the element you're interested in (the one you can see) rather than some large invisible element that might overlap it. – Jamie Birch Mar 24 '21 at 16:04
1

oh, yes. That really *would* help. How many times have I tried to select an element but get the backdrop instead lol. – Reality Mar 24 '21 at 19:00

score 0 · Answer 14 · answered May 19 '21 at 13:36

You can not block it, but you can stop some keys:

Add this to your script:

<script>
 
 document.addEventListener('contextmenu', function(e) {
  e.preventDefault();
 });
 document.addEventListener('keydown', function(e) {
 if (event.keyCode == 123) {
  return false;
 }
 if (e.ctrlKey && e.shiftKey) {
  return false;
 }
 if (event.ctrlKey && event.keyCode == 85) {
  return false;
 }
});
/* other script code */
</script>

score 0 · Answer 15 · answered Jul 08 '21 at 21:00

Above Answer Is Perfect but has some issue when pression ctrl+shift+I. in previous answer it still opens inspect. By Adding event.preventdefault() solve this problem

document.addEventListener('keydown', function() {
    if (event.keyCode == 123) {
      alert("You Can not Do This!");
      return false;
    } else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) {
      alert("You Can not Do This!");
       event.preventDefault();
      return false;
    } else if (event.ctrlKey && event.keyCode == 85) {
      alert("You Can not Do This!");
      return false;
    }
  }, false);
  
  if (document.addEventListener) {
    document.addEventListener('contextmenu', function(e) {
      alert("You Can not Do This!");
      e.preventDefault();
    }, false);
  } else {
    document.attachEvent('oncontextmenu', function() {
      alert("You Can not Do This!");
      window.event.returnValue = false;
    });
  }

melper · Answer 16 · 2021-10-12T09:44:47.507

Try this:

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 == 'J'.charCodeAt(0)){
    return false;
}
if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){
    return false;
}
if(e.ctrlKey && e.keyCode == 'C'.charCodeAt(0)){
    return false;
}
if(e.ctrlKey && e.keyCode == 'X'.charCodeAt(0)){
    return false;
}
if(e.ctrlKey && e.keyCode == 'Y'.charCodeAt(0)){
    return false;
}
if(e.ctrlKey && e.keyCode == 'Z'.charCodeAt(0)){
    return false;
}
if(e.ctrlKey && e.keyCode == 'V'.charCodeAt(0)){
    return false;
}
if (e.keyCode == 67 && e.shiftKey && (e.ctrlKey || e.metaKey)){
    return false;
}
if (e.keyCode == 'J'.charCodeAt(0) && e.altKey && (e.ctrlKey || e.metaKey)){
    return false;
}
if (e.keyCode == 'I'.charCodeAt(0) && e.altKey && (e.ctrlKey || e.metaKey)){
    return false;
}
if ((e.keyCode == 'V'.charCodeAt(0) && e.metaKey) || (e.metaKey && e.altKey)){
    return false;
}
if (e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)){
    return false;
}
if(e.ctrlKey && e.keyCode == 'S'.charCodeAt(0)){
    return false;
}
if(e.ctrlKey && e.keyCode == 'H'.charCodeAt(0)){
    return false;
}
if(e.ctrlKey && e.keyCode == 'A'.charCodeAt(0)){
    return false;
}
if(e.ctrlKey && e.keyCode == 'F'.charCodeAt(0)){
    return false;
}
if(e.ctrlKey && e.keyCode == 'E'.charCodeAt(0)){
    return false;
}
}
if (document.addEventListener) {
    document.addEventListener('contextmenu', function(e) {
    e.preventDefault();
    }, false);
}else{
    document.attachEvent('oncontextmenu', function() {
    window.event.returnValue = false;
    });
}

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Oct 12 '21 at 10:43

score 0 · Answer 17 · answered Apr 17 '22 at 12:34

in nextJs you can put this code in the _app.tsx or _app.js file and use e.key instead of e.keyCode as it is deprecated

    useEffect(() => {
    typeof window !== undefined &&
      window.document.addEventListener("contextmenu", (e) => {
        e.preventDefault();
      });
  }, []);

  document.onkeydown = function(e) {
    console.log(e.key)
    if(e.key === 'F12') {
       return false;
    }
    if(e.ctrlKey && e.shiftKey && e.key === 'I') {
       return false;
    }
    if(e.ctrlKey && e.shiftKey && e.key === 'C') {
       return false;
    }
    if(e.ctrlKey && e.shiftKey && e.key === 'J') {
       return false;
    }
    if(e.ctrlKey && e.key === 'u') {
       return false;
    }
  }

score -3 · Answer 18 · edited Dec 24 '21 at 17:01

-3

It's easy, just press F6 and then press F12.

edited Dec 24 '21 at 17:01

cigien

57,834
11
73
112

answered Dec 24 '21 at 14:48

Dex _

1

Is it possible to remove "Inspect Element"?

18 Answers18

Linked

Related