Fighting against Internet Explorer

March 02, 2005

I'm trying to embed some image files into an HTML document (in fact, in a XML document but I use HTML for my tests).

So far, this is what I've done:

Using the data: scheme.

According to RFC2397, you can use the following to display an embedded image:

<img src="data:image/xbm,#define cursor_width 16\n#define cursor_height 16\nstatic unsigned char cursor_bits[] = { 0x03, 0x00, 0x0d, 0x00, 0x32, 0x00, 0xc6, 0x00, 0x0c, 0x03, 0x14, 0x0c, 0x28, 0x30, 0x58, 0xc0, 0xb0, 0x80, 0x50, 0x41, 0xa0, 0x22, 0x60, 0x45, 0xc0, 0x8a, 0x40, 0x55, 0x80, 0x2a, 0x80, 0x11};" />

or

<img src="data:image/gif;base64,R0lGODlhEAALALMAAICAgP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP///yH5BAEAAA8ALAAAAAAQAAsAQAQR8MlJq7046827/+ADiOQYehEAOw==" />

(base64 encoded GIF file)

...unfortunately, it doesn't work in Internet Explorer :-(

Using Javascript

The following page contains an embedded JPEG file and uses the javascript: URL scheme:

<html>
<head>
<!-- Hide file storage elements -->
<style type="text/css">
.base64 {
 display:none;
 visibility:hidden;
}
</style>
<script type="text/javascript">
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
function decodeImg(name) {
var inp = document.getElementById(name).innerHTML.replace(/[^A-Za-z0-9+/\=]/g, "");
var out = "";
var chr1, chr2, chr3 = "";
var enc1, enc2, enc3, enc4 = "";
var i = 0;
do {
    enc1 = keyStr.indexOf(inp.charAt(i++));
    enc2 = keyStr.indexOf(inp.charAt(i++));
    enc3 = keyStr.indexOf(inp.charAt(i++));
    enc4 = keyStr.indexOf(inp.charAt(i++));
    chr1 = (enc1 << 2) | (enc2 >> 4);
    chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
    chr3 = ((enc3 & 3) << 6) | enc4;
    out = out + String.fromCharCode(chr1);
    if (enc3 != 64) {
        out = out + String.fromCharCode(chr2);
    }
    if (enc4 != 64) {
        out = out + String.fromCharCode(chr3);
    }
    chr1 = chr2 = chr3 = "";
    enc1 = enc2 = enc3 = enc4 = "";
} while (i < inp.length);
return out;
}
</script>
</head>
<body>

<!-- The image file, base64-encoded -->
<div class="base64" id="test1.jpg">
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
</div>
<img src="javascript:decodeImg('test1.jpg')" />
</body>
</html>

...however, this doesn't work in Internet Explorer (seems it's something wrong with its handling of NUL characters) :-(

Web archives

Next step is to try to fool Internet Explorer by using <meta> tags to pass attachments directly… Wish me luck! :-/

DOM/ActiveX or Java

As a last resort solution, I'm investigating Windows ActiveX components that can be fed with raw data. An alternative would be to package everything within an executable JAR file with the HTML viewer…

Leave a Comment

Powered by Blogger.