Data USportageI(转)

作者:信息技术

细说 Data URI

2015/08/27 · HTML5 · URI

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

Data U宝马7系L 早在 1991 年就被建议,二〇一三年有好四个版本的 Data U安德拉L Schema 定义时断时续出现在 VRML 之中,随后赶忙,在那之中的二个本子被提上了议案——将它做个多个嵌入式的财富放置在 HTML 语言之中。从 RFC 文书档案定稿的岁月来看(壹玖玖捌年),它是叁个备受招待的阐明。

Data U奔驰G级Is 定义的剧情能够当作小文件被插入到另外文书档案之中。U大切诺基I 是 uniform resource identifier 的缩写,它定义了接受内容的切磋以及附带的有关内容,假若附带的连带内容是叁个地点,那么此时的 UPAJEROI 也是二个 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

切磋前面的剧情,能够告诉顾客端贰个正确准确下载能源的地方,而 ULacrosseI 并不一定包涵一个地点音讯,如(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 ULacrosseL 早在 1994年就被建议,那一年有无尽个本子的 Data UXC60L Schema 定义时断时续出现在 VRML 之中,随后赶忙,个中的三个版本被提上了议案——将它做个一个嵌入式的财富放置在 HTML 语言之中。从 RFC 文书档案定稿的年月来看(一九九九年),它是叁个相当受应接的注解。

【新增】:

☞ 格式

Data URI 的格式拾贰分总结,如下所示:

  • 先是片段是 data: 公约头,它标识那几个剧情为三个 data UPAJEROI 财富。
  • 第二片段是 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 UEnclaveI 承载的从头到尾的经过,它能够是纯文本编写的内容,也能够是因此 base64编码 的剧情。

洋洋时候我们使用 data UKugaI 来显现一些较长的剧情,如一串二进制数据编码、图片等,选取 base64 编码能够让内容变得尤为简约。而对图纸来讲,在 gzip 压缩之后,base64 图片实际上比原图 gzip 压缩要大,体积扩大大概为三成,所以采纳的时候须求权衡。

Data UMuranoIs 定义的剧情能够视作小文件被插入到任何文书档案之中。U福特ExplorerI 是 uniform resource identifier 的缩写,它定义了接受内容的说道以及附带的连带内容,假使附带的连带内容是二个地方,那么此时的 U揽胜极光I 也是叁个 URubiconL (uniform resource locator),如:

引子:在商讨FileReader时,有个方式readAsDataUEvoqueL;然后看见打字与印刷出来的东西类似于如下:【data:text/plain;base64,Y29tZSBvbiB0byBidXkgYSBwaWFubyE=】,这么些东西依然像个超链接同样可以跳转,在新窗口中显示出文档内容,假设是图片还博览会示出图片。于是比较奇怪那是什么稳固到图片的地方的,原来那串字符并不曾一贯图片位置,而是将图片的开始和结果一向饱含了进去,所以浏览器就直接深入分析出来了。具体用法见如下小说

☞ 兼容性

鉴于出现时间较早,最近主流的浏览器基本都协理 data UEvoqueI:

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

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

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

Opera 下限制为 4100 个字符,近期一度去掉了那几个界定 IE 8+ 下限制为 32,7六18个字符(32kb),IE9 之后移除了那些范围

1
2
Opera 下限制为 4100 个字符,目前已经去掉了这个限制
IE 8+ 下限制为 32,768 个字符(32kb),IE9 之后移除了这个限制
  • 在 IE 下,data UPAJEROI 只允许被用到如下地点:
    • object (images only)
    • img、input type=image、link
    • CSS 中允许行使 U本田CR-VL 申明的地点,如 background
  • 在 IE 下,Data ULANDI 的剧情必得是透过编码调换的,如 “#”、”%”、非 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 UCRUISERIs 时,拜候到如下提示:

图片 2

MS 的表达是:

你正在查阅的网址是个平安网站。它利用了 SSL (避孕套接字层)或 PCT(保密通信工夫)那样的安全左券来确认保证您所收发音信的安全性。
当站点使用安全磋商时,您提供的新闻举个例子姓名或存折号码等都通过加密,其余人不能够读取。但是,这些网页同期包含未利用该安全左券的等级次序

很显眼,IE 嗅到了”未利用安全公约的品类”。

浏览器在条分缕析到一个 U中华VI 的时候,会首先决断协议头,固然是以 http(s) 开首,它便会创立一个网络链接下载财富,假设它开采公约头为 data:,便会将其当作三个Data UXC60I 能源开展分析。

图片 3

只是从 chrome 的瀑布流,大家能够做如此的猜度:

图中每种 Data U讴歌MDXI 都发起了诉求,然则情状都是 data(from cache),禁止使用缓存之后,还是那样。所以能够决断,浏览器在下载源码解析成 DOM 的时候,会将 Data UEscortI 的财富分析出来,并缓存在地头,最终 Data U福特ExplorerI 每一个对应地方都会倡导一回呼吁,只是这些央求还未创建链接,就被发觉存在缓存的浏览器给拍死了。

和睦后边的内容,能够告知客商端三个正确正确下载能源的地址,而 U翼虎I 并不一定包涵贰个地点音信,如(demo):

Data U奥迪Q3L 早在 1991年就被提出,二〇一五年有不少个版本的 Data U奥迪Q5L Schema 定义陆陆续续出现在 VRML 之中,随后不久,个中的二个版本被提上了议案——将它做个一个嵌入式的财富放置在 HTML 语言之中。从 RFC 文书档案定稿的年华来看(1997年),它是四个非常受款待的阐明。

☞ 安全阀门

Data U科雷傲I 在 IE 下有好些个康宁范围,事实上,非常多 xss 注入也得以将 data U传祺I 的源头作为入口,使用 data UEvoqueI 绕过浏览器的过滤。

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 UTiggoIs 定义的始末能够作为小文件被插入到任何文书档案之中。URI 是 uniform resource identifier(统一资源标识符) 的缩写,它定义了接受内容的批评以及附带的连带内容,即使附带的连带内容是二个地方,那么此时的 U兰德PAJEROI 也是三个 UENVISIONL (uniform resource locator)(统一能源定位符),如:

本文由杏彩发布,转载请注明来源

关键词: