Image Tag Launches CGI Program

Should you need to run a CGI script when a web page loads, an IMG image tag can be utilized. The SRC of the image tag is the URL of the script.

The CGI script runs, doing what it's supposed to do for you.

But before the script quits, it sends the content of an image file to the browser. This satisfies the browser's request.

The image can be a transparent ____.gif or ____.png, a logo, or any other image that web pages can display with an IMG tag.

This article has examples of everything you need to run a CGI program when a page loads by putting the URL of the program into an IMG tag.

Note: The introduction article, "Running a CGI Program On Page Load," contains numerous examples for automatically running a script when a page loads and has links to several different methods of implementing those features for your web site.

Using an IMG Image Tag to Automatically Run a CGI Program When a Web Page Loads

When a web page loads and the browser finds an IMG tag in the source code, the browser makes a request for the image. It makes the request at the SRC URL it finds in the IMG tag.

If the URL is the URL of a CGI script, the script runs.

The CGI script must, however, return an image to the browser. Otherwise, the browser is likely to display a broken image icon on the page.

An example IMG tag and an example CGI script are provided below.

The IMG Tag

Here is an example IMG tag with the URL of a CGI program:

<img src="/cgi-bin/script.cgi" height="11" width="33" alt="test">

The URL of the CGI script may have a question mark at the end followed by information to send to the CGI program for processing. The information following the question mark can be hard coded into the URL or it can be information gathered by JavaScript and inserted into the URL.

We'll use the current web page URL as an example of how JavaScript might accomplish the act of putting information into the URL.

In order to pull it off, the JavaScript must write the entire IMG tag. This allows it to insert anything it wants to insert into the URL.

Here is the example:

<script type="text/javascript" language="JavaScript"><!--
var url = "/cgi-bin/script.cgi?ThisPageURL=" + escape(document.URL);
document.write('<img src="' + url + '" height="11" width="33" alt="test">');
//--></script>

Sending the current web page URL to CGI programs that need the information is more reliable than having the CGI program itself consult the environment variables. Many users now have such strict anti-logging and privacy browser preferences, or strict personal firewall software, that the browser is prevented from providing referrer information.

The CGI Program

Here is a CGI program that returns an image to the browser, suitable as the SRC URL in the above example IMG tags:

#!/usr/bin/perl
use strict;
# script can do other stuff here
#----------#
# Put the image file to be sent to the browser 
#   in the same directory where this script is 
#   installed. Put the image file's name between 
#   the quotes on the next line.
my $image = "image.gif";
open R,"<$image"; 
binmode R;
print "Content-type: image/*\n\n";
binmode STDOUT;
while(<R>) { print $_; }
close R;
# end of script

The part of the script that returns the image to the browser is below the #----------# line.

Verify the image file name.

The script assumes the image is in the same directory the script is installed in. If the image is at some other location on the server, provide the relative or absolute directory path to the script as part of the file name.

The CGI program used in this implementation may not return an HTML web page. It must return only the contents of an image file to the browser. If it returned a web page, and the browser was expecting an image, then the browser will likely display the broken image icon.

Will Bontrager