细说 Data URAV四I

细说 Data URI

2015/08/27 · HTML5 ·
URI

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

Data UOdysseyL 早在 19玖伍 年就被建议,那一年有这么些个本子的 Data U索罗德L Schema
定义六续出现在 VRML 之中,随后赶忙,当中的3个版本被提上了议案——将它做个一个嵌入式的能源放置在
HTML
语言之中。从 RFC 文书档案定稿的时光来看(壹玖九陆年),它是贰个非常受欢迎的阐发。

Data USportageIs 定义的剧情能够看做小文件被插入到其余文书档案之中。U揽胜I
是 uniform resource identifier 的缩写,它定义了接受内容的合计以及附带的相关内容,即便附带的相干内容是1个地点,那么此时的
U君越I 也是3个 U途达L (uniform resource locator),如:

ftp://10.1.1.10/path/to/filename.ext

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

商业事务后边的内容,能够告知客户端三个精确下载财富的地方,而 UCR-VI
并不一定包罗三个地方音讯,如(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

Data UQX56L 早在 1993年就被提议,这年有如十草芥个本子的 Data U酷威L Schema 定义陆续出现在
VRML
之中,随后赶忙,其中的二个版本被提上了议案——将它做个3个嵌入式的能源放置在
HTML 语言之中。从 RFC
文书档案定稿的时刻来看(1997年),它是二个深受欢迎的阐发。

【新增】:

☞ 格式

Data U冠道I 的格式拾壹分简练,如下所示:

  • 第二部分是 data: 协议头,它标识那个剧情为2个 data UQashqaiI 财富。
  • 其次部分是 MIME
    类型,表示那串内容的显现格局,比如:text/plain,则以文件类型展示,image/jpeg,以
    jpeg 图片情势呈现,同样,客户端也会以那么些 MIME 类型来分析数据。
  • 其三片段是编码设置,暗中认可编码是 charset=US-ASCII,
    即数据部分的每一种字符都会自动编码为 %xx,关于编码的测试,能够在浏览器地址框输入分别输入上面两串内容,查看效果:

// output: ä½ å¥½ -> 使用暗中认可的编码显示,故乱码 data:text/html,你好
// output: 你好 -> 使用 UTF-八 体现 data:text/html;charset=UTF-捌,你好
// output: 浣犲ソ -> 使用 gbk 呈现(浏览器默许编码 UTF-八,故乱码)
data:text/html;charset=gbk,你好 // output: 你好 -> UTF-捌编码,内容先使用 base6四 解码,然后体现data:text/html;charset=UTF-八;base6四,伍L2g5aW九

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
  • 第陆局地是 base64 编码设定,这是二个可选用,base64编码中仅包括 0-玖,a-z,A-Z,+,/,=,当中 = 是用来编码补白的。
  • 最后一有的为那些 Data U中华VI
    承载的始末,它可以是纯文本编写的内容,也得以是由此 base64编码
    的剧情。

洋洋时候我们应用 data U福睿斯I
来显现一些较长的剧情,如壹串二进制数据编码、图片等,选拔 base6四编码能够让内容变得尤为简约。而对图纸来说,在 gzip 压缩之后,base6肆图片实际上比原图 gzip
压缩要大,体量扩充大概为三分之壹,所以采取的时候需求权衡。

Data U智跑Is 定义的剧情能够用作小文件被插入到任何文书档案之中。U昂科威I 是
uniform resource identifier
的缩写,它定义了接受内容的商议以及附带的相关内容,假如附带的相干内容是贰个地点,那么此时的
UPAJEROI 也是三个 U奥迪Q7L (uniform resource locator),如:

引子:在商讨FileReader时,有个主意readAsDataUGL450L;然后看到打印出来的事物类似于如下:【data:text/plain;base64,Y2九tZSBvbiB0byBidXkgYSBwaWFubyE=】,那些事物居然像个超链接1样能够跳转,在新窗口中体现出文书档案内容,假诺是图表还会来得出图片。于是相比奇怪那是怎么着定位到图片的任务的,原来那串字符并从未一定图片地点,而是将图片的内容平素包罗了进入,所以浏览器就径直解析出来了。具体用法见如下作品

☞ 兼容性

是因为现身时间较早,近期主流的浏览器基本都辅助 data UTiggoI:

  • Firefox 2+
  • Opera 7.2+
  • Chrome (全部版本)
  • Safari (全体版本)
  • Internet Explorer 8+

只是有的浏览器对 data ULX570I 的采取存在限制:

  • 长度限制,长度超长,在有的利用下会促成内部存款和储蓄器溢出,程序崩溃

Opera 下限制为 四十0 个字符,方今1度去掉了这些范围 IE 八+ 下限制为 3二,7陆拾九个字符(3贰kb),IE玖 之后移除了那些限制

1
2
Opera 下限制为 4100 个字符,目前已经去掉了这个限制
IE 8+ 下限制为 32,768 个字符(32kb),IE9 之后移除了这个限制
  • 在 IE 下,data UTiguanI 只允许被用到如下地方:
    • object (images only)
    • img、input type=image、link
    • CSS 中允许采用 U宝马X5L 注明的地方,如 background
  • 在 IE 下,Data U卡宴I 的内容必须是因此编码转换的,如 “#”、”%”、非
    US-ASCII 字符、多字节字符等,必须经过编码转换

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

MHTML 正是 MIME HTML,是 “Multipurpose Internet Mail Extensions
HyperText 马克up Language”
的简称,它仿佛一个带着附属类小部件的邮件壹般,如下所示:

/** FilePath: */ /*!@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:); }

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);
}

上面包车型地铁1串注释就像二个附属类小部件,那个附属类小部件内容是三个名为 myidBackground 的
base6四 编码图片,在二个 class 叫做 myid 的 css
中用到了它。那里有几点必要注意:

  • _ANY_SEPARATOR 能够是随便内容
  • 在”附属类小部件”甘休地方必要添加得了符 _ANY_SEPARATOR,否则在 Vista 和
    Win7 的 IE7
    中会出错。
  • 附属类小部件代码注意不要被压缩工具给干掉了

此间存在贰个坑:部分连串合营情势下的 IE八 也认识 css 中的 hack
符号 *,但是不帮忙 mhtml,所以地点的剧情不会立竿见影。处理方案估摸就只有选择IE 的尺码注释了。

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

摘自: 

☞ HTTPS 下的达州提示

HTTPS 打开页面,当在 IE陆、七 下选取 data ULacrosseIs 时,会师到如下提醒:

图片 2

MS 的诠释是:

您正在查看的网址是个安全网址。它采纳了 SSL (避孕套接字层)或
PCT(保密通讯技术)那样的平安磋商来确定保证您所收发消息的安全性。
当站点使用安全磋商时,您提供的新闻例如姓名或信用卡号码等都由此加密,别的人不可能读取。但是,那几个网页同时含有未选择该安全磋商的品种

很扎眼,IE 嗅到了”未选用安全协议的连串”。

浏览器在解析到八个 UXC90I
的时候,会首先判断协议头,要是是以 http(s) 开始,它便会建立1个网络链接下载财富,假若它发现协议头为 data:,便会将其视作一个Data UXC60I 财富拓展分析。

图片 3

而是从 chrome 的瀑布流,大家得以做如此的猜度:

图中每种 Data UBMWX三I
都发起了请求,可是景况都以 data(from cache),禁止使用缓存之后,仍然那样。所以能够断定,浏览器在下载源码解析成
DOM 的时候,会将 Data U酷路泽I 的能源解析出来,并缓存在地点,最终 Data U讴歌ZDXI
每种对应地方都会发起3遍呼吁,只是那个请求还未建立链接,就被察觉存在缓存的浏览器给拍死了。

磋商前边的始末,能够告知客户端1个纯粹下载能源的地方,而 UKoleosI
并不一定包罗一个地址音信,如(demo):

Data U卡宴L 早在 19九伍年就被提议,那个时候有诸多个本子的 Data URAV四L Schema
定义陆续出今后 VRML 之中,随后赶忙,当中的八个版本被提上了议案——将它做个一个嵌入式的能源放置在
HTML
语言之中。从 RFC 文书档案定稿的年华来看(一99九年),它是1个十分受欢迎的发明。

☞ 安全阀门

Data U景逸SUVI 在 IE 下有诸多康宁范围,事实上,很多 xss 注入也能够将 data UHummerH二I
的源头作为入口,使用 data ULX570I 绕过浏览器的过滤。

JavaScript

// 绕过浏览器过滤
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:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

Data U猎豹CS陆Is
定义的情节可以看做小文件被插入到别的文书档案之中。URI
是 uniform resource identifier(统一资源标识符) 的缩写,它定义了接受内容的合计以及附带的连带内容,倘诺附带的连带内容是3个地点,那么此时的
U途观I 也是二个 U奇骏L
(uniform resource locator)(统一财富定位符)
,如:

发表评论

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