Hotlinking for Frames & Popup Window Problem Fix

More Scripts

The code in this package demonstrates two workarounds for a problem when using Apache Server Software's .htaccess file to control file leeching - commonly called "hotlinking." The problem occurs in two situations: (1) in pop-up windows generated by JavaScript's window.open command with the URL value set to null, and (2) when using <FRAME>s. Both of these situations can cause Apache-based servers to deny otherwise valid requests for files. The issue is discussed in detail in the text box below, which is also included in the package you can download using the button underneath.

Working Around the .htaccess Referer Problem in <FRAME>s and Pop-up Windows

The original code is taken largely from a sample page at
http://www.aerospaceweb.org/jeff/temp/test_popup.shtml which
demonstrates a problem that people can run into when they use the Apache
server control file .htaccess to prevent other websites from leeching
image files, a practice known as "hotlinking," and thereby stealing both
the artwork and the bandwidth from the host site.

When Firefox browsers process the JavaScript function "window.open"
and the URL parameter is set to an empty string (ie. ""), all subsequent
http requests generated by the contents of the new window - most commonly
in <img> tags - will not include a value for http_referer.  This differs
from Microsoft Internet Explorer which apparently substitutes the URL
of the parent page/window for the http_referer.  The problem is, of
course, that the restrictions from the .htaccess file will prevent image
files from being served to pop-up windows generated in this fashion by
Firefox/Mozilla.  If you use Firefox/Mozilla, an example of this is available
at http://www.rainbodesign.com/pub/referer/fizzle.html where when you click on
the link, a JavaScript-generated window pops up and attempts to display
the image file pumpkin.gif, but the .htaccess directive prevents it and
displays the permissions image in its place.  If you use Microsoft Internet
Explorer, the problem does not occur and you'll see the little man just fine.

The easiest solution is, of course, to pass a valid URL to the
window.open statement in the first place and then use JavaScript to
insert whatever HTML into the new window's content that is needed to
produce the desired effect.  The example code I'm presenting here has
only been tested with Firefox and Microsoft Internet Explorer
v6.0.  I made a small attempt to add some backward compatibility for
older incarnations of Internet Explorer and Netscape v4.x in the
function writeMe in the referer.html page's <head> section, but I've
only given it some limited testing.  Still, as far as I can see, all
browsers created since January 2000 will run with this code as long
as they have JavaScript enabled.

To see an example of the workaround solution, open the page at
http://www.rainbodesign.com/pub/referer/referer.html in Firefox.  This
page resides in a directory protected against image file leeching by an
.htaccess file.  You can test this by attempting to view the sample image
file of the pumpkin by entering
http://www.rainbodesign.com/pub/referer/pumpkin.gif into your browser.  You
will see the "permissions denied" image instead. When you click on the
"Show Photo" link, the JavaScript function "show_photo()" spawns a new
window with a relative URL of "popup.html".  Internally, the browser adds
the base URL, which we'll be depending on in this example.  I used
relative addressing to make the code more portable, but you could use an
absolute URL for your website just as well.  The upshot is, however, that
you must have prepared the file "popup.html" in advance and have it
filled with all of the static supporting HTML that you want to display,
as well as the <div id="imageDiv"> where we'll be inserting the
dynamically generated content. The crucial element in the popup.html
file is to include the "onLoad" and "onUnload" paramaters in the <body>
tag which will handle two critical tasks.

The "onLoad" function will call the function writeMe from the parent
window, which will fill in the dynamically generated content that we
were after in the first place.  I used the onLoad function because when I
originally tried to update the window content within the function that
opened it, the dynamic content was getting overwritten by the original
content of the popup.html file.  If there is a simpler workaround, I
couldn't find it, so I resorted to the brute force approach of "onLoad".
The onUnload function in popup.html will tell the parent window when
you've closed the child.  This prevents spawning multiple windows using
the same windowObj variable which can lead to confusion if you try to
use this code elsewhere.  So now, if you click the "Show Photo" link in
the parent page while the child window still exists, the child window is
merely brought into focus and no new window is created.

A second solution is required with <FRAME>s based pages where the problem
affects both Firefox/Mozilla and Microsoft Internet Explorer, but the
approach is essentially identical and could certainly be used in pop-up
windows just as easily.  The key is to provide the browser with a source
page whose URL is clearly defined by replacing your regular <IMG> tags
with <IFRAME>s with a source is an HTML shell document whose sole
purpose is to display a desired graphic.  On a brute-force level, you
could create a shell HTML document for every image file you want to use,
but that would soon get tiresome and bloat your directories needlessly.
A simpler and more elegant solution is to use some JavaScript to
dynamically generate the <IMG> tag in a single shell HTML document.  This is
done by adding a query string (ie. the information you often see passed
to .cgi scripts preceded by a "?" in the URL) to the URL in the SRC for
the <IFRAME>. 

The page at http://www.rainbodesign.com/pub/referer/frameset.html demonstrates
this technique, in particular the page "main.html" which contains the
<IFRAME> that displays the pumpkin.gif image.  If you check the SRC
parameter of the <IFRAME> in main.html, you'll see that it includes a
query string as discussed above.  This query string includes all of the
information that the HTML shell page show_image.html needs to display
the image.  As long as the shell HTML document is stored on a valid
referer host and the browser supports <IFRAME>s, the Apache Server
software will deliver the image file and the page will appear for
the user as expected.  This solution works for all known browsers released
since January 2000, which covers just about everything out there except
for the notorious Netscape v4.x.

Referer.zip© is provided at no charge. If you use and enjoy this information, please place the following link on your site:

<a href="http://www.rainbodesign.com/pub/">Rainbo Design's Scripts and Tools for Webmasters</a>