Tuesday, October 4, 2011

Useful Methods For Preventing Image Theft

Useful Methods For Preventing Image Theft 

1. Put desired image in an external stylesheet
(a) Put an div in the HTML page. (b) Put a single-pixel blank image in the div. (c) In an external CSS style sheet, make the div's background image the actual image to display. Eg:

HTML page head: link to the style sheet 
<link href="/style/main.css" rel="stylesheet" type="text/css" />

HTML page body: display div with blank image 
<div id="x1" class="x"><img src="/images/blank.gif" width="150" height="250"></div>

CSS sheet: display the background image 
#x1
{ background: transparent url(/images/protect/pic.jpg) top left no-repeat; }

This method will mean that a right-click "Save Image", or a drag-and-drop will only yield the blank.gif image. It also means that the filename of the protected image will only be in the CSS style sheet, not the HTML page - most people won't find it. It requires no JavaScript.
---
2. Use a CSS print style to prevent images being printed with the page (could also use an external stylesheet)
This will not be activated if the user has CSS turned off (or has an ancient browser), but since the original protected images were put there by CSS in the first place, then nothing will be displayed anyway. So they still can't print them!
HTML page head: 
<style media="print" type="text/css">
div.x {display:none}
</style>

---
3. Kill that damn Image Toolbar in Internet Explorer
HTML page head: 
<meta http-equiv="imagetoolbar" content="no" />

---
4. Prevent search engine robots from caching images
HTML page head: 
<meta name="robots" content="index, follow, noimageclick, noimageindex" />

or robots.txt file: 
User-agent: *
Disallow: /images/protect/

---
5. Prevent hotlinking to images from outside your website
See this thread [webmasterworld.com] and this site [webspiffy.com].
.htaccess file: on Apache servers
When a request is made for an image from outside the website, a different image, stolen.gif is served (basically saying that this image was stolen from www.example.com) 
Options FollowSymLinks
RewriteEngine On
RewriteCond %{REQUEST_URI}!images/stolen\.gif$
RewriteCond %{HTTP_REFERER} .
RewriteCond %{HTTP_REFERER}!^http://(www\.)?example\.com/? [NC]
RewriteRule images/ http://www\.example\.com/images/stolen\.gif [R,L]

Or:
Another way to refuse access to those images. 

SetEnvIf Referer "^$" local_ref=1
SetEnvIfNoCase Referer "^http://(www\.)?example\.com/" local_ref=1
<FilesMatch "\.(gif¦jpg)">
Order Allow,Deny
Allow from env=local_ref
</FilesMatch>

---
6. Prevent images saving to cache
Leosghost?

---
7. Prevent saving current web page
Leosghost?

---
8. Anything else?
It should not cause hassle to the average user - no right-click disable, keyboard disable or required obscure plugins.
It should also not be a hassle for the administrator after initially setting up the site - e.g. no splitting the image into very many pieces.

I guess you could also encrypt the HTML and/or JavaScript source, but that's an ongoing hassle for each newly created page, not a one-time solution. See this [geocities.com] if interested.
---

No comments:

Post a Comment