JavaScript to Disable Accidental Source Code Viewing

 

If you are writing a Web application then you want your users to have simple, trouble-free interactions with your site. You definitely don’t want users to get confused with a ‘view source’ context menu when they right click on the form by accident. To make your site as user friendly as possible I think that it is important to disallow accidental mouse clicks to confuse your users. To do so you can use some simple JavaScript code.

I’m giving an example HTML page with the JavaScript embedded below. This topic has been covered before on various support sites, but I want to give my own example code that I know works and also include my take on this.

A Heads-Up: This Script Won’t Stop Intentional Viewing of your HTML Source Code

You can’t stop users from intentionally viewing your source code using tools like FireBug, or even using the Windows shortcut Shift-F10, but hiding your code is not the point of this article.

Disabling the Right Click Context Menu

Ok, so for starters you’ll want to address the right-click of the mouse button that brings up the menu for users to choose what special action they want to take. This can be quite confusing depending on the level of knowledge of the user and should be disabled in any application that is trying to provide a basic form interface.

The JavaScript event to address the menu that shows up on the right-click of the mouse button is called: oncontextmenu. This event is universally supported by the major browsers so you won’t have to change it for any particular browser version. I’ve tested in various versions of Internet Explorer, FireFox, and Chrome, and all support this feature.

So to remove the likelihood of the menu appearing for users of your Web application you would write something like this:

function noRightMouseClick() {
return false;
}
document.oncontextmenu = noRightMouseClick;

In addition to setting the JavaScript handling for displaying the context menu, you should disable the right-click of the mouse button. You’ll need to catch both the mouse button up and down events. For non-technical users trying to fill out a form this is very unnecessary to have active on your Web application. Here is the code snippet you’ll need to add to catch and disable the right mouse click:

function mousehandler(e) {
var myevent = event;
var eventbutton = myevent.button;
if (eventbutton == 2) return false;
}
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;

Example HTML Page with the Context Menu Mouse Right Click Disabled

In the example page you can see how this all fits together:

<!DOCTYPE html>
<html>
<head>
<script language="JavaScript">
function noRightMouseClick() {
return false;
}
function mousehandler(e) {
var myevent = event;
var eventbutton = myevent.button;
if (eventbutton == 2) return false;
}
document.oncontextmenu = noRightMouseClick;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;
</script>
<style>
p{
width:300px;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore

et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in

culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,

totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae

dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,

sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam

est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius

modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima

veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea

commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam

nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
</body>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s