使用 <a href="data; ..."> 显示图像是否安全？答案

【问题标题】：Is it safe to use <a href="data; ..."> to display images?使用 <a href="data; ..."> 显示图像是否安全？
【发布时间】：2011-08-18 20:41:07
【问题描述】：

我了解到可以像这样在 HTML 页面中嵌入图像，而不是链接到单独的图像文件：

<a href="data:image/png;base64,...(blah blah base64-encoded png goes here)..."
  width="70" height="38" alt="image embedded using base64 encoding!"></a>

这是否“安全”，因为所有现代浏览器都能够查看图像，只要我坚持使用 PNG/JPG 等常见格式吗？除了对图像进行base64编码会增加图像大小之外，还有什么缺点吗？

谢谢。

【问题讨论】：

为什么要使用它而不是引用服务器上的图像？
我们正在生成一个包含图像的 HTML 文件 - 最好将图像嵌入文件中，因此用户只需移动一个文件，而不是移动文件并关联当他们想要传输或上传图像时。
@MichaelD 你听说过私人图片吗？如果您想对图像请求进行身份验证，当前的 Web 规范无法做到这一点。和标签不提供设置身份验证标头的方法，cookie 已成为过去。因此，您别无选择，只能进行这种荒谬的数据 URI 黑客攻击。

标签： html image base64

【解决方案1】：

是的，这是安全的 - 所有主流浏览器都支持data URI scheme。

一个缺点是，如果您在页面中多次使用同一张图片，它将被编码多次而不是下载一次。

另一个是某些浏览器施加的大小限制（IE 8 只允许最大 32k）。

您也可以在 CSS 中使用它来缓解下载问题。

【讨论】：

呃，这个尺寸限制让我感到厌烦。 :( 感谢您的链接，非常有用。
@Oded : 它适用于电子邮件/网络邮件客户端吗？
@user2284570 - 我怀疑大多数电子邮件客户端会支持这一点。一些网络邮件客户端可能会去除此类 URI。您需要进行测试。
@Oded：谢谢。这是为了在不需要网站的情况下放置 html 页面。（又名“如果您在阅读此电子邮件时遇到问题，请单击此处”）
这不再适用于许多浏览器。就“安全性”而言，它从来都不是“安全的”

【解决方案2】：

所有现代浏览器都应该能够查看这些类型的图像。我还没有验证，但是这个功能已经存在了很长时间并且可能得到了广泛的支持。

但你也要求缺点。一个缺点是 HTML 标记通常是动态生成的，因此无法缓存。

如果您有静态 html 页面，那么您的 html 是可缓存的，在这种情况下，如果图像不太大，使用数据 url 甚至可能会更好地提高性能。
如果您将其包含在任何动态 html（php、cgi、jsp、shtml，除了 xml、html、xhtml、htm 之外的任何内容）中，那么缓存将为零，因此每次都必须加载图像而不是第一次。

更多可能不相关的缺点

另外，一般来说，base64 占用的空间恰好是直接使用文件的 1 和 3 倍。这就是为什么对于较大的图像，即使它是静态 html 页面，它也可能不太好。但是，如果您的网络服务器支持 gzip，则图像不会花费整整三分之一的时间。
而且即使是静态html，如果你使用一个数据url（可以称为内联你的图片），整个页面不会像往常一样显示在图片之前。但对于包含无关紧要的小图片的页面
最后，如果您有大图像，您可能希望这样做，因为浏览器将无法像往常那样使用多个下载连接。
还有我没有想到的@Oded 的缺点（和优点）

【讨论】：

【解决方案3】：

这是不安全的！在许多浏览器中不再使用 href 中的数据 URI。

【讨论】：