什么是数据网址

数据URL是一种URI方案,提供了一种在文档中内联数据的方法,通常用于将图像嵌入HTML和CSS中

介绍

数据URL是一种URI方案,它提供了一种内联HTML文档中的数据的方法。

假设您要嵌入一个小图像。您可以按照通常的方式将其上传到文件夹并使用img标记,以使浏览器从网络引用它:

<img src="image.png" />

或者您可以使用一种称为数据URL的特殊格式对其进行编码,从而可以将图像直接嵌入到HTML文档中,因此浏览器不必另外请求即可获取它。

数据URL可能会为小文件节省一些时间,但对于较大的文件,HTML文件的大小会有所增加,而且如果图像在所有页面上重新加载,则它们尤其会成为问题,因为您无法利用浏览器缓存能力。

同样,编码为数据URL的图像通常比二进制格式的相同图像大一点。

如果您经常编辑图像,它们并不实用,因为每次更改图像时,都必须重新编码。

也就是说,它们在Web平台上占有一席之地。

数据网址的外观

数据URL是以以下开头的字符串data:紧随其后的是MIME类型格式。例如,PNG图像具有mime类型image/png

这之后是逗号,然后是实际数据。

文本通常以纯文本格式传输,而二进制数据通常以base64编码。

以下是此类数据URL外观的示例:

<img src="data:image/png,%89PNG%0D%0A..." />

这是在链接中编码的这篇文章的横幅图片的小版本

这是base64编码的数据URL的外观。注意它以data:image/png;base64

<img src="data:image/png;base64,iVBORw0KGgoAA..." />

这是本文base64的横幅图像的小版本,编码为链接

这个站点有一个非常不错的数据URL生成器:https://dopiaza.org/tools/datauri/index.php您可以使用它来将桌面上的任何图像转换为数据URL。

数据URL可以在可以使用URL的任何地方使用,如您所见,您可以将其用于链接,但是在CSS中使用它们也很常见:

.main {
    background-image url('data:image/png;base64,iVBORw0KGgoAA...');
}

浏览器支持

他们是所有现代浏览器均支持

安全

数据URL不仅可以对图像进行编码,还可以对任何类型的信息进行编码,因此它们带有一系列安全隐患。

href="百科百科

数据URI可用于构建攻击页面,这些攻击页面试图从毫无戒心的Web用户那里获取用户名和密码。它也可以用来解决跨站点脚本(XSS)限制,将攻击有效载荷完全嵌入地址栏中,并通过URL缩短服务托管,而不需要由第三方控制的完整网站。

查看Mozilla Firefox博客中的这篇文章有关恶意用户如何使用数据URL进行不良操作以及Firefox浏览器如何减轻此类风险的更多信息。

数据网址在RFC 2397

免费下载我的JavaScript初学者手册


更多浏览器教程: