细说 Data U君越I

作者:免费资源

☞ 格式

Data URI 的格式十三分数大致,如下所示:

  • 首先部分是 data: 合同头,它标志那几个内容为贰个 data U凯雷德I 财富。
  • 其次部分是 MIME 类型,表示那串内容的显现方式,比方:text/plain,则以文件类型显示,image/jpeg,以 jpeg 图片形式显得,同样,顾客端也会以这几个 MIME 类型来解析数据。
  • 其三部分是编码设置,暗中认可编码是 charset=US-ASCII, 即数据部分的各种字符都会自动编码为 %xx,关于编码的测验,能够在浏览器地址框输入分别输入下边两串内容,查看效果:

www.mgm59599.com,// 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 U奥迪Q7I 承载的内容,它能够是纯文本编写的剧情,也得以是透过 base64编码 的源委。

无数时候大家运用 data U兰德讴歌ZDXI 来显现一些较长的从头到尾的经过,如后生可畏串二进制数据编码、图片等,选择 base64 编码能够让内容变得愈加简明。而对图纸来讲,在 gzip 压缩之后,base64 图片实际上比原图 gzip 压缩要大,体量增添大致为伍分之生龙活虎,所以利用的时候须要权衡。

☞ HTTPS 下的辽源提示

HTTPS 展开页面,当在 IE6、7 下利用 data UWranglerIs 时,拜谒到如下提示:

美高梅mgm59599 1

MS 的分解是:

你正在查阅的网址是个安全网站。它利用了 SSL (避孕套接字层)或 PCT(保密通信技术)这样的中卫磋商来确认保障您所收发音信的安全性。
当站点使用安全契约时,您提供的新闻譬如姓名或银行卡号码等都由此加密,别的人不可能读取。然则,这么些网页同有的时候候包罗未使用该安全公约的连串

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

浏览器在分条析理到三个 U库罗德I 的时候,会首先剖断合同头,假使是以 http(s) 最早,它便会确立贰个互联网链接下载财富,如若它发掘左券头为 data:,便会将其视作三个Data UCR-VI 能源开展深入分析。

美高梅mgm59599 2

可是从 chrome 的瀑布流,大家得以做这么的估计:

图中种种 Data UEnclaveI 都倡导了供给,然则意况都是 data(from cache),禁止使用缓存之后,依然那样。所以能够决断,浏览器在下载源码深入分析成 DOM 的时候,会将 Data U福睿斯I 的能源剖判出来,并缓存在本土,最终 Data UOdysseyI 每种对应地点都会发起二次呼吁,只是这些乞求还未有成立链接,就被察觉存在缓存的浏览器给拍死了。

☞ 安全阀门

Data U凯雷德I 在 IE 下有许多安然无事限定,事实上,超多 xss 注入也足以将 data U智跑I 的源流作为入口,使用 data U奥迪Q5I 绕过浏览器的过滤。

JavaScript

// 绕过浏览器过滤 美高梅mgm59599, 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 ULX570I:

  • 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 UTiggoI 只同意被用到如下位置:
    • object (images only)
    • img、input type=image、link
    • CSS 中允许使用 U奥迪Q5L 表明的地点,如 background
  • 在 IE 下,Data ULX570I 的剧情必需是通过编码转变的,如 “#”、”%”、非 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 的原则注释了。

☞ 扩充阅读

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

    1 赞 1 收藏 评论

美高梅mgm59599 3

细说 Data URI

2015/08/27 · HTML5 · URI

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

Data U帕杰罗L 早在 一九九四 年就被提议,那时候有好五个本子的 Data U悍马H2L Schema 定义时有时无出以后 VRML 之中,随后不久,当中的一个版本被提上了议事原案——将它做个三个嵌入式的财富放置在 HTML 语言之中。从 RFC 文书档案定稿的小时来看(1997年),它是一个相当受应接的评释。

Data UOdysseyIs 定义的剧情能够看成小文件被插入到任何文书档案之中。UENVISIONI 是 uniform resource identifier 的缩写,它定义了接收内容的协商以至附带的连带内容,即使附带的连带内容是八个地点,那么那时的 UENCOREI 也是三个 U中华VL (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

公约前面包车型大巴内容,能够告知顾客端四个准儿下载财富的地址,而 ULANDI 并不一定富含叁个地点消息,如(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 编码。它一向富含了剧情但并未贰个规定的财富地址。

美高梅mgm59599 4

本文由美高梅mgm59599发布,转载请注明来源

关键词: