菜单

有关Data U奥迪Q3I

2019年9月22日 - Html/Html5

细说 Data URI

2015/08/27 · HTML5 ·
URI

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

Data U普拉多L 早在 1991 年就被提出,那一年有为数十分多个版本的 Data UCRUISERL Schema
定义时有时无现身在 VRML 之中,随后不久,当中的一个本子被提上了议案——将它做个三个嵌入式的财富放置在
HTML
语言之中。从 RFC 文书档案定稿的小运来看(1999年),它是贰个异常受招待的评释。

Data UPRADOIs 定义的剧情能够用作小文件被插入到任何文书档案之中。U奇骏I
是 uniform resource identifier 的缩写,它定义了接受内容的说道以及附带的连带内容,倘诺附带的连锁内容是一个地方,那么此时的
U福睿斯I 也是贰个 UWranglerL (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

磋商后边的剧情,能够告诉客商端三个纯正下载财富的地点,而 U昂科威I
并不一定饱含一个地方新闻,如(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 编码。它平素包蕴了剧情但并未一个鲜明的财富地址。

图片 1

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

☞ 格式

Data UENVISIONI 的格式十二分简单易行,如下所示:

// 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 U牧马人I
来显现一些较长的剧情,如一串二进制数据编码、图片等,选择 base64
编码能够让内容变得尤为简约。而对图纸来讲,在 gzip 压缩之后,base64
图片实际上比原图 gzip
压缩要大,容量扩大大概为三成,所以选择的时候须求权衡。

引子:在商讨FileReader时,有个点子readAsDataUEnclaveL;然后看到打字与印刷出来的事物类似于如下:【data:text/plain;base64,Y29tZSBvbiB0byBidXkgYSBwaWFubyE=】,那个东西照旧像个超链接同样能够跳转,在新窗口中显得出文书档案内容,纵然是图片还有可能会议及展览示出图片。于是比较奇怪那是什么样牢固到图片的地点的,原本这串字符并不曾一直图片位置,而是将图片的开始和结果一向包罗了进去,所以浏览器就直接解析出来了。具体用法见如下小说

☞ 兼容性

出于出现时间较早,最近主流的浏览器基本都帮忙 data U智跑I:

只是有个别浏览器对 data UXC90I 的利用存在限制:

Opera 下限制为 4100 个字符,近些日子一度去掉了那个界定 IE 8+ 下限制为 32,7六十七个字符(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 U奇骏Is 时,会看到如下提醒:

图片 2

MS 的演说是:

您正在查看的网址是个平平安安网址。它应用了 SSL (安全套接字层)或
PCT(保密通讯本事)那样的平安慰组织议来确定保障您所收发音信的安全性。
当站点使用安全磋商时,您提供的音讯举例姓名或银行卡号码等都经过加密,其余人不能够读取。然则,那一个网页相同的时间含有未采纳该安全磋商的种类

很分明,IE 嗅到了”未使用安全契约的类型”。

浏览器在深入分析到二个 U路虎极光I
的时候,会率先推断左券头,假使是以 http(s) 开首,它便会树立叁个互连网链接下载能源,如若它发掘左券头为 data:,便会将其作为三个Data UEscortI 财富进行解析。

图片 3

不过从 chrome 的瀑布流,大家能够做这样的疑惑:

图中各个 Data U安德拉I
都提倡了央浼,可是意况都以 data(from cache),禁止使用缓存之后,依然那样。所以能够料定,浏览器在下载源码深入分析成
DOM 的时候,会将 Data UEscortI 的财富剖判出来,并缓存在本地,最终 Data URubiconI
每一个对应地点都会发起一遍呼吁,只是那一个央求还未创设链接,就被发现存在缓存的浏览器给拍死了。

Data U凯雷德L 早在 一九九四年就被建议,那个时候有相当的多个版本的 Data ULX570L Schema
定义陆陆续续出现在 VRML 之中,随后赶忙,在那之中的三个本子被提上了议案——将它做个三个嵌入式的财富放置在
HTML
语言之中。从 RFC 文书档案定稿的时刻来看(一九九三年),它是一个备受接待的发明。

☞ 安全阀门

Data U福特ExplorerI 在 IE 下有相当多安全限制,事实上,相当多 xss 注入也得以将 data U凯雷德I
的源流作为入口,使用 data U奥迪Q7I 绕过浏览器的过滤。

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 UEscortIs
定义的原委能够看做小文件被插入到别的文档之中。URI
是 uniform resource identifier(统一资源标识符) 的缩写,它定义了接受内容的说道以及附带的连带内容,假如附带的连锁内容是多个位置,那么此时的
U纳瓦拉I 也是三个 UENVISIONL
(uniform resource locator)(统一资源定位符)
,如:

☞ 扩展阅读

图片 4

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

和煦前面包车型大巴剧情,能够告诉顾客端三个正确精确下载能源的地方,而
UHighlanderI
并不一定包蕴一个地方新闻,如(demo):

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

其情商为
data,并告知顾客端将以此剧情作为 image/gif 格式来分析,要求深入分析的原委使用的是
base64
编码。它平昔富含了内容但并未贰个规定的财富地址。

图片 5

☞ 格式

Data UQashqaiI 的格式十二分简短,如下所示(深浅绿部分是重头戏,其他可选用的相继无法退换):

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

成都百货上千时候大家应用 data U陆风X8I
来表现一些较长的原委,如一串二进制数据编码、图片等,选拔 base64
编码能够让内容变得更其简约。而对图片来讲,在 gzip 压缩之后,base64
图片实际上比原图 gzip
压缩要大,体量增添大致为三成,所以使用的时候供给权衡。

☞ 兼容性

由于现身时间较早,最近主流的浏览器基本都协理data U大切诺基I:

只是部分浏览器对 data UWranglerI
的使用存在限制:

☞ 低版本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
U奇骏Is 时,会看出如下提示:

图片 6

MS 的演讲是:

您正在查看的网址是个平平安安网址。它使用了
SSL (安全套接字层)或
PCT(保密通信才具)那样的平安磋商来确认保障您所收发音信的安全性。 
style=”font-size: 18px;”>当站点使用安全磋商时,您提供的音讯比方姓名或银行卡号码等都因此加密,别的人不或然读取。然则,那几个网页同不常间含有未使用该安全公约的体系

很通晓,IE
嗅到了”未利用安全合同的门类”。

浏览器在条分缕析到一个 U途乐I
的时候,会首先剖断左券头,要是是以 http(s) 发轫,它便会创建二个互联网链接下载财富,假如它发掘公约头为 data:,便会将其看作贰个Data UKoleosI 财富开展分析。

图片 7

唯独从 chrome
的瀑布流,大家能够做这么的猜度:

图中每一个 Data U本田CR-VI
都倡导了央求,不过情形都是 data(from cache),禁止使用缓存之后,依旧那样。所以能够确定,浏览器在下载源码分析成
DOM 的时候,会将 Data U陆风X8I 的能源深入分析出来,并缓存在本土,最后 Data UPRADOI
种种对应地点都会倡导三次呼吁,只是这一个诉求还未创造链接,就被开采存在缓存的浏览器给拍死了。

☞ 安全阀门

Data U中华VI 在 IE
下有相当多平安范围,事实上,非常多 xss 注入也足以将 data UTiggoI
的源头作为入口,使用 data USportageI 绕过浏览器的过滤。

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

此处能够异常的大程度的分散,很风趣,值得读者去琢磨。

☞ 增添阅读

相关文章

发表评论

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

网站地图xml地图