是否可以将二进制图像数据放入 html 标记中，然后在任何浏览器中照常显示图像？

Is it possible to put binary image data into html markup and then get the image displayed as usual in any browser?

提问by Joern Akkermann

It's an important security issue and I'm sure this should be possible.

这是一个重要的安全问题，我相信这应该是可能的。

A simple example:

一个简单的例子：

You run a community portal. Users are registered and upload their pictures. Your application gives security rules whenever a picture is allowed to be displayed. For example users must be friends on each sides by the system, in order that you can view someone else's uploaded pictures.

您运行社区门户。用户注册并上传他们的照片。每当允许显示图片时，您的应用程序都会提供安全规则。比如用户必须是系统两边的好友，才能查看别人上传的图片。

Here comes the problem: it is possible that someone crawls the image directories of your server. But you want to protect your users from such attacks.

问题来了：有人可能会抓取您服务器的图像目录。但是您希望保护您的用户免受此类攻击。

If it's possible to put the binary data of an image directly into the HTML markup, you can restrict the user access of your image dirs to the user and group your web application runs of and pass the image data to your Apache user and group directly in the HTML.

如果可以将图像的二进制数据直接放入 HTML 标记中，您可以将图像目录的用户访问权限限制为用户并将您的 Web 应用程序运行分组并将图像数据直接传递给您的 Apache 用户和组HTML。

The only possible weakness then is the password of the user that your web app runs as.

唯一可能的弱点是您的网络应用程序运行的用户密码。

Is there already a possibility?

已经有可能了吗？

回答by bmb

There are other (better) ways, described in other answers, to secure your files, but yes it is possible to embed the image in your html.

在其他答案中描述了其他（更好）的方法来保护您的文件，但是可以将图像嵌入到您的 html 中。

Use the <img>tag this way:

以<img>这种方式使用标签：

<img src="data:image/gif;base64,xxxxxxxxxxxxx...">

Where the xxxxx...part is a base64 encoding of gif image data.

其中xxxxx...部分是 gif 图像数据的 base64 编码。

回答by NotMe

If I needed security on my images directory I wouldn't expose the directory at all. Instead my img src attributes would reference a page that would take a userid and an image id as a parameter.

如果我需要图像目录的安全性，我根本不会公开该目录。相反，我的 img src 属性将引用一个将用户 ID 和图像 ID 作为参数的页面。

The page would validate that that user did indeed have access to see that picture. If everythings good, send the binary back. Otherwise send nothing.

该页面将验证该用户确实有权查看该图片。如果一切正常，请将二进制文件发回。否则什么都不发送。

for example:

例如：

<img src="imgaccess.php?userid=1111&imgid=223423" />

Also, I wouldn't use guessable id's. Instead sticking to something like base 64 encoded guid's.

另外，我不会使用可猜测的 ID。而是坚持使用 base 64 编码的 guid 之类的东西。

回答by Eric

I'm not sure I understand, but here goes. Instead of serving up static images that reside in an images folder - why couldn't you, using your server side technology of choice, have the images dynamically sent down to the client? That way your server side code can get in the mix and allow or deny access programmatically?

我不确定我是否理解，但在这里。而不是提供驻留在图像文件夹中的静态图像 - 为什么您不能使用您选择的服务器端技术将图像动态发送到客户端？这样您的服务器端代码可以混合并以编程方式允许或拒绝访问吗？

<img src="/images/getImage.aspx?id=123353 />

回答by the-banana-king

You could move the pictures out of the document root into a private directory and deliver them through your application, which has access to that directory. Each time your app generates an image tag, it then also generates a short-lived security token which must be specified when accessing a particular image:

您可以将图片从文档根目录移到私有目录中，然后通过您的应用程序传送它们，该应用程序可以访问该目录。每次您的应用生成图像标记时，它还会生成一个短期安全令牌，必须在访问特定图像时指定该令牌：

<img src="/app/getImage.xyz?image=12345&token=12a342e32b321" />

Chances are very rare that someone will brute force the right token at the right time with the right image. There are at least to possibilities to verify the token in "getImage":

很少有人会在正确的时间使用正确的图像强行使用正确的令牌。至少有可能在“getImage”中验证令牌：

1. Track all image tags in your app and store records in a database which link the randomly generated tokens and image IDs to the requesting users. The "getImage" action then checks the supplied parameters against that database.
2. Generate the token as a checksum (MD5, CRC, whatever) over the user ID, the image ID and maybe the current day of the year, and be sure to mix in an unguessable salt. The "getImage" action will then recompute the checksum und check it against the specified one in order to verify the user's access. This method will produce less overhead than the first one.

1. 跟踪应用程序中的所有图像标签并将记录存储在数据库中，这些记录将随机生成的令牌和图像 ID 链接到请求用户。“getImage”操作然后根据该数据库检查提供的参数。
2. 生成作为校验和（MD5、CRC 等）的令牌，用于用户 ID、图像 ID 和一年中的当前日期，并确保混合不可猜测的盐。然后，“getImage”操作将重新计算校验和并根据指定的校验和进行检查，以验证用户的访问权限。这种方法产生的开销比第一种方法少。

PHP example:

PHP示例：

$token = md5($_SESSION['user_id'].' '.$imageID.' '.$SECRET_SALT.' '.date('z'));

回答by Sean A.O. Harney

With HTML5 you could use the canvas tag and JavaScript to do this.

使用 HTML5，您可以使用 canvas 标记和 JavaScript 来执行此操作。

You could perhaps do something with either CSS or a table layout to draw a picture (probably really bad performance, resolution, portability).

您也许可以使用 CSS 或表格布局来绘制图片（可能非常糟糕的性能、分辨率、可移植性）。

Either way, there is no stopping people from taking your pics. They could take a screenshot and crop it out.

无论哪种方式，都无法阻止人们拍摄您的照片。他们可以截取屏幕截图并将其裁剪掉。

As Chris mentioned in his answer, having long picture id's so that the URL for each image is not easy to guess or brute force is important. And no directory listing on your webserver directories is also.

正如 Chris 在他的回答中提到的，拥有长图片 id 以便每张图片的 URL 不容易猜测或蛮力很重要。并且您的网络服务器目录上也没有目录列表。