来自 软件资讯 2019-09-11 14:54 的文章
当前位置: 威尼斯国际官方网站 > 软件资讯 > 正文

细说 Data URI

细说 Data URI

2015/08/27 · HTML5 · URI

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

Data ULacrosseL 早在 一九九五 年就被提议,今年有为数非常多个本子的 Data U大切诺基L Schema 定义陆陆续续出现在 VRML 之中,随后赶忙,在那之中的一个本子被提上了议案——将它做个一个嵌入式的能源放置在 HTML 语言之中。从 RFC 文书档案定稿的大运来看(一九九九年),它是三个深受招待的注解。

Data U途锐Is 定义的剧情能够看作小文件被插入到其余文书档案之中。U揽胜I 是 uniform resource identifier 的缩写,它定义了接受内容的说道以及附带的连带内容,假诺附带的连锁内容是三个地点,那么此时的 U宝马7系I 也是二个 ULacrosseL (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

协商前边的剧情,能够告知客户端三个准儿下载财富的地点,而 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

Data U凯雷德L 早在 一九九一年就被提出,这个时候有好五个版本的 Data U凯雷德L Schema 定义时有时无出现在 VRML 之中,随后赶忙,当中的二个本子被提上了议案——将它做个二个嵌入式的能源放置在 HTML 语言之中。从 RFC 文书档案定稿的日子来看(壹玖玖玖年),它是一个十分受招待的注解。

☞ 格式

Data U卡宴I 的格式十三分大致,如下所示:

  • 率先片段是 data: 公约头,它标记那些剧情为三个 data U昂科雷I 能源。
  • 第二片段是 MIME 类型,表示那串内容的变现方式,举个例子:text/plain,则以文件类型体现,image/jpeg,以 jpeg 图片格局显得,同样,客商端也会以那么些 MIME 类型来剖判数据。
  • 其三局地是编码设置,暗许编码是 charset=US-ASCII, 即数据部分的各样字符都会自动编码为 %xx,关于编码的测验,能够在浏览器地址框输入分别输入下边两串内容,查看效果:

// 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
  • 第四某些是 base64 编码设定,那是一个可挑选,base64 编码中仅包涵 0-9,a-z,A-Z,+,/,=,个中 = 是用来编码补白的。
  • 最终一部分为这一个 Data UCRUISERI 承载的源委,它能够是纯文本编写的内容,也得以是经过 base64编码 的剧情。

过多时候大家应用 data U摩根Aero 8I 来表现一些较长的剧情,如一串二进制数据编码、图片等,采纳 base64 编码可以让内容变得进一步简约。而对图纸来讲,在 gzip 压缩之后,base64 图片实际上比原图 gzip 压缩要大,体量增添大致为四成,所以选取的时候供给权衡。

Data U揽胜Is 定义的剧情可以看作小文件被插入到别的文书档案之中。U途乐I 是 uniform resource identifier 的缩写,它定义了接受内容的交涉以及附带的连带内容,假若附带的连带内容是二个地点,那么此时的 URAV4I 也是一个 U途睿欧L (uniform resource locator),如:

☞ 兼容性

出于出现时间较早,这几天主流的浏览器基本都帮助 data UOdysseyI:

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

可是有的浏览器对 data U君越I 的行使存在限制:

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

Opera 下限制为 4100 个字符,近日早已去掉了那些范围 IE 8+ 下限制为 32,7七十三个字符(32kb),IE9 之后移除了这么些限制

1
2
Opera 下限制为 4100 个字符,目前已经去掉了这个限制
IE 8+ 下限制为 32,768 个字符(32kb),IE9 之后移除了这个限制
  • 在 IE 下,data URAV4I 只同意被用到如下地点:
    • object (images only)
    • img、input type=image、link
    • CSS 中允许行使 U大切诺基L 注明的地点,如 background
  • 在 IE 下,Data UOdysseyI 的源委必需是透过编码转变的,如 “#”、”%”、非 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);
}

上面的一串注释就像三个附件,这么些附属类小部件内容是贰个誉为 myidBackground 的 base64 编码图片,在三个 class 叫做 myid 的 css 中用到了它。这里有几点须求专一:

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

此间存在二个坑:部分系统同盟模式下的 IE8 也认知 css 中的 hack 符号 *,不过不帮忙 mhtml,所以地点的剧情不会收效。管理方案推测就唯有接纳IE 的规范化注释了。

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

☞ HTTPS 下的三沙提示

HTTPS 张开页面,当在 IE6、7 下选取 data UEnclaveIs 时,寻访到如下提示:

图片 2

MS 的讲明是:

您正在查看的网址是个安全网址。它选择了 SSL (保险套接字层)或 PCT(保密通信能力)那样的保山磋商来确定保证您所收发音信的安全性。
当站点使用安全左券时,您提供的音讯举例姓名或银行卡号码等都由此加密,别的人不只怕读取。然则,那么些网页同期含有未使用该安全磋商的品种

很确定,IE 嗅到了”未使用安全协议的连串”。

浏览器在深入分析到一个 UPRADOI 的时候,会率先剖断协议头,借使是以 http(s) 开头,它便会创立多个网络链接下载财富,借使它开掘公约头为 data:,便会将其看作贰个Data ULacrosseI 能源实行剖析。

图片 3

不过从 chrome 的瀑布流,大家能够做那样的推测:

图中种种 Data UCR-VI 都提倡了须要,可是情状都以 data(from cache),禁止使用缓存之后,依然那样。所以能够判明,浏览器在下载源码分析成 DOM 的时候,会将 Data U中华VI 的财富深入分析出来,并缓存在本土,最后 Data UPRADOI 各类对应地方都会发起一回呼吁,只是那几个央求还未建立链接,就被开采存在缓存的浏览器给拍死了。

商业事务后边的剧情,可以告诉顾客端二个准确准确下载财富的地点,而 U途锐I 并不一定包括二个地方音讯,如(demo):

☞ 安全阀门

Data U索罗德I 在 IE 下有繁多康宁范围,事实上,非常多 xss 注入也得以将 data U中华VI 的源头作为入口,使用 data U凯雷德I 绕过浏览器的过滤。

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

☞ 扩充阅读

  • RFC 2397 RFC文档
  • MDN – data_URIs MDN文档
  • MSDN – data Protocal.aspx) MSDN文档
  • NC – data_uris_explained
  • phpied – MHTML

    1 赞 1 收藏 评论

图片 4

其情商为 data,并告诉顾客端将这几个内容作为 image/gif 格式来剖析,须要分析的从头到尾的经过使用的是 base64 编码。它直接包蕴了情节但并未二个规定的财富地址。

本文由威尼斯国际官方网站发布于软件资讯,转载请注明出处:细说 Data URI

关键词: