Disable text selection and right click in html / asp.net pages

This article explains how to make it harder to copy a html page's content (text/images). It is almost impossible to totally prevent displayed content from being copied, after all, someone can simply start typing if they are really determined. But we can make it more difficult by disabling the more obvious methods.

To accomplish this functionality you need to:
1) Disable the right clicks, so that users can't use the right click to save the images.
2) Disable the text selection.
3) Disable Drag and drop of images

All of the above mentioned conditions relates with the mouse events, so we will manipulate the mouse events using the JavaScript (which is the default client-side script supported by browsers).

Most of the scripts available on internet can do this but these are not cross browser compatible.
The JavaScript code I am using in this article is also drawn from various URL's searched by googling.
(Check the code file attached old javascript.txt)

When I applied the code (old javascript.txt) it was able to:
1) disable the right click works on all browsers
2) disable the text selection

But the main drawback of the code was that the text selection blocking JavaScript code, in Mozilla Firefox prevents click on the text boxes, as a result you can't type into the input boxes.
The below line of code is creating the problem:
document.onmousedown=disableselect

After googling and some r&d I somehow managed to get this working, what I did was
a) removed document.onmousedown=disableselect from JavaScript code
b) Used Cascading Style Sheets (CSS) for body text. Setting the -moz-user-select property to none , disables the text selection in Mozilla Firefox.

Code:

Place the below code in the head tag of html page:

<script language="JavaScript1.2" type="text/javascript">
                      
                              //The functions disableselect() and reEnable() are used to return the status of events.
                      
                      	function disableselect(e)
                      	{
                      		return false 
                      	}
                      	
                      	function reEnable()
                      	{
                      		return true
                      	}
                      	
                      	//if IE4+
                              // disable text selection
                      	document.onselectstart=new Function ("return false")
                      	
                      	//if NS6
                      	if (window.sidebar)
                      	{
                      		//document.onmousedown=disableselect
                      		// the above line creates issues in mozilla so keep it commented.
                      	
                      		document.onclick=reEnable
                      	}
                      	
                      	function clickIE()
                      	{
                      		if (document.all)
                      		{
                      			(message);
                      			return false;
                      		}
                      	}
                      	
                              // disable right click
                      	document.oncontextmenu=new Function("return false")
                      	
                      </script>
                      
                      Add the below code into your CSS :
                      
                      body
                      {
                      -moz-user-select: none;
                      }

Open in new window

Disable the drag and drop of images follow the below steps:
1) In the html page body add a ondragstart method, as the name suggests it will do nothing if any drag event is performed e.g.
<body ondragstart="return false">
2) The above Javascript code doesn't works in Firefox so you need to manually add a preventDefault attribute on each image tag.
<img alt="Banner Image" src="http://someurl/abc.gif" onmousedown="if (event.preventDefault) event.preventDefault()" />

Note:
1) This code doesn't block clicks on html links, input boxes, selection box etc.
2) It code works with asp.net, php and all other web based languages as it's using pure javascript and css.
3) Code is test and working in below browser:
a) Internet explorer (all versions)
b) Mozilla
c) Chrome
d) Safari

Download the sample project files from here:
http://ajaysharma.in/uploads/codes/Disable-text-selection-and-right-click.zip
old-javascript.txt

Disclaimer:

This code does not protect you in every instance. For example, "geeks" could browse cache and retrieve information if they wanted to, and there is always the classic screen print or print to PDF which can in turn be converted back to text. So, if someone really wanted to capture your information, it is difficult to prevent it absolutely without the aid of third party encryption based tools, and then, you might need to be a little concerned about page ranking.

This Article is really targeted toward deterrents or making it a more difficult for the "average" web surfer to copy. By using these types of techniques, it also helps to reinforce any other copyright notices you may have, in so much as denying the user to simply right click and copy. After all, if you do make it a little more difficult, readers might take it a lot more seriously.

To that end, there is another simple trick you can do and sometimes easier for specific segments (such as <body> in this case) : <body oncontextmenu="alert('This Site is protected by Copyright');return false;">

So, please think carefully about the level of protection you really need, and please use this code quite happily more as a deterrent rather than guaranteed protection for securing your content, or total prevention from copying.

I hope you have found this Article useful.

Comments (4)

rdivilbiss

Top Expert 2005

Commented: 2010-02-14

To show the problems of protecting page content.
nocopyprotection.jpg

Mark Wills

Topic Advisor

CERTIFIED EXPERT

Distinguished Expert 2018

@rdivilbiss:

Reading the fine print (and the disclaimer), it is acting more as a deterrent more so than a method of protection.

Agree, the fact that it is visible means it can be copied, just a bit more involved for those who want to copy. No need to make it as easy as a right click...

And for a lot of "mere mortals" a deterrent maybe all that is required :)

Commented: 2010-02-15

ajaysharmaapjs,

My apologies if any of my feedback seemed harsh. It was not my intent.

Nice job and thank you for contributing to our collection of articles.

Best regards,
Rod

Michel Plungjan

IT Expert

Distinguished Expert 2023

Commented: 2010-02-16

Instead of

2) The above Javascript code doesn't works in Firefox so you need to manually add a preventDefault attribute on each image tag.
<img alt="Banner Image" src="http://someurl/abc.gif" onmousedown="if (event.preventDefault) event.preventDefault()" />

you could do

window.onload=function() {
  var imgs = document.getElementsByTagName('img');
  for (var i=0, n=imgs.length;i<n;i++)  {
    imgs[i].onmousedown=function(e) { if (e && e.preventDefault)e.preventDefault() } // or perhaps just return false;
  }
}