这是网页还是图片？ [英] Is this a web page or an image?

问题描述

http://lcamt​​uf.coredump.cx/squirrel/

根据作者的说法，

这是图像的嵌入式着陆页。您可以链接到
URL，并获取您正在查看的HTML文档（很快
包括必需的松鼠事实）;或者在您自己的松鼠主题页面上嵌入与
图像完全相同的网址：< a
href =http://lcamt​​uf.coredump.cx/squirrel/ >点击此处< / a> < img
src =http://lcamt​​uf.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作为图像源。

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.

这里有什么样的巫术？

_{（编辑：源代码从上述链接，如果该网站脱机。）}

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

推荐答案

您链接的文件是多种语言 - 语言的组合。它可以被读取并被理解为两者图像和HTML文件。这是一个简单的伎俩。如果您查看HTML源代码，您可以在顶部看到这一点：

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:

ÿØÿà

一个快速的Google显示，这看起来像一个JPEG标题。创建者所做的是将HTML保存在JPEG元数据中，并将JPEG图像数据存储在html注释中。相当漂亮，但不是魔法。

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.

为了隐藏JPEG标题，他使用CSS规则隐藏身体，仅显示一些元素：

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

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

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.

这篇关于这是网页还是图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！