Skip to page content or Skip to Accesskey List.

Work

Main Page Content

Protecting Your Images

Rated 3.89 (Ratings: 0)

Want more?

  • More articles in Code
 

Mike Ashton

Member info

User since: 30 Aug 1999

Articles written: 2

Don't want people stealing your images off your site?

Well here is a solution I implemented for a client, that makes the

only way to grab your image is thru a screen grab (see example

here).

Now this is not an absolute solution to the problem since there isn't

one, but this is best way I've been able to implement todate, without

adding watermarks to the images.

There are two parts to this implementation.

First you require a cgi script (see image.pl below) that: 1/ checks to

see if it's your page calling the image (using HTTP_REFERER) as you

see I'll allow any page from the /test/directory to qualify. If you

use another CGI ensure you explicity disallow it from qualifying. 2/

pipes your protected image from a safe directory 3/ ensures that the

browser won't cache the image file by setting both the PRAGMA and

EXPIRES headers. (even try viewing using page info)

Next part to the solution is to use javascript (see code in html

example below) in your page to ensure the user can't use the image

save feature by: 1/ loading a dumby image which appears when ever the

mouse is over the image, thereby disabling the right mouse, save image

as. 2/ using javascript to load the desired image, then swapping it

with the dumby once loaded and whenever the mouse is NOT over the

image.

Now also remember that your dumby image size has to be the same as the

image you want to display, now this wasn't a problem for me since I

ensured all of my clients photgraphs were the same size.

====  image.pl ===========

#!/perl

require "Cgi-lib.pl";

&ReadParse(*search);

if ($ENV{'HTTP_REFERER'} =~ m#http://www.ematchcorp.com/test/# ) {

$expires='Expires: Wed, 26 Feb 1997 08:21:57 GMT

';

$pragma='Pragma: no-cache';

$tmpfile="c:\\inetpub\\www\\ematch\\images\\$search{'file'}";

open( FROM, "< $tmpfile" );

binmode FROM;

binmode STDOUT;

# Print out the contents of the image file.

print "Content-type: image/$search{'type'}

";

print $expires,"

";

print $pragma,"

"; print "

";

while (<FROM>) {

print $_;

}

close FROM;

} else {

## Unauthorized access

print "Content-type: text/html

";

print "<html><body>copyrighted material</body></html>

";

}

exit;

====== end image.pl========

==== begin index2.html==========

<html> <head> <title>image example</title> </head>

<script language='javascript'>

function ImageLoad() {

window.status="Image cache test";

iFake = new Image ();

iFake.src = 'loader.gif';

iReal = new Image ();

iReal.src = '/cgi/image.pl?type=jpeg&file=img0064.jpg';

document.images['slide'].src=iReal.src;

}

</script>

<body onload='ImageLoad();'>

<a href="" onMouseover="document.images['slide'].src=iFake.src;" onMouseout="document.images['slide'].src=iReal.src;"> <img src="loader.gif" name='slide' border=15> </a>

</body> </html>

=========end index2.html ======

The access keys for this page are: ALT (Control on a Mac) plus:

evolt.org Evolt.org is an all-volunteer resource for web developers made up of a discussion list, a browser archive, and member-submitted articles. This article is the property of its author, please do not redistribute or use elsewhere without checking with the author.