使用 <a href="data; ..."> 显示图像是不是安全?

Posted

技术标签:

【中文标题】使用 <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)..."
    ></a>

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

谢谢。

【问题讨论】:

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

【讨论】:

以上是关于使用 <a href="data; ..."> 显示图像是不是安全?的主要内容,如果未能解决你的问题,请参考以下文章

HTML5开发移动web应用—JQuery Mobile-导航栏和页脚

Java 17 新特性:switch的模式匹配(Preview)

element 表格高度自适应

python:xml模块用法-xml处理修改删除

Python爬虫:urllib库的基本使用

使用Data Ability读取系统设置项