Introduction:
By clicking F12 in the browser we can open the Console log and
development tool of a web site running in the browser. As a developer while you
are developing its OK for you, but when others are trying to see your application code and do some operations
definitely we don't want to disclose this. So what is the solution? we can easily prevent this using
some simple JavaScript and jQuery scripts. Let’s see how.
Description:
To stop this we can do two things. One, while users are opening
the console log he or she will be prompted with some message or user will not
be accessing the F12 key with mouse right click options. We will discuss both
the ways one by one.
Prompt with a Message:
Add a new HTML page and take a div or label to show
the message for now, later you can do whatever you want with that message. And
now within a script tag write down the JavaScript Code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Console
Log Status</title>
</head>
<body>
status:
<div id="status"></div>
<script>
var checkStatus;
var element
= new Image();
element.__defineGetter__('id', function ()
{
checkStatus
= 'on';
});
setInterval(function () {
checkStatus
= 'off';
console.log(element);
console.clear();
document.querySelector('#status').innerHTML = checkStatus;
},
1000)
</script>
</body>
</html>
|
Output:
Following is the output of disabling console window or prevent f12 in browser
 |
So as output we can see status is Off while the
developer option is close and it’s On while the tray is open.
Prevent the F12 key and Right mouse button click:
To prevent the user directly accessing the console log we can use
this trick. User will not simply allow to use the F12 key and right mouse
button for opening options. We will use the key code of the specified keys (F12
and Right mouse button). Let’s do it.
Before you start, let's keep this in mind that the key code of F12 is 123.
So, add a new HTML page and add following jquery script tag in your application.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
|
Now in the script tag write down the following code.
<script>
$(document).keydown(function (event) {
if (event.keyCode
== 123) {
return false;
}
else if (event.ctrlKey && event.shiftKey
&& event.keyCode == 73) {
return false;
}
});
$(document).on("contextmenu", function (e) {
e.preventDefault();
});
</script>
|
After finishing run the page in browser and you will discover that
the right click mouse button and the F12 key is not working. So no user can open the
console log and its crossed another level of security.
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
7 comments :
Very useful post..
thank u very much..
what if user enables it through browser menu?
@Anonymous..
else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) {
return false;
}
I think this part handles that. shortcut to open developers tool is ctrl+shift+I. so he is disabling it for those keys also.
just press Ctrl + SHIFT + J
what if user enables it through browser menu?
How can i prevent developer tools like firebug, etc...
I think, browser default behavior we can't change. We can handle it through keyboard events only.
kdfgfgd
fgf
gf
g
Note: Only a member of this blog may post a comment.