Aug 20, 2008

Protecting your privacy by using base64 encoded inline images + table images for IE

While creating LastPass we wanted to show an overlay on the page when you autologin to a site. We ran into an issue though: if we used a image on that overlay, the image would leak the referring URL -- a privacy leak that we wanted to avoid.

In Firefox, there is a relatively straight forward and elegant solution: use an inline base64 encoded image. This method is covered here: http://www.websiteoptimization.com/speed/tweak/inline-images/

This was great, but Internet Explorer doesn't support inline images unfortunately; we found inspiration for the solution here: http://ddzoom.net/jsimages/ and adapted it to create pure HTML not javascript. Using a table to create an image will probably make you squirm, but it works.

The overlay we are creating is in HTML, and IE can render tables quickly, so we gave it a shot and it worked great, much faster than the javascript version (because it skips all the reading and it ultimately creates a table itself).

Granted this is a very small image (our logo), and we probably wouldn't do it if we needed a very large image, but it accomplishes the goal while protecting your privacy which makes us happy.