DEV Community

Cover image for This Image is Also an HTML Webpage
Ben Halpern
Ben Halpern Subscriber

Posted on

6

This Image is Also an HTML Webpage

Here is an image:

Also an HTML page

But it is also an HTML page. Here is the markup for the above image:

<img src="http://lcamtuf.coredump.cx/squirrel/" />
Enter fullscreen mode Exit fullscreen mode

Now try visiting that webpage:

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

Pretty cool, eh?

I did not make this. I am just showing you because it is cool.

Here is an explanation of what is happening:

  1. The file is a valid jpeg file with some html in metadata.
  2. The server responds with Content-Type: text/html, making browser interpret the response body as html.
  3. Browser ignores jpeg header until it sees and starts to render the html.
  4. The html in the jpeg metadata ends with "<!--" , which starts html comment.
  5. The html has that renders the file as image.

I found this hack fascinating, and I hope you did too.

AWS Q Developer image

Your AI Code Assistant

Generate and update README files, create data-flow diagrams, and keep your project fully documented. Built to handle large projects, Amazon Q Developer works alongside you from idea to production code.

Get started free in your IDE

Top comments (0)

Image of Quadratic

AI, code, and data connections in a familiar spreadsheet UI

Simplify data analysis by connecting directly to your database or API, writing code, and using the latest LLMs.

Try Quadratic free

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay