Click for Navigation:
Protecting Text from being copied | Protecting an Image from being downloaded | Protecting by moving out to temp. info | Disabling Context Menu| Protecting a Whole Window


How to Protect your Contents

Let's be honest: There is no really foolproof way to protect the contents on your web site - be it text or an image. A visitor fairly familiar with HTML can always find a way around any protective measure. Still, when a visitor aiming to copy text or to download an image is shown that you don't want that, it might have a deterring effect.

Alas, also the opposite effect should be considered: HTML-savvy people might feel even provoked to find a way how they still can steal your contents. There are several such ways. You will understand that I don't want to enter into them here, or the objective of this article would be thwarted.

Just keep in mind that the nature of any protection you can do to the contents of your web site is not so much reliable for technical reasons. Rather, it is some sort of a psychological ward-off. You should consider what type of people could be expected to visit your site: If they will usually have some distance to the Internet, it should work. If they are rather freakish natures, your protective measures might even backlash.

Protecting Text from being Copied

It is fairly simple to erect a psychological barrier for safeguarding a text on your web site. The most widespread way to capture a text from screen is to "select" it by moving the cursor over it, with the cursor button pressed. Then it is copied to the clipboard. From there it can be processed in any way.

You can prevent the selection, however. Therefore it cannot be copied to clipboard. To that aim, simply add an option  onSelectStart=  to the BODY tag, and return false. Thus the visitor's browser is told not to do the selection.

So, the BODY tag looks like this:

<BODY onSelectStart="return false">

Its effect is that the selected text will not be "marked" (reversed foreground and background color).There's no point in copying it to clipboard.

top

Protecting Image from being Downloaded

Protecting an image takes a bit more effort. Firstly, add an option  onmousedown=  to the IMG tag of the image you want to protect. As its target enter the name of a Javascript function, say "noclick".

So, the respective IMG tag looks like this:

<IMG src="…" … onMouseDown="noclick()">

Now, the function "noclick" is called each time the user clicks with any mouse button anywhere on the screen's client area. Some of these clicks might be perfectly legitimate, so they should not be hampered.

Only clicking by the right mouse button should be forestalled. Unfortunately there is no option "onrclick=" to the IMG tag, so we need to sort out the right-clicks ourselves. To make things even worse, the two major browser types (Netscape and MS-Internet Explorer) handle mouse clicks differently. So we have to distinguish in our function "noclick":


<SCRIPT LANGUAGE="JavaScript">
function noclick (scx)
{
   if (navigator.appName == "Netscape" && scx.which == 3)
	{ alert ('right-click disabled');
	  return false; 
	}
   if (navigator.appVersion.indexOf("MSIE") != -1 && 
						event.button == 2)
	{ alert ('right-click disabled');
	  return false; 
	}
}
</SCRIPT>

For a Netscape browser by  scx.which == 3  , or for MS-IE by , the right-clicks are sorted out. So, a right-click within the IMG area - that is usually indicative of a trial to download the image - triggers a message box  "right-click disabled"  (or any other text you think appropriate).

top

Protecting by Moving out to Temp. Info

An easy way to show an information, but to protect it from being printed or copied, is to move it out to temporary information.

Mind you! Also temp. information is no absolute safeguard for protecting your contents. Savvy Internet users will always know how to grab something they want to get. All you can do is to set up a psychological barrier and to make stealing your contents as "expensive" as possible!

top

Disabling Context Menu

A somewhat crude method for preventing downloading is to disable the context menu altogether. Thus the visitor cannot only not download your contents but is also hindered from printing, changing the coding, looking at your document's properties, and some other things that might be useful with your document. Therefore, you should consider it well!

If you want to disable the context menu altogether, all you need is an additional attribute in your document's <BODY> tag:

<BODY onContextMenu="return false">

If you want to perform another action instead of having the context menu displayed, place it in a JavaScript function ending by  return false . Say, you want to have a message box displayed instead of the context menu. Then it could look like the following:


<SCRIPT LANGUAGE="JavaScript">
function Rclick()
{
   alert ('boo!');
   return false;
}
</SCRIPT>

In your  <BODY>  tag, call this function, passing on its return value:

<BODY onContextMenu="return Rclick()">

top

Protecting a Whole Window

Sometimes you might have to take care of a whole window, text plus images etc.

You can do that by calling the document to be protected not in a standard browser window but in an extra window:

window.open('document.htm','','left=…,top=…,width=…,height=…')

When launched that way, the extra window has no menu bar, i.e. no menu  File  and thus no menu item  Save as …  That is, the user has no chance to save that window completely, with all its dependent files (if any).

The next step, if you want to be on the safe side, is preventing the source code from being saved. To achieve that, do the trick you found in the previous section:

<BODY oncontextmenu="return false" >

Now the user cannot get the source code nor the names of the dependent files, to download them individually afterwards. The protected window can only be looked at on screen, it cannot even be reconstructed from its parts.

top