o2b.net : Tim Murtaugh

Attitudes and mores regarding fair use of copyrighted works have been skewed somewhat in the post-Napster world. Using a photograph found on a website as your desktop image without permission is technically against copyright laws, but who’s going to stop you? The law may be on the books, but it would take all the copyright holder’s resources to enforce it.

Of course, using a found image as a desktop is a minor infraction, but the same methods of image extraction can be used for much more malicious reasons, such as re-purposing images for a commercial project.

It’s like cavities: Prevention is the best medicine.

Before we continue…

Let me say this loud and clear: 100% security for imagery on the web is an impossible proposition.

(Beat.)

The nature of the web itself ensures that there is no way to present content of any kind without allowing the user’s computer to make a local copy of it.

However, many of us have clients (or potential clients) who would like to present valuable imagery on the web, but are skittish knowing it can be stolen. Protecting images with 100% certainty is not possible, but there are ways to make theft more difficult, and our clients more comfortable.

To Serve and Protect

The ease with which web-based intellectual properties can be stolen is staggering; never before has it been so easy to steal so much. This leads to a problem: Ease of theft gives the impression that what is available to be stolen is not worth protecting.

If I find a dollar on the sidewalk, I usually have no problems picking it up and keeping it, once I determine that the owner isn’t right there looking for it. If I find twenty dollars, I’m hesitant — I look around for someone who might have dropped it, or to see if someone else saw it being dropped, but I would end up keeping it if no one claimed it. If I find a hundred dollars, I’m even more hesitant; I will be much more likely to actively attempt to find the owner of the money. I know how much a hundred dollars means to me, and losing it would be disappointing.

This doesn’t always translate to the web. For the most part, valuable assets are presented in the same manner as as valueless ones, so the perceived values may not reflect reality. Putting any protective measures in place, regardless of how effective they are, will at the very least say, “Hey, this doesn’t belong to you.”

The “Right Click Menu”

First, let’s correct a common misunderstanding. The so-called “right click menu” is properly called the “context menu.” On a Windows machine, right clicking activates it, hence the misnomer. On a Macintosh, for example, which doesn’t ship with a right mouse button, Control+Click activates the context menu.

Know Thine Enemy

If we’re going to protect our images, we need to know how they are being stolen. In order to snag an image, a user needs to be able to:

1. Click on it, allowing them to:
   1. Use the context menu to save it;
   2. Dragging and dropping it to a local folder.
2. Find the image’s URL, by:
   1. Using the context menu to view the properties of the image;
   2. Viewing the source of the page;
   3. Dragging and dropping it into the address bar.
3. See it, which means that the user can:
   1. Take a screen shot of it;
   2. Find it in their local browser cache.

Let’s look at techniques to defeat as many of these as we can.

Note: None of the following techniques are enough on their own. You’ll need to choose a combination that works for you, your site and your users.

1. Disable the context menu entirely

The context menu provides easy access to image files and source code. It also provides easy access to other useful functions such as opening links in new windows, cut, paste, refresh, etc. It is therefore important to realize that disabling it may greatly inconvenience your Windows-using visitors, possibly even rendering your site unusable to them. Not only that, but disabling it won’t have any affect on users who use the drag and drop method to snag files. (Dragging and dropping images is common among Mac users; the PC version of IE allows it as well.)

	<script language="JavaScript1.2" type="text/javascript">
	if (window.Event)
	  document.captureEvents(Event.MOUSEUP);

	function nocontextmenu() {
	  event.cancelBubble = true, event.returnValue = false;

	  return false;
	} 

	function norightclick(e) {
	  if (window.Event) {
	    if (e.which == 2 || e.which == 3) return false;
	  }
	  else if (event.button == 2 || event.button == 3) {
	    event.cancelBubble = true, event.returnValue = false;
	    return false;
	  }
	}

	document.oncontextmenu = nocontextmenu;
	document.onmousedown = norightclick;
	document.onmouseup = norightclick;
	</script>

This particular script is one of many variations, and only works in IE. Others can be found that will work in Netscape as well.

Pros

• Prevents method One: Clicking on it.
• Hampers method Two: Finding the URL.

Cons

• Prevents natural use of browser.
• Greatly disliked.

2. Disable the context menu selectively

A much more user-friendly approach. On any image you wish to protect, add an onmousedown event handler that calls the context menu disabler.

Demo: (Calling the context menu for this image will fail for IE5 users, Windows or Mac.)

Code: Write your image as normal, giving it a unique ID:

<img id="thisImage" class="demo" src="thumb_paintbrush.gif"
width="60" height="51" alt="" />

Place the script from the previous technique immediately prior to your </body> tag, with the following modifications:

document.getElementById('thisImage').oncontextmenu = nocontextmenu;
document.getElementById('thisImage').onmousedown = norightclick;
document.getElementById('thisImage').onmouseup = norightclick;

A simple for loop will allow you to cycle through an array of images.

Pros

• Prevents method One: Clicking on it.
• Hampers method Two: Finding the URL (via the context menu).

Cons

• Only effective in certain browsers.

