People visiting your site can easily download or copy your copyrighted images without your permission using four different methods: hotlinking, right clicking, screen shots, and web archiving.
What follows is a description of each method including:
Hotlinking
- Description
- Hot Linking is when someone sets the SRC attribute of an IMG tag to an image on your web site. Besides making it look like your images are on their web page, they also consume some of your allotted bandwidth.The following is an example of the HTML one would use to display an image from susansexton.com on their own web site.
<img src="http://www.susansexton.com/images/horse1.jpg" alt="" />
- Counter Measures
- Limit display of images to users who are visiting your site (your domain). This is accomplished by implementing two server-side technologies: Sessions and custom File Handler rules.
- Sessions
- When a user first visits your site, they are sent a cookie that uniquely identifies them. Before each image is sent to the browser, the system checks to see if the cookie has been set. If it has, the image is sent. If it hasn’t, no image is sent. This method requires users to view your images in the context of a web page on the first visit. From that point on, they can, theoretically, access the images directly by entering the image’s SRC attribute in their browser’s Location bar.
- Custom File Handler Rules
- This method can be modified so that images can only be viewed in the context of a web page. This is accomplished by telling the web server to handle image files using a custom script. The custom script looks for a unique key in the Session variable. If the key exists, the image is served. If not, it’s not.In practice, we set the key at the start of the page. The server then sends the image and destroys the key immediately after the image has been sent. If the key doesn’t exist, the images cannot be viewed and thus, cannot be viewed except in the context of a web page. This is accomplished in Apache by adding the following two lines to .htacces (for the directory you wish to protect):
Action blockhotlinking /hotlinkcheck.php
AddHandler blockhotlinking .jpg .jpeg
where hotlinkcheck.php is a PHP script that does what we’ve described.
Any anti-hotlinking counter measure incorporating both of these techniques will be very successful.
- Circumvention Techniques
- This technique can be circumvented by hacking the server, which is not the kind of activity people seeking to copy pictures are likely to engage in. This technique may also be circumvented by Web Archiving programs, but in our experience, if the script is written correctly, even these programs can be prevented from siphoning the images.
- Potential Incompatibilites/Issues
- Such a system makes designing the pages difficult because all images are “generated” on the fly and thus, cannot be viewed in the standard WYSIWYG HTML design program (such as Dreamweaver of GoLive). This system can be used, however, with automated image gallery creation tools such as iView Media Pro. Click here for more information. Also, users who don’t accept cookies will experience problems too. In fact, people with hotmail.com email accounts frequently experience problems since by default, Internet Explorer for Windows doesn’t allow framed documents from another domain to send cookies. The work-around is to include some JavaScript that breaks your site out of frames (keeps your site from being framed by someone else).
System Requirements
- Server-side
- Any server that can be configured to handle image files using a custom script or with some sort of server-side scripting capabilities.This system does not require the GD library but could benefit from having it available.
- Client-side
- Cookies are used by default, but the system can be configured to use a transparent ID in cases where cookies are not allowed.
Right Clicking
- Description
- Users can right click on an image and choose to save it on their computer. This is the same as dragging the image to the desktop.
- Counter Measures
- There are four counter measures that can be used to inhibit right clicking or dragging and dropping of images: Spacer w/ Background Image, JavaScript Hide Source, Microsoft Meta Tag, and A Thousand Images. These counter measures can be used together or separately as they each address a different aspect of the right click feature.
- Spacer w/Background Image
- This is my personal favorite technique because it is widely supported, does not require any special JavaScript, fools most attempts at copying the image, can be used in a WYSIWYG HTML editor, and when used in conjunction with the hotlinking counter measures, is nearly foolproof. Basically, each image is displayed as a transparent GIF whose size and background image is set to the image you want to display. The result is that the user sees the image as she normally would, but when she tries to right click to save the image, she ends up saving the clear GIF rather than the actual image.
- JavaScript Hide Source
- Using JavaScript, the functionality of the right mouse button can be altered to prohibit downloading of images. It can also be used to hide the source code of a page so that the user can not navigate directly to the image outside the context of the actualy page. Because this is a very complicated topic, no examples of how to do this are provided here. Regardless, here are a couple of links in case you’re interested: hide source code and disable right click.
- Microsoft Meta Tag
- This doesn’t really disable right clicking, but it does disable the Microsft “Image Bar” that appears when Internet Explorer (version 6) users hover their mouse over an image. Simply put this code in the HEAD element of your web pages:
- A Thousand Images
- Adobe ImageReady (the web companion to Photoshop) allows you to slice images up into little pieces. You could slice each image up into individual pixels making it very time consuming to download each pixel and recreate the image. This may be more practical than it seems…
- Circumvention Techniques
- To view the source of a page that is using JavaScript to hide the source, you can either enter this into the location bar and press Enter:
java script: alert ( document.body.innerHTML );or you could visit the site with Mozilla and use the DOM Browser to view the source code as a Document Object Model tree (and thus see the SRC attribute of the image you are after) to get at the image directly.To view an image that is being protected by an invisible GIF (the first method on this page), just look at the source and point your browser to the actual image you wish to download (and the image will appear in isolation in its own window).There is no way, that I’m aware of, to circumvent the capturing of an image that’s been split into a thousand pieces, except downloading them one by one. - Potential Incompatibilites/Issues
- Incompatible JavaScript versions: It is very, very difficult to write JavaScript code that works the same on all browsers and platforms. In all likelihood, any script you find or write yourself, will fail in one environment or another. Incompatible CSS/browser: Not all browsers will know how to display background images. Failure to do so means the users won’t see your image.
- System Requirements
- In any situation where JavaScript is required, you must include the
tags with some sort of content that explains why JavaScript is needed.Similarly, you may need to test wheter or not Cascading Style Sheets in enabled before displaying your page, if you want to be sure that your visitors see what you intend.
Screen Shots
- Description
- The user presses PrtScr (Print Screen) on Windows or Command+Shift+3 (or 4) to capture the computer display as a separate image. On Windows systems, the screen is on the clipboard and needs to be pasted into an application before it can be viewed. On the Macintosh, the screen is saved as a file on the user’s desktop, usually named Picture 1.pdf.There are a variety of system utilities that also provide this functionality and it is important for people reading this to understand that it is very valuable to be able to take a picture of your screen and share it with someone else.
- Counter Measures
- Counter measures for this method are virtually impossible. This is because web pages have very limited access to controlling, or even being cognizent of when certain keys are pressed. You could, conceivably, swap the image out for a blank image whenever a key is pressed. Because this counter measure relies on JavaScript, you have to content with everything that entails (browser compatibility, noscript fallback tags, etc.)
- Circumvention Techniques
- Even if you could disable all keys and mouse activity, the visitor could write a script that opens their browser, goes to your page, and executes a screen shot, all without touching any of the keys or the mouse. This seems extreme, but it hints at the limited capabilities of browsers to control what their owners do.
- Potential Incompatibilites/Issues
- JavaScript implementations across browsers and platforms.
- System Requirements
- In any situation where JavaScript is required, you must include the
tags with some sort of content that explains why JavaScript is needed.
Web Archiving
- Description
- Users save the page as a Web Archive (a self-contained version of the entire page, including all images) or print the page (or save it as a PDF).
- Counter Measures
- Same as Screen Shots, but even more limited; display image in modal window using a Java applet or Flash.
- Circumvention Techniques
- It depends on what kind of counter measure is used, but usually, taking a screen shot can circumvent them.
- Potential Incompatibilites/Issues
- Many people like to use Flash as the “player” for their images because it protects their images rather well (by disabling many of the methods, except for screen shots, listed on this page). For the most part, Flash is widely suppported (available on most computers). For people who use Java or who don’t have the Flash player installed, however, it can mean that they don’t see anything at all.
- System Requirements
- Depends on the method…