当前位置:美高梅官方网站59599 > 前端科技 > 那个时候有很多个版本的 Data URL Schema

那个时候有很多个版本的 Data URL Schema

文章作者:前端科技 上传时间:2019-10-10

细说 Data URI

2015/08/27 · HTML5 · URI

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

Data U兰德XC60L 早在 1994 年就被提议,那个时候有广大个本子的 Data UHavalL Schema 定义时断时续出现在 VRML 之中,随后赶忙,在那之中的贰个本子被提上了议案——将它做个八个嵌入式的财富放置在 HTML 语言之中。从 RFC 文书档案定稿的年月来看(一九九七年),它是叁个备受应接的阐述。

Data U奇骏Is 定义的内容能够用作小文件被插入到别的文书档案之中。URAV4I 是 uniform resource identifier美高梅官方网站59599, 的缩写,它定义了接受内容的合计以至附带的相干内容,借使附带的相干内容是三个地点,那么此时的 U奥迪Q5I 也是一个 UCR-VL (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 编码。它直接包蕴了剧情但并不曾贰个规定的能源地址。

美高梅官方网站59599 1

☞ 格式

Data UEscortI 的格式十二分简练,如下所示:

  • 首先部分是 data: 公约头,它标志这几个内容为三个 data URubiconI 能源。
  • 其次部分是 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 U奥迪Q3I 承载的剧情,它能够是纯文本编写的开始和结果,也足以是通过 base64编码 的内容。

无数时候大家利用 data U安德拉I 来表现一些较长的内容,如一串二进制数据编码、图片等,选用 base64 编码能够让内容变得更其简便易行。而对图纸来讲,在 gzip 压缩之后,base64 图片实际上比原图 gzip 压缩要大,体积增添大约为四成,所以使用的时候需求权衡。

☞ 兼容性

由于现身时间较早,近些日子主流的浏览器基本都帮助 data UQashqaiI:

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

不过一些浏览器对 data URI 的施用存在限制:

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

Opera 下限制为 4100 个字符,最近已经去掉了这些范围 IE 8+ 下限制为 32,7陆十五个字符(32kb),IE9 之后移除了这么些限制

1
2
Opera 下限制为 4100 个字符,目前已经去掉了这个限制
IE 8+ 下限制为 32,768 个字符(32kb),IE9 之后移除了这个限制
  • 在 IE 下,data URAV4I 只同意被用到如下地点:
    • object (images only)
    • img、input type=image、link
    • CSS 中允许行使 UEnclaveL 评释的地点,如 background
  • 在 IE 下,Data U奥迪Q3I 的剧情必得是透过编码转变的,如 “#”、”%”、非 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 USportageIs 时,会看见如下提示:

美高梅官方网站59599 2

MS 的表明是:

你正在查阅的网址是个平平安安网址。它选取了 SSL (安全套接字层)或 PCT(保密通信手艺)那样的达州公约来确认保证您所收发音讯的安全性。
当站点使用安全磋商时,您提供的音讯比如姓名或银行卡号码等都因此加密,别的人不能读取。可是,那个网页同偶尔候包蕴未使用该安全磋商的连串

很鲜明,IE 嗅到了”未利用安全契约的项目”。

浏览器在条分缕析到贰个 UTucsonI 的时候,会率先剖断公约头,若是是以 http(s) 初阶,它便会创立二个互联网链接下载能源,假若它开采公约头为 data:,便会将其看做一个Data UTucsonI 能源扩充剖判。

美高梅官方网站59599 3

只是从 chrome 的瀑布流,我们得以做如此的思疑:

图中种种 Data U奥迪Q5I 都发起了央浼,然而情状都是 data(from cache),禁止使用缓存之后,还是那样。所以能够判别,浏览器在下载源码分析成 DOM 的时候,会将 Data U瑞虎I 的财富分析出来,并缓存在本地,最终 Data U智跑I 每种对应地方都会倡导一遍呼吁,只是那一个央浼还未创建链接,就被开掘存在缓存的浏览器给拍死了。

☞ 安全阀门

Data U兰德酷路泽I 在 IE 下有大多雅安范围,事实上,非常多 xss 注入也能够将 data U瑞虎I 的源头作为入口,使用 data UPAJEROI 绕过浏览器的过滤。

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><!--

此处能够十分的大程度的发散,很有趣,值得读者去追究。

☞ 增添阅读

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

    1 赞 1 收藏 评论

美高梅官方网站59599 4

本文由美高梅官方网站59599发布于前端科技,转载请注明出处:那个时候有很多个版本的 Data URL Schema

关键词: