Hotlinking for Frames & Popup Window Problem Fix
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 FRAMEs. Both of these situations can
cause Apache-based servers to deny otherwise valid requests for files. The issue is discussed in detail
below, which is also included in the package you can download using the button at the bottom of this page.
Working Around the .htaccess Referer Problem
in FRAMEs & 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 https://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 https://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 https://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 FRAMEs 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 IFRAMEs 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 https://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 IFRAMEs, the Apache Server software will deliver the image file and the page will appear for the user as expected.
Referer.zip© is provided free of charge. If you use and appreciate it, please
post the following link in an appropriate location on your site:
a href="https://www.rainbodesign.com/pub/" Rainbo Design Tools & Scripts/a
This page was last modified on August 27, 2020
