菜单

至于Data URI

2019年2月5日 - CSS/CSS3

细说 Data URI

2015/08/27 · HTML5 ·
URI

原稿出处:
李靖(@Barret李靖)   

Data URL 早在 1995 年就被提议,这些时候有众多个本子的 Data URL Schema
定义陆续出现在 VRML 之中,随后不久,其中的一个本子被提上了议案——将它做个一个嵌入式的资源放置在
HTML
语言之中。从 RFC 文档定稿的小时来看(1998年),它是一个很受欢迎的发明。

Data URIs 定义的情节可以当作小文件被插入到其余文档之中。URI
是 uniform resource identifier 的缩写,它定义了接受内容的协商以及附带的连锁内容,倘诺附带的相关内容是一个地方,那么此时的
URI 也是一个 URL (uniform resource locator),如:

ftp://10.1.1.10/path/to/filename.ext http://example.com/source/id

1
2
ftp://10.1.1.10/path/to/filename.ext
http://example.com/source/id

磋商后边的始末,可以告诉客户端一个准确下载资源的地址,而 URI
并不一定包括一个地址音讯,如(demo):

data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

1
data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

其情商为
data,并告知客户端将以此情节作为 image/gif 格式来分析,需求分析的内容使用的是
base64 编码。它直接包罗了内容但并不曾一个确定的资源地址。

manbetx2.0手机版 1

【新增】:http://www.webhek.com/post/data-url.html

☞ 格式

Data URI 的格式分外简易,如下所示:

// output: ä½ å¥½ -> 使用默许的编码显示,故乱码 data:text/html,你好
// output: 你好 -> 使用 UTF-8 显示 data:text/html;charset=UTF-8,你好
// output: 浣犲ソ -> 使用 gbk 突显(浏览器默许编码 UTF-8,故乱码)
data:text/html;charset=gbk,你好 // output: 你好 -> UTF-8
编码,内容先利用 base64 解码,然后体现data:text/html;charset=UTF-8;base64,5L2g5aW9

1
2
3
4
5
6
7
8
// output: ä½ å¥½ -> 使用默认的编码展示,故乱码
data:text/html,你好  
// output: 你好 -> 使用 UTF-8 展示
data:text/html;charset=UTF-8,你好
// output: 浣犲ソ -> 使用 gbk 展示(浏览器默认编码 UTF-8,故乱码)
data:text/html;charset=gbk,你好
// output: 你好 -> UTF-8 编码,内容先使用 base64 解码,然后展示
data:text/html;charset=UTF-8;base64,5L2g5aW9

许多时候大家采纳 data URI
来显现一些较长的情节,如一串二进制数据编码、图片等,拔取 base64
编码可以让内容变得愈加简便易行。而对图片来说,在 gzip 压缩之后,base64
图片实际上比原图 gzip
压缩要大,体积扩大大致为三分之一,所以选择的时候必要权衡。

引子:在研讨FileReader时,有个格局readAsDataURL;然后看到打印出来的事物类似于如下:【data:text/plain;base64,Y29tZSBvbiB0byBidXkgYSBwaWFubyE=】,那一个事物居然像个超链接一样可以跳转,在新窗口中突显出文档内容,即使是图片还会突显出图片。于是相比好奇那是什么稳定到图片的岗位的,原来那串字符并不曾永恒图片地点,而是将图片的始末平昔包涵了进去,所以浏览器就间接解析出来了。具体用法见如下小说

☞ 兼容性

出于出现时间较早,近期主流的浏览器基本都帮忙 data URI:

不过有些浏览器对 data URI 的行使存在限制:

manbetx2.0手机版,Opera 下限制为 4100 个字符,方今一度去掉了那么些限制 IE 8+ 下限制为 32,768
个字符(32kb),IE9 之后移除了那几个界定

1
2
Opera 下限制为 4100 个字符,目前已经去掉了这个限制
IE 8+ 下限制为 32,768 个字符(32kb),IE9 之后移除了这个限制

☞ 低版本IE的解决之道 – MHTML

