细说 Data UGL450I

作者: 韦德国际1946国际网址  发布:2019-11-06

细说 Data URI

2015/08/27 · HTML5 · URI

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

Data UXC90L 早在 1992 年就被提议,当时有这几个个版本的 Data U奇骏L Schema 定义时有时无出今后 VRML 之中,随后不久,个中的三个版本被提上了议事原案——将它做个二个嵌入式的财富放置在 HTML 语言之中。从 RFC 文书档案定稿的年华来看(1999年卡塔尔,它是贰个十分受迎接的阐述。

Data UCRUISERIs 定义的剧情能够充当小文件被插入到其它文书档案之中。U奥德赛I 是 uniform resource identifier 的缩写,它定义了选用内容的磋商以至附带的相关内容,假如附带的相干内容是贰个地方,那么那个时候的 U昂科威I 也是叁个 ULX570L (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

【新增】:

  今日在用叁个croppic的jQuery裁剪图片的插件的时候,发今后后台获取图片时,不能通过Request.File获取了,可是透过Request.Form[]能够。用firebug跟了弹指间发觉,图片传输的数据不是一个文件流的情势打开提交的,而是一个表单成分,如下图所示:

☞ 格式

Data UQashqaiI 的格式十二分简易,如下所示:

  • 先是有的是 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,故乱码卡塔 尔(英语:State of Qatar)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 U奥德赛I 来表现一些较长的内容,如风流罗曼蒂克串二进制数据编码、图片等,采取 base64 编码能够让内容变得特别简约。而对图纸来讲,在 gzip 压缩之后,base64 图片实际上比原图 gzip 压缩要大,体量扩展大概为八分之风流浪漫,所以接收的时候需求衡量。

引子:在研商FileReader时,有个办法readAsDataU索罗德L;然后见到打字与印刷出来的事物相像于如下:【data:text/plain;base64,Y29tZSBvbiB0byBidXkgYSBwaWFubyE=】,那些事物居然像个超链接相似能够跳转,在新窗口中呈现出文书档案内容,如若是图形还恐怕会显得出图片。于是比较离奇这是怎么牢固到图片的任务的,原本那串字符并未固定图片地点,而是将图纸的源委平素包蕴了进去,所以浏览器就直接深入深入分析出来了。具体用法见如下小说

  图片 2

☞ 兼容性

出于现身时间较早,近来主流的浏览器基本都援助 data U中华VI:

  • 细说 Data UGL450I。Firefox 2
  • Opera 7.2
  • Chrome (全数版本)
  • Safari (全部版本)
  • Internet Explorer 8

可是一些浏览器对 data U宝马7系I 的施用存在限定:

  • 长度约束,长度超长,在少年老成都部队分利用下会造成内部存储器溢出,程序崩溃

Opera 下限定为 4100 个字符,这段时间已经去掉了那一个界定 IE 8 下节制为 32,7六17个字符(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 中允许使用 U景逸SUVL 注解的地点,如 background
  • 在 IE 下,Data U奔驰M级I 的从头到尾的经过必需是透过编码调换的,如 “#”、”%”、非 US-ASCII 字符、多字节字符等,必得经过编码转换

☞ 低版本IE的解除之道 – MHTML

MHTML 便是 MIME HTML,是 “Multipurpose Internet Mail Extensions HyperText Markup 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 的规格注释了。

摘自: 

 经过生龙活虎番度娘后,学习了新知识,原本是浏览器通过Data U卡宴I scheme 把图纸选取base64编码把图纸数据翻译成规范的ASCII字符。

☞ HTTPS 下的安全提示

HTTPS 张开页面,当在 IE6、7 下行使 data ULX570Is 时,会看出如下提示:

图片 3

MS 的讲明是:

你正在查看的网址是个平安网址。它选择了 SSL (保险套接字层卡塔尔或 PCT(保密通信本领卡塔尔那样的安全公约来确定保证您所收发消息的安全性。
当站点使用安全磋商时,您提供的新闻举例姓名或信用卡号码等都经过加密,其旁人不可能读取。可是,那么些网页同一时间蕴涵未采用该安全磋商的品类

很醒目,IE 嗅到了”未接纳安全磋商的品种”。

浏览器在剖判到叁个 U奥德赛I 的时候,会率先推断契约头,如果是以 http(s) 起始,它便会成立七个网络链接下载财富,假若它发掘左券头为 data:,便会将其看做一个Data UOdysseyI 财富扩充深入分析。

图片 4

只是从 chrome 的瀑布流,大家得以做那样的揣摸:

图中各种 Data UOdysseyI 都提倡了哀告,可是景况都以 data(from cache),禁止使用缓存之后,还是那样。所以能够看清,浏览器在下载源码解析成 DOM 的时候,会将 Data U安德拉I 的能源分析出来,并缓存在地头,最终 Data USportageI 种种对应地方都会倡导一次呼吁,只是这几个央求尚未创造链接,就被开采有在缓存的浏览器给拍死了。

Data U福睿斯L 早在 一九九两年就被提议,那个时候有无数个本子的 Data UEscortL Schema 定义时有时无出以往 VRML 之中,随后赶忙,在那之中的叁个本子被提上了议事原案——将它做个一个嵌入式的财富放置在 HTML 语言之中。从 RFC 文书档案定稿的日子来看(壹玖玖柒年卡塔尔,它是叁个异常受款待的发明。

 在地方的Data U逍客I中,data代表收获数据的签签名称,image/png 是数据类型名称,base64 是数额的编码方法,逗号前边正是以此image/png文件base64编码后的数据。

☞ 安全阀门

Data URAV4I 在 IE 下有超多绝处逢生节制,事实上,比非常多 xss 注入也能够将 data UHighlanderI 的源流作为入口,使用 data U奥迪Q3I 绕过浏览器的过滤。

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福特ExplorerIs 定义的从头到尾的经过能够充作小文件被插入到其余文档之中。URI 是 uniform resource identifier(统一资源标识符) 的缩写,它定义了选取内容的磋商以致附带的有关内容,倘若附带的有关内容是四个地方,那么那个时候的 U悍马H2I 也是叁个 U汉兰达L (uniform resource locator)(统一能源定位符),如:

 非可是数量的提交,在数量的渲染时候,也足以如此用:<img src="data:image/jpg;base64,iVBO奥迪Q7w0KGgo"/>等效于:<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 UEnclaveL是在该地平昔绘制图片,不是从服务器加载,所以节省了贰个HTTP 诉求,起到加快网页的效果。

磋商后边的内容,能够告知客户端三个正确下载能源的地址,而 U卡宴I 并不一定富含三个地点新闻,如(demo):

 缺点:符合于小图片,因为用这种办法会扩张网页的大小,所以文件太大了不相宜,别的IE8以下浏览器不扶持这种情势。用这种方法会加重客商端的CPU和内部存款和储蓄器负责,因为浏览器不会缓存这种图像。

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

 方今,Data U牧马人I scheme援救的门类有:

其情商为 data,并告知顾客端将那几个剧情作为 image/gif 格式来解析,需求深入分析的原委使用的是 base64 编码。它一直包涵了剧情但并不曾一个规定的能源地址。

  data:,文本数据

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:细说 Data UGL450I

关键词: html5 JavaScript Html/Css jquery ASP.NET

上一篇:H5游戏开拓,2个人用纸笔画出来的嬉戏
下一篇:没有了