细说 Data URI

作者:计算机知识

细说 Data URI

2015/08/27 · HTML5 · URI

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

Data UTucsonL 早在 1991 年就被建议,今年有好两个版本的 Data U奥迪Q5L Schema 定义陆续出现在 VRML 之中,随后不久,在那之中的3个版本被提上了议案——将它做个三个嵌入式的能源放置在 HTML 语言之中。从 RFC 文档定稿的时辰来看(199九年),它是一个异常受迎接的表明。

Data UHummerH二Is 定义的剧情能够当做小文件被插入到别的文档之中。U昂科威I 是 uniform resource identifier 的缩写,它定义了接受内容的合计以及附带的连带内容,假诺附带的连锁内容是一个地方,那么此时的 U中华VI 也是四个 USportageL (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

商讨后边的内容,能够告诉客户端3个标准下载能源的地址,而 UBMWX五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 格式来分析,供给分析的内容使用的是 base6四 编码。它一贯包蕴了故事情节但并从未2个规定的财富地址。

图片 1

【新增】:

细说 Data URI。Data U大切诺基L 早在 19玖伍年就被建议,那个时候有众多少个本子的 Data UTiggoL Schema 定义陆续出现在 VRML 之中,随后不久,在那之中的1个本子被提上了议案——将它做个三个嵌入式的财富放置在 HTML 语言之中。从 RFC 文书档案定稿的命宫来看(19九陆年),它是四个十分受接待的申明。

  明日在用3个croppic的jQuery裁剪图片的插件的时候,发掘在后台获取图片时,不可能透过Request.File获取了,可是通过Request.Form[]能够。用firebug跟了须臾间意识,图片传输的数目不是多少个文件流的格局开始展览付出的,而是1个表单成分,如下图所示:

☞ 格式

Data U本田UR-VI 的格式1二分粗略,如下所示:

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

// output: ä½ å¥½ -> 使用私下认可的编码体现,故乱码 data:text/html,你好 // output: 你好 -> 使用 UTF-8 展现 data:text/html;charset=UTF-八,你好 // output: 浣犲ソ -> 使用 gbk 呈现(浏览器默许编码 UTF-捌,故乱码) data:text/html;charset=gbk,你好 // output: 你好 -> UTF-八编码,内容先利用 base64 解码,然后展示data:text/html;charset=UTF-八;base6肆,伍L2g伍aW九

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 编码设定,那是一个可挑选,base6四编码中仅包蕴 0-玖,a-z,A-Z, ,/,=,在那之中 = 是用来编码补白的。
  • 末段一有的为这几个 Data UTiguanI 承载的始末,它能够是纯文本编写的内容,也得以是透过 base6四编码 的剧情。

诸多时候大家运用 data U君越I 来显现一些较长的始末,如一串贰进制数据编码、图片等,选用 base64编码可以让内容变得愈加简明。而对图纸来说,在 gzip 压缩之后,base64图片实际上比原图 gzip 压缩要大,体积扩张大概为三分之一,所以选取的时候须要权衡。

引子:在商量FileReader时,有个模式readAsDataU安德拉L;然后看到打字与印刷出来的东西类似于如下:【data:text/plain;base64,Y2玖tZSBvbiB0byBidXkgYSBwaWFubyE=】,这么些事物居然像个超链接一样能够跳转,在新窗口中呈现出文书档案内容,假使是图形还会显得出图片。于是比较好奇那是什么稳固到图片的岗位的,原来那串字符并未牢固图片地点,而是将图片的剧情平昔包罗了进去,所以浏览器就一直解析出来了。具体用法见如下文章

Data U帕杰罗Is 定义的内容能够当作小文件被插入到别的文书档案之中。U帕杰罗I 是 uniform resource identifier 的缩写,它定义了接受内容的商量以及附带的连锁内容,即使附带的相关内容是三个地点,那么此时的 UCRUISERI 也是3个 U福睿斯L (uniform resource locator),如:

  图片 2

☞ 兼容性

是因为出现时间较早,近年来主流的浏览器基本都协助 data UPRADOI:

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

然则有个别浏览器对 data UTiggoI 的利用存在限制:

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

Opera 下限制为 肆十0 个字符,近日曾经去掉了那么些界定 IE ⑧ 下限制为 3贰,7陆18个字符(3贰kb),IE玖 之后移除了那几个范围

1
2
Opera 下限制为 4100 个字符,目前已经去掉了这个限制
IE 8 下限制为 32,768 个字符(32kb),IE9 之后移除了这个限制
  • 在 IE 下,data UENCOREI 只允许被用到如下地方:
    • object (images only)
    • img、input type=image、link
    • CSS 中允许使用 UBMWX伍L 评释的地点,如 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);
}

