I'm having a page where i need to disable the Function keys mainly F12(Developertools). I'm showing some sensitive data in the page so at any case i cannot make the users see the html and take the hidden fields. I checked some javascript which is working for almost all the keys except the Function keys like f1, f12 etc.

Is there anyway that i can disable these buttons in the browser?

document.onkeyup = KeyCheck;
function KeyCheck() {
    var KeyID = event.keyCode;
    alert(KeyID);
    switch (KeyID) {
        case 123:  //F12 KEY CODE         
            alert('hello');
            return false;
            break;            
    }

}

This is the code which im using for overriding the key. When I searched, the keycode of F12 key is 123 and im using the same code for overriding it. But unfortunately its not even hitting the "CASE" and the message box is not appearing when pressing F12, F1 etc buttons.

Please Help me in this.

I'm having a page where i need to disable the Function keys mainly F12(Developertools). I'm showing some sensitive data in the page so at any case i cannot make the users see the html and take the hidden fields. I checked some javascript which is working for almost all the keys except the Function keys like f1, f12 etc.

Is there anyway that i can disable these buttons in the browser?

document.onkeyup = KeyCheck;
function KeyCheck() {
    var KeyID = event.keyCode;
    alert(KeyID);
    switch (KeyID) {
        case 123:  //F12 KEY CODE         
            alert('hello');
            return false;
            break;            
    }

}

This is the code which im using for overriding the key. When I searched, the keycode of F12 key is 123 and im using the same code for overriding it. But unfortunately its not even hitting the "CASE" and the message box is not appearing when pressing F12, F1 etc buttons.

Please Help me in this.

• javascript
• asp
• browser
• browser-history

• 1 Answer is you shouldn't send sensitive data over the wire. Disabling F12 might disable one way of getting into developer tools on one browser. But what if someone clicks on the menu option? Not to mention the sensitive data is visible to anyone with a little knowhow. – Simon Laing Commented Dec 3, 2012 at 7:26
• Even without the console, I could get the data or unhook your protection or hook my own console with Tampermonkey or Greasemonkey easily. – John Dvorak Commented Dec 3, 2012 at 7:28
• Even if you disable F12, I could press Ctrl+Shift+I and not even realise F12 is disabled. – John Dvorak Commented Dec 3, 2012 at 7:32
• @JanDvorak. I guess the OP could also catch Ctral+Shift+I, but that could get out of hand soon enough, right? I mean, do the different browsers all have the same key binations for the consoles? I kinda doubt it. – Cerbrus Commented Dec 3, 2012 at 7:42
• @Cerbrus you can kill all shortcuts of the popular five (FF+IE+O+WK) with just F12, Ctrl+Shift+I and RightClick, but you can't kill their respective menu items, you can't kill Tampermonkey, you can't kill Fiddler... – John Dvorak Commented Dec 3, 2012 at 7:45

6 Answers 6

There is no reliable way to prevent users from tampering with your javascript data, when you've sent it. Always use server-side checks to verify the returned data.

People can still use the browser's menu to enable the dev console. Or through right-click --> "Inspect Element", or by using hotkeys to open different sections of the console, then tabbing to another page in the console, or by using one of the hotkeys I've failed to mention.
Or, they can simply disable javascript. (Or edit the javascript to disable the block)

Now, you can be a little more thorough in disabling whatever button's functionality, by adding a:
event.preventDefault() in your event listener, but still, it's unreliable.

document.onkeydown = KeyCheck;

It worked.

No, you can't diasble view source/developer tools or any other application level functionality of the browser via JavaScript on the page.

There are plenty ways to see source of the web page. You are up to very hard task to restrict all external parties to access/store/view your HTML. Here is partial list of other things you'll have to disable:

• proxies, including HTTP debuggers/proxies like Fiddler or ones that are built in to browsers.
• direct GET requests from console tools like curl.
• all sorts of web crawlers, including search engines like Google.

Use HTTPS and do not send sensetive information unless strictly required is the much easier way of protecting it than trying to limit what users can do with their machines.

Try this out:

<script language="JavaScript">
    document.onkeypress = function (event) {
        event = (event || window.event);
        if (event.keyCode == 123) {
           //alert('No F-12');
            return false;
        }
    }
    document.onmousedown = function (event) {
        event = (event || window.event);
        if (event.keyCode == 123) {
            //alert('No F-keys');
            return false;
        }
    }
    document.onkeydown = function (event) {
        event = (event || window.event);
        if (event.keyCode == 123) {
            //alert('No F-keys');
            return false;
        }
    }
</script>

This Code works Perfectly for me to Disable Right Click and Disable F12

<script language=JavaScript>

var message="You Have No Permission";


 function clickIE4(){
   if (event.button==2){
     alert(message);
     return false;
   }
 }

 function clickNS4(e){
   if (document.layers||document.getElementById&&!document.all){
     if (e.which==2||e.which==3){
       alert(message);
       return false;
      }
   }
 }

  if (document.layers){
    document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown=clickNS4;
   }
   else if (document.all&&!document.getElementById){
      document.onmousedown=clickIE4;
   }

   document.oncontextmenu=new Function("alert(message);return false")

When user press F12 key, browsers developer tool bar will open in the below portion of the browser.

By using the developer tool bar user can see the design, javascript code and corresponding css applied to the controls in the page. To prevent the user to do that we will hide the developer tool bar.

Here is the code