Here is a pretty cool web/image hack that I haven't seen before. Below is a JPEG image of a squirrel.
On the surface it appears to be a standard image but there is much more going on here. This image is also an HTML page. Here is the markup for the above image:
<img src="http://lcamtuf.coredump.cx/squirrel/" />
Basically the entire HTML for this page is served as metadata from a JPEG image. Here is a more in-depth explanation of what is happening here as I understand it.
- The file is a valid JPEG file with some HTML in the file's metadata.
- The server responds with
Content-Type: text/html, making browser interpret the response body as html. - The browser will see the JPEG header and start the
<body>tag. - The metadata includes 2 CSS rules. The first sets
body {visibility: hidden;}which will hide the jpeg header. The second is.n {visibility: visible;}which allows the actual HTML to be rendered and visble. - The HTML has
<img src="SAME_URL_AS_PAGE">that renders the file as an image.
Although this technique, rather hack, is not valid HTML5, nor is it extremely useful in real world, it is still really cool!