Is this a web page or an image?

Question

http://lcamtuf.coredump.cx/squirrel/

According to the author,

This is an embedded landing page for an image. You can link to this URL and get the HTML document you are viewing right now (soon to include essential squirrel facts); or embed the exact same URL as an image on your own squirrel-themed page: <a href="http://lcamtuf.coredump.cx/squirrel/">Click here!</a> <img src="http://lcamtuf.coredump.cx/squirrel/"> No server-side hacks involved - the magic happens in your browser.

In other words, if you pop that URL into your browser it renders as a web page, but you can also use the same URL as an image source.

What kind of witchcraft is at work here?

_{(Edit: source code from the above link if that site ever goes offline.)}

Answer 1

The file you linked is a polyglot - a combination of languages. It can be read and understood as both an image and an HTML file. It's a simple trick. If you look at the HTML source you can see this at the top:

ÿØÿà 

A quick Google shows this looks like a JPEG header. What the creator does is store the HTML in JPEG metadata, and the JPEG image data in a html comment. Pretty nifty but not magic.

To hide the JPEG header he uses CSS rules to hide the body and show only some elements:

body { visibility: hidden; } .n { visibility: visible; position: absolute; ...... } 

Also note that it isn't valid HTML, for example because the comment to hide the image data is not closed, but that browsers still happily accept and render it.

Answer 2

Its a html page with html content along with image data.

Check out the header, it contains jpg header. In the source the first line contains ÿØÿà which is a jpeg header. The url http://lcamtuf.coredump.cx/squirrel/index.html (appended index.html), clearly shows its an html file. So apparently this may be called both as a web page or an image!

You can easily rename a jpg file (or any image file) as .html & when you open in your browser, it would just show an image, just like any other image.

A recent similar trick I remember is that renaming gif to jpg as in here, but still the data is gif & the headers contain gif.