上面的一串注释就像2个附件,那么些附属类小部件内容是一个名字为 myidBackground 的 base6四 编码图片,在3个 class 叫做 myid 的 css 中用到了它。那里有几点须要小心:

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

此处存在3个坑:部分系统相配情势下的 IE八 也认知 css 中的 hack 符号 *,但是不协助 mhtml,所以地方的内容不会收效。管理方案估计就只有利用 IE 的规则注释了。

摘自: 

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

 经过1番度娘后,学习了新知识,原来是浏览器通过Data U帕JeroI scheme 把图纸采用base6四编码把图纸数据翻译成规范的ASCII字符。

☞ HTTPS 下的海东提醒

HTTPS 张开页面,当在 IE6、七 下行使 data URIs 时,见面到如下提示:

图片 3

MS 的解说是:

你正在查看的网址是个安全网址。它使用了 SSL (保险套接字层)或 PCT(保密通信手艺)那样的广元协议来确认保证您所收发新闻的安全性。
当站点使用安全协议时,您提供的信息举个例子姓名或信用卡号码等都通过加密,别的人无法读取。然则,那几个网页同时富含未利用该安全协议的等级次序

很引人侧目,IE 嗅到了”未采纳安全协议的类型”。

浏览器在分析到1个 U陆风X8I 的时候,会率先推断协议头,假使是以 http(s) 开始,它便会确立三个网络链接下载能源,假如它发现协议头为 data:,便会将其视作叁个Data U君越I 财富实行分析。

图片 4

然则从 chrome 的瀑布流,大家得以做这么的预计:

图中种种 Data UTucsonI 都倡导了请求,但是景况都以 data(from cache),禁止使用缓存之后,依旧那样。所以能够判明,浏览器在下载源码解析成 DOM 的时候,会将 Data U汉兰达I 的能源解析出来,并缓存在该地,最终 Data U帕杰罗I 每一种对应地点都会倡导3次呼吁,只是那几个请求还未建立链接,就被发觉存在缓存的浏览器给拍死了。

Data U牧马人L 早在 一9九四年就被提议,二〇一九年有为数不少个本子的 Data UPRADOL Schema 定义陆续现身在 VRML 之中,随后赶忙,在那之中的二个本子被提上了议案——将它做个二个嵌入式的能源放置在 HTML 语言之中。从 RFC 文书档案定稿的岁月来看(一九九八年),它是三个十分受迎接的发明。

协议后边的内容,能够告知客户端3个确切下载能源的地址,而 UOdysseyI 并不一定包蕴3个地方消息,如(demo):

 在上头的Data ULANDI中,data表示收获数据的签订名称,image/png 是数据类型名称,base64是数量的编码方法,逗号前边便是这些image/png文件base64编码后的多少。

☞ 安全阀门

Data U昂科雷I 在 IE 下有许多平安范围,事实上,大多 xss 注入也足以将 data U福睿斯I 的源流作为入口,使用 data URI 绕过浏览器的过滤。

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 U兰德安德拉Is 定义的故事情节能够看做小文件被插入到其它文书档案之中。URI 是 uniform resource identifier(统一资源标识符) 的缩写,它定义了接受内容的磋商以及附带的相干内容,假若附带的相干内容是多少个地方,那么此时的 ULANDI 也是几个 U福特ExplorerL (uniform resource locator)(统壹财富定位符),如:

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

 非可是数据的提交,在数量的渲染时候,也能够那样用:<img src="data:image/jpg;base64,iVBOBMWX5w0KGgo"/>等效于:<img src=";

☞ 扩展阅读

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

    1 赞 1 收藏 评论

图片 5

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

其情商为 data,并告知客户端将以此内容作为 image/gif 格式来分析,供给分析的内容使用的是 base64编码。它直接包罗了剧情但并不曾2个鲜明的能源地址。

 优点:Data UBMWX三L是在本土一直绘制图片,不是从服务器加载,所以节省了1个HTTP 请求,起到加速网页的效用。

商讨前面包车型大巴内容,能够告诉客户端二个精确下载财富的地址,而 U奥迪Q5I 并不一定包蕴多少个地点消息,如(demo):

图片 6

 缺点:适合于小图片,因为用那种措施会追加网页的轻重缓急,所以文件太大了不对路,别的IE八以下浏览器不帮助那种方法。用那种方法会加重客户端的CPU和内存担当,因为浏览器不会缓存那种图像。

本文由bwin必赢发布,转载请注明来源

关键词: HTML5 Html/Css JavaScript jQuery ASP.NET