html - 这是网页还是图片？

Question

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

根据作者的说法，

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.

换句话说，如果您将该 URL 弹出到浏览器中，它会呈现为网页，但您也可以使用相同的 URL 作为图像源。

这里有什么样的巫术？

_{(编辑:source code 来自上面的链接，如果该站点曾经离线。)}

Answer 1

您链接的文件是一个多语言文件 - 多种语言的组合。可以将其理解为图像和 HTML 文件。这是一个简单的技巧。如果您查看 HTML 源代码，您可以在顶部看到:

ÿØÿà

快速谷歌显示这看起来像一个 JPEG 标题。创建者所做的是将 HTML 存储在 JPEG 元数据中，并将 JPEG 图像数据存储在 html 注释中。非常漂亮但并不神奇。

为了隐藏 JPEG 标题，他使用 CSS 规则来隐藏正文并仅显示一些元素:

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

另请注意，它不是有效的 HTML，例如因为隐藏图像数据的注释未关闭，但浏览器仍然乐于接受并呈现它。