Recipe 5.5. Disabling Image Download


You need to prevent visitors to your web site from downloading proprietary images displayed on your site.


JavaScript, DHTML, and other sneaky coding tricks can be used to discourage, if not completely prevent, visitors to your web site from copying images from your web pages. None of the free options are impenetrable, but together they may be enough to ward off the less dogged online poachers. Consider these methods the equivalent of a cheap bike lockit works great until the thief with bolt cutters finds it.

  • Disable the right-click (and therefore Save Image) feature

  • Disable Internet Explorer's Image Toolbar

  • Place invisible layers over your images

  • Store images in a protected directory


The Internet has a love-hate relationship with stealing. Viewing the source code of a nifty-looking web page is by far the most popular method for learning about web design (after reading this book, of course). By borrowing a snippet of code from one site and adapting a bit from another, web designers have been advancing the state of their art for yearsand few of their "victims" would consider what they're doing stealing. But then there's the whole Napster thing…

To be sure, the fruits of an artist or photographer's labors have more in common with music than HTML. Web page codethe structural part, not the contentis a commodity. There are only so many ways you can make a page look the way it does. If you find a new approach, you're almost obligated to share it. Many of the methods of protecting source code fail, and for the same reasons listed for the methods described above: the available schemes are fairly rudimentary and easy to circumvent. The Web is just not the greatest medium for exhibitingwithout giving awaydigital content of any real value. Once something is out there on the Internet, it's free for the taking unless you go out of your way to prevent it. Unless, of course, you work at making your images less accessible.

Disable right-click with JavaScript

There are a handful of scripts available on the Web that will display an error message in a visitor's browser when he right-clicks anywhere on the page. Just search Google for "javascript disable right click" to find one to download for your web site.

I'd love to put the contents of the script that I use in this book; however, it's copyrighted, and I'm not a fan of legal action (especially when it's aimed at me). You can find the same script via Google, though.

Most work by rerouting the onMouseDown event handler of the Document object of a web page from the defaulta browser-generated menu that usually includes an option for downloading an imageto a custom warning or error message (see Figure 5-11).

Savvy web surfers can skirt this tactic by disabling JavaScript in their browser. No JavaScript, no warning message. And later versions of Mozilla and Firefox give advanced users a finer level of control over what JavaScript can and can't dosuch as controlling contextual menuswithout completely disabling it.

Figure 5-11. JavaScript can display a message when a visitor tries to right-click on an image to download it; the more threatening the warning, the better, since this technique can be easily circumvented

Disable the Internet Explorer image toolbar

The following <meta> tags will hide the little toolbar widget the pops up over an image in Internet Explorer (see Figure 5-12). However, this one's only good for protection from grandmas and least-competent criminalsno offense, grandmas.

Figure 5-12. The Internet Explorer image toolbarI copied this image from the Microsoft web site!

 <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="imagetoolbar" content="false"> 

Use layers to put a transparent force field over your images

This cunning method uses the z-index attribute of a <div> to place a fake transparent image over the real one.

 <div  style="position:absolute; z-index:10">   <img src="daddison_img_60128.gif" width="503" height="353"> </div> <div  style="position:absolute; z-index:5">   <img src="protected_img.jpg" width="503" height="353"> </div> 

The z-index is the third dimension of a web page, allowing you to layer an item over another by giving it a higher z-index value. In my example, daddison_img_60128.gif is just a devious name for a 1 x 1 pixel transparent GIF sized up in the browser to match the dimensions of my real image, protected_img.jpg. Because the protected image is in a <div> with a lower z-index, visitors who are able to right-click will be right-clicking on the fake image above it. Bwahahahahahaha!

Downsides? A couple. This method requires at least four times as much HTML code as a simple inline image. Using it for multiple images on a page will lead to some really weighty pages. And, as with other methods mentioned above, anyone with the time and knowledge of HTML can view your page's source code to find the real image and download it that way. Or they can just take a screenshot of the page, and then crop out what they don't want to get their own copy of your "protected" image.

Limit listing and linking

Finally, you'll want to keep your "protected" images in a separate directory that Apache can't auto-index. You can ensure this by adding one line to an .htaccess file in the directory of protected images:

 Options -Indexes 

If no default web page exists in a directorywhich is usually the case with a directory full of GIFs and JPEGsApache will show a list of files in the directory (see Figure 5-13).

Turning off indexing keeps the file list private (see Figure 5-14)

A couple of rewrite rules in the same .htaccess file will limit links to files in the directory to those that come from your web site:

 Rewriteengine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^*$ [NC] RewriteCond %{HTTP_REFERER} !^*$ [NC] RewriteRule .*\.(gif|GIF|jpg|JPG|png|PNG)$ - [F] 

This will prevent an unscrupulous free-loader from stealing your imagesand your hosting account bandwidthby adding links on his web site that point to files on your web site. This one doesn't generate a scary message, just a broken image on the offender's site.

Figure 5-13. A directory file list with Apache indexing

Figure 5-14. Disabling Apache indexing keeps the file list private

Commercial solutions

A couple of commercial solutions can help: digital watermarking and file encryption.

Watermarking valuable images with copy-right information and usage terms will not, by itself, keep people from down-loading them from your web site. Unlike watermarks on fine stationery, digital watermarks may be invisible to the viewer, but they can be read and even tracked on the Internet even if a file is copied and moved several times. DigiMarc Corporation ( offers a digital watermarking technology that's available as a plug-in for Adobe Photoshop and other image editors. The watermark even remains readable on images captured from a site via screenshot. The company's subscription-based tracking service will scan web sites for unauthorized use of watermarked images.

Artistscope ( sells a variety of applications for copy protection of online content. With its popular Secure Image Pro application, you can encrypt image files and run Artistscope's proprietary Java applets on your web server to display the images for visitors.

Web Site Cookbook.
Web Site Cookbook: Solutions & Examples for Building and Administering Your Web Site (Cookbooks (OReilly))
ISBN: 0596101090
EAN: 2147483647
Year: N/A
Pages: 144
Authors: Doug Addison

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: