细说 Data UEnclaveI

细说 Data URI

2015/08/27 · HTML5 ·
URI

原来的小说出处:
李靖(@Barret李靖)   

Data U大切诺基L 早在 1993 年就被提议,那3个时候有广大个版本的 Data U智跑L Schema
定义陆续出现在 VRML 之中,随后赶忙,在那之中的叁个版本被提上了议案——将它做个贰个嵌入式的财富放置在
HTML
语言之中。从 RFC 文书档案定稿的日子来看(一九九七年),它是二个很受欢迎的发明。

Data UTucsonIs 定义的始末能够当做小文件被插入到别的文档之中。U本田CR-VI
是 uniform resource identifier 的缩写,它定义了接受内容的商业事务以及附带的连带内容,如若附带的连带内容是1个地址,那么此时的
U奥迪Q7I 也是二个 UOdysseyL (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 UCRUISERI 的格式拾分总结,如下所示:

  • 先是有个别是 data: 协议头,它标识那些内容为三个 data ULacrosseI 财富。
  • 其次有些是 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 编码设定,那是3个可挑选,base64
    编码中仅包涵 0-9,a-z,A-Z,+,/,=,在那之中 = 是用来编码补白的。
  • 最后一有的为那么些 Data U中华VI
    承载的剧情,它能够是纯文本编写的始末,也足以是经过 base64编码
    的内容。

众多时候我们选拔 data U兰德ENCOREI
来呈现一些较长的剧情,如一串二进制数据编码、图片等,采纳 base64
编码能够让内容变得更为简约。而对图片来说,在 gzip 压缩之后,base64
图片实际上比原图 gzip
压缩要大,体量扩充大概为33.33%,所以利用的时候需求权衡。

引子:在研讨FileReader时,有个艺术readAsDataU瑞虎L;然后看到打印出来的事物类似于如下:【data:text/plain;base64,Y29tZSBvbiB0byBidXkgYSBwaWFubyE=】,那个东西依然像个超链接一样能够跳转,在新窗口中显得出文书档案内容,假如是图表还会展现出图片。于是相比奇怪那是何等定位到图片的地方的,原来那串字符并从未一定图片地点,而是将图纸的内容一贯包罗了进来,所以浏览器就径直解析出来了。具体用法见如下文章

☞ 兼容性

出于出现时间较早,近期主流的浏览器基本都支持 data URubiconI:

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

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

  • 长度限制,长度超长,在局地行使下会促成内部存款和储蓄器溢出,程序崩溃

Opera 下限制为 4100 个字符,近来早就去掉了这么些限制 IE 8+ 下限制为 32,7陆21个字符(32kb),IE9 之后移除了那一个界定

1
2
Opera 下限制为 4100 个字符,目前已经去掉了这个限制
IE 8+ 下限制为 32,768 个字符(32kb),IE9 之后移除了这个限制
  • 在 IE 下,data U帕杰罗I 只允许被用到如下地点:
    • object (images only)
    • img、input type=image、link
    • CSS 中允许接纳 ULANDL 注解的地点,如 background
  • 在 IE 下,Data U酷威I 的始末必须是由此编码转换的,如 “#”、”%”、非
    US-ASCII 字符、多字节字符等,必须经过编码转换

☞ 低版本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);
}

上边包车型大巴一串注释就像二个附属类小部件,这几个附属类小部件内容是3个号称 myidBackground 的
base64 编码图片,在两个 class 叫做 myid 的 css
中用到了它。那里有几点须要留意:

  • _ANY_SEPARATOR 能够是随意内容
  • 在”附属类小部件”结束地方需求丰硕得了符 _ANY_SEPARATOR,否则在 Vista 和
    Win7 的 IE7
    中会出错
  • 附属类小部件代码注意不要被压缩工具给干掉了

那边存在二个坑:部分体系协作格局下的 IE8 也认识 css 中的 hack
符号 *,可是不辅助 mhtml,所以地方的情节不会收效。处理方案估量就只有采取IE 的规格注释了。

摘自: http://www.cnblogs.com/hustskyking/p/data-uri.html

☞ HTTPS 下的新余提示

HTTPS 打开页面,当在 IE陆 、7 下采用 data UKugaIs 时,会面到如下提醒:

图片 2

MS 的诠释是:

您正在查看的网站是个安全网站。它采纳了 SSL (安全套接字层)或
PCT(保密通信技术)那样的本溪磋商来确认保障您所收发信息的安全性。
当站点使用安全协议时,您提供的消息例如姓名或信用卡号码等都通过加密,其余人不能读取。不过,那一个网页同时富含未利用该安全磋商的项目

很明显,IE 嗅到了”未选拔安全磋商的连串”。

浏览器在分析到一个 U宝马X5I
的时候,会首先判断协议头,即便是以 http(s) 起首,它便会树立三个网络链接下载能源,借使它发现协议头为 data:,便会将其作为三个Data U大切诺基I 财富实行解析。

图片 3

而是从 chrome 的瀑布流,大家能够做这么的思疑:

图中各种 Data U哈弗I
都倡导了请求,然而情状都以 data(from cache),禁止使用缓存之后,依然那样。所以能够判定,浏览器在下载源码解析成
DOM 的时候,会将 Data UGL450I 的财富解析出来,并缓存在地点,最后 Data U大切诺基I
各类对应地方都会倡导1回呼吁,只是那一个请求还未创立链接,就被察觉存在缓存的浏览器给拍死了。

Data U帕杰罗L 早在 一九九二年就被提议,这一个时候有很三个版本的 Data UPAJEROL Schema
定义陆续出现在 VRML 之中,随后赶忙,个中的二个本子被提上了议案——将它做个1个嵌入式的财富放置在
HTML
语言之中。从 RFC 文书档案定稿的日子来看(1997年),它是3个很受欢迎的表明。

☞ 安全阀门

Data UPAJEROI 在 IE 下有诸多康宁范围,事实上,很多 xss 注入也得以将 data UTucsonI
的源流作为入口,使用 data U昂CoraI 绕过浏览器的过滤。

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 U帕JeroIs
定义的始末能够看做小文件被插入到别的文书档案之中。URI
是 uniform resource identifier(统一资源标识符) 的缩写,它定义了接受内容的协议以及附带的相关内容,借使附带的相干内容是3个地方,那么此时的
UEscortI 也是二个 URubiconL
(uniform resource locator)(统一能源定位符)
,如:

☞ 增加阅读

图片 4

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

情商前面包车型的士始末,能够告诉客户端2个准确下载能源的地址,而
U普拉多I
并不一定包括2个地址音讯,如(demo):

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

其情商为
data,并报告客户端将以此剧情作为 image/gif 格式来分析,需求分析的内容使用的是
base64
编码。它一向包涵了内容但并不曾多少个规定的财富地址。

图片 5

☞ 格式

Data U昂科威I 的格式拾贰分简便,如下所示(米白部分是主导,别的可采纳的相继无法改变):

data:[<mime type>][;charset=<charset>][;base64],<encoded data>
  • 第2局地是 data: 协议头,它标识这几个内容为二个data UTiguanI 能源。

  • 其次局地是 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 
    
  • 第⑥有的是 base64 编码设定,那是二个可采用,base64
    编码中仅包括 0-9,a-z,A-Z,+,/,=,在那之中 = 是用来编码补白的。

  • 末了一有个别为那个 Data U奥德赛I
    承载的剧情,它能够是纯文本编写的剧情,也足以是经过 base64编码
    的始末。

很多时候大家选用 data U锐界I
来展现一些较长的始末,如一串二进制数据编码、图片等,选拔 base64
编码能够让内容变得更其简明。而对图纸来说,在 gzip 压缩之后,base64
图片实际上比原图 gzip
压缩要大,体积增添大概为百分之三十三,所以使用的时候须求权衡。

☞ 兼容性

由于出现时间较早,近日主流的浏览器基本都协助data U逍客I:

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

唯独部分浏览器对 data URAV4I
的应用存在限制:

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

    Opera 下限制为 4100 个字符,目前已经去掉了这个限制
    IE 8+ 下限制为 32,768 个字符(32kb),IE9 之后移除了这个限制
    
  • 在 IE 下,data UGL450I 只允许被用到如下地点:

    在 IE 下,Data U中华VI
    的内容必须是通过编码转换的,如 “#”、”%”、非 US-ASCII
    字符、多字节字符等,必须透过编码转换

    • object (images only)
    • img、input type=image、link
    • CSS 中允许行使 U途观L 注明的地点,如 background

☞ 低版本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 中用到了它。这里有几点需要注意:
  • _ANY_SEPARATOR 能够是随意内容
  • 在”附属类小部件”甘休地点须求丰硕得了符 _ANY_SEPARATOR,否则在
    Vista 和 Win7 的 IE7
    中会出错
  • 附属类小部件代码注意不要被压缩工具给干掉了

那边存在1个坑:部分系统匹配格局下的
IE8 也认识 css 中的 hack
符号 *,但是不协理 mhtml,所以地点的始末不会生效。处理方案推断就唯有利用
IE 的基准注释了。

☞ HTTPS 下的安全指示

HTTPS 打开页面,当在 IE六 、7 下行使 data
U奥迪Q5Is 时,会看出如下提示:

图片 6

MS 的诠释是:

你正在查阅的网站是个安全网站。它采用了
SSL (安全套接字层)或
PCT(保密通信技术)那样的平安慰组织议来确定保障您所收发音信的安全性。 
style=”font-size: 18px;”>当站点使用安全协议时,您提供的消息例如姓名或信用卡号码等都经过加密,别的人不或者读取。可是,这一个网页同时含有未选择该安全协议的类型

很明朗,IE
嗅到了”未使用安全磋商的品种”。

浏览器在分析到三个 U福特ExplorerI
的时候,会率先判断协议头,假若是以 http(s) 初始,它便会创设1个互连网链接下载能源,假诺它发现协议头为 data:,便会将其看作多个Data UPAJEROI 财富拓展辨析。

图片 7

而是从 chrome
的瀑布流,大家能够做如此的推断:

图中每一个 Data URubiconI
都发起了请求,可是情形都以 data(from cache),禁止使用缓存之后,照旧那样。所以能够判定,浏览器在下载源码解析成
DOM 的时候,会将 Data U宝马X3I 的财富解析出来,并缓存在地面,最终 Data UCR-VI
各个对应地点都会发起三遍呼吁,只是这么些请求还未建立链接,就被发现存在缓存的浏览器给拍死了。

☞ 安全阀门

Data U奇骏I 在 IE
下有诸多有惊无险范围,事实上,很多 xss 注入也可以将 data URubiconI
的源流作为入口,使用 data U奥德赛I 绕过浏览器的过滤。

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

此间可以不小程度的发散,很有意思,值得读者去探索。

☞ 扩充阅读

发表评论

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

网站地图xml地图