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.)}

I know this is old, but could this technique be used as a XSS attack? — Nanoo, Jun 11 '20 at 19:02

orlp · Accepted Answer · 2012-07-20T21:49:32.840

49

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.

edited Jul 20 '12 at 21:49

answered Jul 20 '12 at 21:30

orlp

112,504
36
218
315

I wonder if it would be possible to create a valid JPEG file that ends with `-->` – ThiefMaster Jul 20 '12 at 21:37
2

@ThiefMaster: Not paying 122 CHF to find it out, sorry. http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=25431 – orlp Jul 20 '12 at 21:40
This may be unrelated to this, but it made me think of it and it seems at least somewhat fitting: Would it be possible to make this html file (gupi1410 pointed out the file is called index.html) have a php redirect in it? So, when used in `img src='imgLink'` it displays an image and when user goes to `imgLink` they're redirected to a "haha, can't direct link my images" page? – DACrosby Jul 20 '12 at 21:40
@DouglasA.Crosby: Yes, that would be possible (though it would not be a PHP redirect, but a HTML + Javascript one), but probably not useful. Generally you __want__ linking and __don't want__ embedding. – orlp Jul 20 '12 at 21:42
Generally not, I agree. Im was thinking for a photography portfolio type website (Flikr, perhaps) where they want links to flikr.com/user/photo instead of photos.flikr.com/12345/etc/dir/file.jpg (for example). – DACrosby Jul 20 '12 at 21:44
@DouglasA.Crosby: such annoying practices are usually done server side. – orlp Jul 20 '12 at 21:46

score 4 · Answer 2 · edited May 23 '17 at 12:25

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.

Is this a web page or an image?

2 Answers2

Linked