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
Most of the scripts available on internet can do this but these are not cross browser compatible.
1) disable the right click works on all browsers
2) disable the text selection
The below line of code is creating the problem:
After googling and some r&d I somehow managed to get this working, what I did was
a) removed document.onmousedown=disableselect
b) Used Cascading Style Sheets (CSS) for body text. Setting the -moz-user-select
property to none
, disables the text selection in Mozilla Firefox.
Place the below code in the head tag of html page:
Disable the drag and drop of images follow the below steps:
//The functions disableselect() and reEnable() are used to return the status of events.
// disable text selection
document.onselectstart=new Function ("return false")
// the above line creates issues in mozilla so keep it commented.
// disable right click
document.oncontextmenu=new Function("return false")
Add the below code into your CSS :
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">
attribute on each image tag.
<img alt="Banner Image" src="http://someurl/abc.gif
" onmousedown="if (event.preventDefault) event.preventDefault()" />
1) This code doesn't block clicks on html links, input boxes, selection box etc.
3) Code is test and working in below browser:
a) Internet explorer (all versions)
the sample project files from here:
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.