3. Cover images with a transparent GIF

Set important images as the background of an HTML container (td, div, etc), then fill the foreground with a transparent GIF of identical or greater size. (Without the transparent GIF, the context menu may offer the option to “Save Background Image As…”)

Demo:

Code:

<p style="width: 60px; height: 51px; background: url(paintbrush.gif);">
<img src="x.gif" width="60" height="51" alt="Covered up." />
</p>

Placing the styles in your external style sheet will make the path that much more difficult to find.

Alternative: Instead of a background image, you can position both images on the page absolutely, giving the transparent GIF a higher z-index.

Pros

• Prevents method One: Clicking on it.
• Hampers method Two: Finding the URL (via the context menu).

Cons

• Background images can be troublesome in NS4.

4. Set images in Flash

Flash movies have their own context menu, with different controls. And, while some Flash movies can be saved and re-opened in Flash to get at the assets inside, Flash helps you prevent this by optionally requiring a password for import (details from Macromedia).

Demo: (The demo is a Flash 5 file.)

Additionally, you can insert frames into the Flash movie that contain copyright information, but are not displayed. It would then be possible to verify the origins of stolen Flash pieces.

UPDATE: Read this A List Apart article for tips on embedding flash into valid XHTML documents.

Pros

• Prevents method One: Clicking on it.
• Prevents method Two: Finding the URL (via the context menu).
• Allows for additional copyright statements.

Cons

• Requires additional software for development.
• Requires a plug-in for viewing.

5. Write images using JavaScript

While a bad idea on a grand scale (really bad), you can use it on important imagery to obscure the paths from the casual observer. Client-side scripts are processed after a page is downloaded, hence the results are not displayed in the source.

<script>document.write('<img src="foo.gif" alt="" />');</script>

For this to be effective, you will need to abstract the call to the image in some way. Putting it fully into the script would defeat the purpose.

<script>document.write('<img src="+'imageVariable'+" alt="" />');</script>

Ideally, you would set the variable in an external JavaScript file.

A determined user could still search your external file for the references, so it might be worth obscuring your paths even further, by encrypting them in some way.

<script>document.write(image('kgsttsp.ya rj'));</script>

Click here to see sample encryption functions. [Encryption technique by Tomislav Šereg.]

Pros

• Hampers method Two: Finding the URL.

Cons

• This technique makes these images unavailable for viewing by users who disable JavaScript or whose clients do not support JavaScript.
• Encryption adds steps to production.

6. Watermarking

An age-old tradition, many consider watermarking images on the web distasteful and an unacceptable visual distraction. However, watermarking is the only method I know that prevents screenshots and cached versions from being effective. You must decide if spoiling the image for theft purposes also spoils it for your purposes.

Watermarking is most effective when the text or iconic elements are anti-aliased over photographs; in a little GIF like this it would not be difficult to remove the watermark pixel by pixel.

Alternative: Use an image with a watermark in it instead of a plain transparent GIF with technique 3 above. It could save you a lot of Photoshopping if you have many images to watermark.

Pros

• Prevents method Three: Seeing it, by ruining the purity of the displayed image, making it unfit for re-purposing.
• The watermark can contain additional copyright statements.

Cons

• Ruins the purity of the displayed image

7. Remove the browser’s menu bar

For this to be an option, you must present your site or images in a new window, stripped of its menu bar.

Demo: (Click to enlarge.)

<a href="zoom.html" onclick="OpenWindow(this.href); return false;">
<img class="demo" src="thumb_paintbrush.gif" />
</a>

Click here for the source of the pop up window.

If you have a gallery of clickable thumbnails, here is a suggested method:

1. Present full-size images in a new window.
2. This window should not contain anything else of interest.
3. On any type of click, right or left, the window closes itself.

Pros

• Hampers method Two: Finding the URL.

Cons

• Prevents natural use of browser, though in a manner accustomed to by users.
• When used for your entire site, it may be difficult to impossible for people with disabilities or those who surf with JavaScript turned off, etc, to browse it.
• Less effective for IE/Mac users, who can turn the menu bars back on with the keyboard.

Diversify

As noted above, none of these are going to cut it by themselves. You’ll need to choose a couple to cover as many bases as you can.

My personal preference is this combination:

1. Selectively suppress the context menu on prime imagery. (Technique 2)
2. Load important imagery into a new window, removing the menu bar and making sure that any click on its contents closes it. (Technique 7)
3. Write any important imagery than can’t be loaded into a new window using JavaScript. (Technique 5)
4. Set as many images as practical as background images, with as strong a watermark as you can stand in front of important imagery. (Technique 6)

To Sum Up

There is always a way to steal web-based imagery, but making use of protective techniques may deter the casual thief. It is also a way to let would-be thieves know the depth of your commitment to protecting your intellectual properties. Follow it up with strongly worded copyright notices and Terms of Use language, and you give yourself a stronger leg to stand on if you need to claim theft or infringement.

This entry was posted on Thursday, October 10th, 2002 at 10:05 pm and is filed under Articles, Imagery, Theft. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.