JavaScript Image Source URL (Definition)

Image data can be generated in some browsers.

Within some limitations, you can generate image data within a web browser's JavaScript environment. This seems to work best on the Netscape version 4.0 browser, but it is worth exploring somewhat to see if it can be exploited on other browsers.

If you store this text into a script variable it describes a 1 pixel image:

#define x_width 1

#define x_height 1

static char x_bits[] = {0x00};

This is the code for an XBM image. It is only black and white but it may be useful to be able to create an image with a script.

Now you can call this as the source of an image like this:

<IMG SRC="javascript:variablename">

The example works as it is in Netscape 4.0. Adding a MIME type header will help browsers to determine what the content type is and this technique doesn't need to be confined to just image data.

Example code:

   <HTML>
   <BODY>
   <SCRIPT>
   var the_image_data;
   the_image_data  = "Content-type: image/x-xbm";
   the_image_data  = "";
   the_image_data  = "#define x_width 10\n";
   the_image_data += "#define x_height 1\n";
   the_image_data += "static char x_bits[] = {";
   the_image_data += "0xFF,0xFF,0xFF,0xFF,0xFF,";
   the_image_data += "0xFF,0xFF,0xFF,0xFF,0xFF";
   the_image_data += "};";
   </SCRIPT>
   <IMG SRC="javascript:the_image_data">
   </BODY>
   </HTML>

See also:JavaScript Document Source URL, javascript: URL, MIME types

Cross-references:

Wrox Instant JavaScript - page - 49