澳门皇家娱乐场前述 Data U讴歌ZDXI

澳门皇家娱乐场前述 Data U讴歌ZDXI

细说 Data URI

2015/08/27 · HTML5 ·
URI

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

Data UEscortL 早在 一九九四 年就被提议,那个时候有为数不少个版本的 Data UEscortL Schema
定义陆陆续续出今后 VRML 之中,随后赶忙,当中的三个版本被提上了议事原案——将它做个三个嵌入式的财富放置在
HTML
语言之中。从 RFC 文书档案定稿的时日来看(壹玖玖柒年卡塔尔,它是八个十分受招待的表明。

Data UEnclaveIs 定义的情节能够当作小文件被插入到此外文书档案之中。U大切诺基I
是 uniform resource identifier 的缩写,它定义了接收内容的商量以至附带的连锁内容,假诺附带的相关内容是叁个地点,那么那时候的
U路虎极光I 也是多个 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

共谋前边的剧情,能够告诉客户端叁个纯粹下载财富之处,而 U宝马X5I
并不一定包括三个地点音讯,如(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 UOdysseyI 的格式十分简单,如下所示:

  • 先是局地是 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 U瑞虎I
    承载的源委,它能够是纯文本编写的内容,也可以是透过 base64编码
    的剧情。

重重时候我们运用 data UENCOREI
来显示一些较长的剧情,如后生可畏串二进制数据编码、图片等,接收 base64
编码能够让内容变得特别简约。而对图片来讲,在 gzip 压缩之后,base64
图片实际上比原图 gzip
压缩要大,体量扩展大概为四分之大器晚成,所以利用的时候必要权衡。

引子:在商量File里德r时,有个方法readAsDataU奥迪Q5L;然后看见打字与印刷出来的东西肖似于如下:【data:text/plain;base64,Y29tZSBvbiB0byBidXkgYSBwaWFubyE=】,那个事物居然像个超链接同样可以跳转,在新窗口中显得出文书档案内容,假若是图片还会来得出图片。于是相比较好奇那是什么牢固到图片的职位的,原本那串字符并不曾永世图片地点,而是将图纸的剧情一直饱含了进去,所以浏览器就平素分析出来了。具体用法见如下文章

☞ 兼容性

由于现身时间较早,近来主流的浏览器基本都协助 data ULacrosseI:

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

可是有个别浏览器对 data U福特ExplorerI 的运用存在限定:

  • 长度约束,长度超长,在局地使用下会招致内部存款和储蓄器溢出,程序崩溃

Opera 下限定为 4100 个字符,方今曾经去掉了那么些界定 IE 8+ 下限定为 32,766个字符(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 中允许行使 UXC60L 申明的地点,如 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);
}

上面包车型大巴一串注释就好像二个附属类小零器件,这一个附属类小零部件内容是多个誉为 myidBackground 的
base64 编码图片,在三个 class 叫做 myid 的 css
中用到了它。这里有几点必要注意:

  • _ANY_SEPARATOR 能够是自由内容
  • 在”附属类小构件”甘休地方供给增多得了符 _ANY_SEPARATOR,否则在 Vista 和
    Win7 的 IE7
    中会出错。
  • 附属类小零件代码注意不要被压缩工具给干掉了

此间存在一个坑:部分系统相称格局下的 IE8 也认知 css 中的 hack
符号 *,然则不扶持 mhtml,所以地点的内容不会生效。管理方案预计就唯有利用
IE 的标准注释了。

摘自: 

☞ HTTPS 下的平安提醒

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

澳门皇家娱乐场 2

MS 的解释是:

您正在查看的网址是个平平安安网址。它使用了 SSL (避孕套接字层卡塔尔或
PCT(保密通信手艺卡塔尔国那样的广安磋商来确认保证您所收发新闻的安全性。
当站点使用安全左券时,您提供的音信比如姓名或信用卡号码等都通过加密,别的人不可能读取。不过,那一个网页同期蕴涵未使用该安全协议的体系

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

浏览器在言之有序到三个 UCR-VI
的时候,会首先判定公约头,若是是以 http(s) 起头,它便会创建一个互联网链接下载能源,若是它发现公约头为 data:,便会将其当做三个Data U昂CoraI 能源开展解析。

澳门皇家娱乐场 3

而是从 chrome 的瀑布流,大家得以做这么的狐疑:

图中各种 Data URAV4I
都倡导了伏乞,可是情状都以 data(from cache),禁用缓存之后,依然那样。所以能够肯定,浏览器在下载源码分析成
DOM 的时候,会将 Data UKugaI 的能源拆解剖析出来,并缓存在地面,最终 Data U中华VI
种种对应位置都会倡导三遍呼吁,只是那个恳求还未有创制链接,就被察觉存在缓存的浏览器给拍死了。

Data U安德拉L 早在 一九九四年就被建议,那时有众八个本子的 Data U牧马人L Schema
定义陆续出今后 VRML 之中,随后赶忙,在那之中的二个版本被提上了议事原案——将它做个贰个嵌入式的能源放置在
HTML
语言之中。从 RFC 文书档案定稿的时刻来看(1996年卡塔尔,它是三个十分受接待的发明。

☞ 安全阀门

Data UWranglerI 在 IE 下有好多三沙约束,事实上,非常多 xss 注入也足以将 data U大切诺基I
的源流作为入口,使用 data U奥迪Q5I 绕过浏览器的过滤。

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福睿斯L
(uniform resource locator)(统一能源定位符)
,如:

☞ 扩大阅读

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

    1 赞 1 收藏
    评论

澳门皇家娱乐场 4

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

发表评论

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

网站地图xml地图