MHTML 就是 MIME HTML,是 “Multipurpose Internet Mail Extensions
HyperText 马克up Language”
的简称,它就如一个带着附件的邮件一般,如下所示:

/** FilePath: http://example.com/test.css */ /*!@ignore
Content-Type: multipart/related; boundary=”_ANY_SEPARATOR”
–_ANY_SEPARATOR Content-Location:myidBackground
Content-Transfer-Encoding:base64
iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
–_ANY_SEPARATOR– */ .myid { background-image:
url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==”);
*background-image:
url(mhtml:http://example.com/test.css!myidBackground); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/** FilePath: http://example.com/test.css */
/*!@ignore
Content-Type: multipart/related; boundary="_ANY_SEPARATOR"
 
–_ANY_SEPARATOR
Content-Location:myidBackground
Content-Transfer-Encoding:base64
 
iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
–_ANY_SEPARATOR–
*/
 
.myid {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
  *background-image: url(mhtml:http://example.com/test.css!myidBackground);
}

上边的一串注释就如一个附件,这一个附件内容是一个叫做 myidBackground 的
base64 编码图片,在一个 class 叫做 myid 的 css
中用到了它。那里有几点要求注意:

那里存在一个坑:部分种类合营格局下的 IE8 也认识 css 中的 hack
符号 *,不过不支持 mhtml,所以地方的内容不会收效。处理方案估量就唯有采纳IE 的规则注释了。

摘自: http://www.cnblogs.com/hustskyking/p/data-uri.html

☞ HTTPS 下的平安提醒

HTTPS 打开页面,当在 IE6、7 下拔取 data URIs 时,会看到如下提示:

manbetx2.0手机版 2

MS 的演讲是:

您正在查看的网站是个平平安安网站。它使用了 SSL (保险套接字层)或
PCT(保密通信技术)那样的平安磋商来确保您所收发音讯的安全性。
当站点使用安全磋商时,您提供的音讯例如姓名或信用卡号码等都通过加密,其余人不可能读取。然则,那些网页同时涵盖未使用该安全协议的花色

很显著,IE 嗅到了”未利用安全磋商的品类”。

浏览器在条分缕析到一个 URI
的时候,会首先判断协议头,倘使是以 http(s) 开首,它便会确立一个互连网链接下载资源,若是它发现协议头为 data:,便会将其用作一个
Data URI 资源举行解析。

manbetx2.0手机版 3

不过从 chrome 的瀑布流,我们得以做那样的质疑:

图中各类 Data URI
都发起了请求,但是情状都是 data(from cache),禁用缓存之后,照旧那样。所以可以断定,浏览器在下载源码解析成
DOM 的时候,会将 Data URI 的资源解析出来,并缓存在本地,最终 Data URI
每个对应地方都会发起一次呼吁,只是那么些请求还未制造链接,就被发觉存在缓存的浏览器给拍死了。

Data URL 早在 1995
年就被指出,那几个时候有不少个本子的 Data URL Schema
定义陆续出现在 VRML 之中,随后不久,其中的一个版本被提上了议案——将它做个一个嵌入式的资源放置在
HTML
语言之中。从 RFC 文档定稿的岁月来看(1998年),它是一个很受欢迎的表达。

☞ 安全阀门

Data URI 在 IE 下有诸多安全限制,事实上,很多 xss 注入也得以将 data URI
的源流作为入口,使用 data URI 绕过浏览器的过滤。

JavaScript

// 绕过浏览器过滤 http://example.com/text.php?t="><script
src=”data:text/html,<script>alert(“Xss”)</script><!–

1
2
// 绕过浏览器过滤
http://example.com/text.php?t="><script src="data:text/html,<script>alert("Xss")</script><!–

那边可以很大程度的疏散,很有意思,值得读者去追究。

Data URIs
定义的始末可以当作小文件被插入到其余文档之中。URI
是 uniform resource identifier(统一资源标识符) 的缩写,它定义了接受内容的商议以及附带的相关内容,假如附带的相干内容是一个地点,那么此时的
URI 也是一个 URL
(uniform resource locator)(统一资源定位符)
,如:

☞ 增加阅读

manbetx2.0手机版 4

ftp://10.1.1.10/path/to/filename.ext
http://example.com/source/id

说道后边的情节,可以告知客户端一个准儿下载资源的地点,而
URI
并不一定包罗一个地方新闻,如(demo):

data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

其情商为
data,并告诉客户端将以此情节作为 image/gif 格式来分析,需求分析的情节使用的是
base64
编码。它一向包括了情节但并没有一个规定的资源地址。

manbetx2.0手机版 5

☞ 格式

Data URI 的格式卓殊简易,如下所示(青色部分是主体,其余可接纳的逐条无法更改):

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

成百上千时候我们选择 data URI
来表现一些较长的情节,如一串二进制数据编码、图片等,采纳 base64
编码能够让内容变得越来越简约。而对图片来说,在 gzip 压缩之后,base64
图片实际上比原图 gzip
压缩要大,体积伸张差不离为三分之一,所以选取的时候要求权衡。

☞ 兼容性

出于出现时间较早,如今主流的浏览器基本都辅助data URI:

只是有些浏览器对 data URI
的利用存在限制:

☞ 低版本IE的解决之道 – MHTML

MHTML 就是 MIME HTML,是 “Multipurpose
Internet Mail Extensions HyperText 马克up Language”
的简称,它如同一个带着附件的邮件一般,如下所示:

/** FilePath: http://example.com/test.css */
/*!@ignore
Content-Type: multipart/related; boundary="_ANY_SEPARATOR"

--_ANY_SEPARATOR
Content-Location:myidBackground
Content-Transfer-Encoding:base64

iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
--_ANY_SEPARATOR--
*/

.myid {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
  *background-image: url(mhtml:http://example.com/test.css!myidBackground); 
}

上方的一串注释就像是一个附件,这个附件内容是一个名叫 myidBackground 的 base64 编码图片,在一个 class 叫做 myid 的 css 中用到了它。这里有几点需要注意:

此间存在一个坑:部分系统匹配形式下的
IE8 也认识 css 中的 hack
符号 *,但是不匡助 mhtml,所以地方的内容不会生效。处理方案估量就唯有利用
IE 的准绳注释了。

☞ HTTPS 下的安全提醒

HTTPS 打开页面,当在 IE6、7 下利用 data
URIs 时,会看出如下提示:

manbetx2.0手机版 6

MS 的解释是:

您正在查看的网站是个平平安安网站。它选择了
SSL (避孕套接字层)或
PCT(保密通信技术)这样的平安磋商来确保您所收发音信的安全性。 
style=”font-size: 18px;”>当站点使用安全协议时,您提供的音讯例如姓名或信用卡号码等都由此加密,其别人无法读取。不过,那个网页同时含有未拔取该安全协议的体系

很明朗,IE
嗅到了”未使用安全磋商的类型”。

浏览器在分析到一个 URI
的时候,会率先判断协议头,若是是以 http(s) 发轫,它便会确立一个互连网链接下载资源,若是它发现协议头为 data:,便会将其看成一个
Data URI 资源拓展解析。

manbetx2.0手机版 7

只是从 chrome
的瀑布流,大家可以做如此的可疑:

图中种种 Data URI
都发起了请求,不过情形都是 data(from cache),禁用缓存之后,依旧那样。所以可以判明,浏览器在下载源码解析成
DOM 的时候,会将 Data URI 的资源解析出来,并缓存在地头,最后 Data URI
每个对应地方都会倡导三回呼吁,只是这一个请求还未创设链接,就被察觉存在缓存的浏览器给拍死了。

☞ 安全阀门

Data URI 在 IE
下有诸多安然无恙限制,事实上,很多 xss 注入也足以将 data URI
的源流作为入口,使用 data URI 绕过浏览器的过滤。

// 绕过浏览器过滤
http://example.com/text.php?t="><script src="data:text/html,<script>alert("Xss")</script><!--

此间可以很大程度的发散,很风趣,值得读者去啄磨。

☞ 增加阅读

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图