Deprecated: Function eregi() is deprecated in /home/suffolkc/public_html/plugins/system/sefservicemap.php on line 51
Simpleviewer Image Gallery "White Crosses" - Hotlink Protection - Suffolk Computer Services

Simpleviewer Image Gallery "White Crosses" - Hotlink Protection

PrintE-mail

Last Updated on Thursday, 08 January 2009 21:09 Written by Ruth Cheesley Wednesday, 19 November 2008 00:00

ProblemProblem: Simpleviewer gallery on a Joomla! site displaying white crosses instead of gallery images
I had a message from a Joomla! website owner this week who was having trouble with his Simpleviewer Image Gallery which was set up within a Joomla! environment.  Aside a couple of problems with the Joomla! setup itself and lots of extra code in the content articles which didn't need to be there, the main problem was that the gallery images were displaying as ugly white crosses for some people, and not for others.
On first investigation, it seemed that Internet Explorer displayed the images fine, but Firefox displayed the crosses.  After a considerable amount of searching and reading articles, it seemed that the problem lay with "hotlink protection".  So, what is "Hotlink Protection"?

Hotlinking is where somebody on another website uses images stored on your website, rather than their own, on their website.  This might not be a problem on regular sites, but imagine if a site which has thousands of hits each day suddenly making thousands of requests to your little server for that image!  This doesn't only apply to images - you might have other files such as videos, ebooks, zip files or so forth which people could "hotlink" to.

If your hosting account has CPanel you can easily turn on (or off) hotlink protection, and you can allow particular domains access to the files.  You can also specify the particular filetypes you wish to be accessible.

In the case of the Simpleviewer gallery, simply allowing the full domain and allowing the image types did not fix the problem for everyone across the world using different browsers, therefore it would have been necessary to turn off hotlink protection (which is not advisable).

Given the number of hits since I wrote this article, I feel it appropriate to discuss some work-arounds to get your galleries working! It seems to be a particular problem in Firefox and less so with Internet Explorer - hence often the symptom of this is "My gallery works in IE but not in Firefox, where I get white crosses".  You may also notice that if you right click the large image cross in Firefox and select show in a new window, it works (and you can now view the large image, as it's saved in your cache) as this is not "hotlinking" but is directly accessing the file, hence it works with Hotlink Protection enabled.

So, this isn't an ideal way of viewing your galleries!  The following are options you can consider:

  1. Turn off Hotlink Protection (Not recommended)
  2. Enable Hotlink Protection but tick the box which says "Allow direct requests (ie. entering the url to an image in your browser)"
  3. Consider using .htaccess to protect your image folders - I am currently investigating this however the code goes something like this (I have put the differences in bold for the first four lines purely to identify why they are there - note that if you want them accessed from more than one location you need to put extra SetEnvIfNoCase lines for each URL.  Likewise if you want more than .gif, .png and .jpg you need to specify these).

SetEnvIfNoCase Referer "^http://www.your-domain-name-here.com/" locally_linked=1
SetEnvIfNoCase Referer "^http://www.your-domain-name-here.com$" locally_linked=1
SetEnvIfNoCase Referer "^http://your-domain-name-here.com/" locally_linked=1
SetEnvIfNoCase Referer "^http://your-domain-name-here.com$" locally_linked=1
SetEnvIfNoCase Referer "^$" locally_linked=1
<FilesMatch "\.(gif|png|jpe?g)$">
  Order Allow,Deny
  Allow from env=locally_linked
</FilesMatch>
How does this work?

Whenever a browser sends your web server a request for an image, it usually also sends the URL of the page that linked to that image.

The above .htaccess file causes the server to check this URL ("Referer" in the above snippet - DO NOT CHANGE THE SPELLING) and if it is one of the authorized URLs that you specify, it will set an internal flag called "locally_linked". This internal flag is technically called an "environmental variable".

If the URL sent is not in this list of authorised URLs, the flag (or environment variable) is not set. Note that we also set the "locally_linked" variable if the browser does not send any URL at all: this occurs when the visitor accesses your site using a browser or a proxy that suppresses the referring URL.

The web server then checks if the file requested has an extension in the list given above (gif, png, jpg and jpeg). If so, and the "locally_linked" variable is set, it will send the image. Otherwise it an error will be sent.

(Sourced from http://www.thesitewizard.com/archive/bandwidththeft.shtml)

Share this page

Facebook MySpace Twitter Digg Delicious Stumbleupon Google Bookmarks RSS Feed 

Recent Work











Log In