细说 Data URI

细说 Data URI

2015/08/27 · HTML5 ·
URI

原来的文章出处:
李靖(@Barret李靖)   

Data ULANDL 早在 1992 年就被建议,那个时候有那一个个版本的 Data U冠道L Schema
定义时有时无出现在 VRML 之中,随后不久,个中的八个版本被提上了议案——将它做个二个嵌入式的财富放置在
HTML
语言之中。从 RFC 文书档案定稿的时光来看(一九九七年),它是一个十分受应接的阐明。

Data U奥德赛Is 定义的内容能够视作小文件被插入到其余文书档案之中。UMuranoI
是 uniform resource identifier 的缩写,它定义了接受内容的合计以及附带的相关内容,假使附带的相干内容是一个地址,那么此时的
USportageI 也是一个 ULacrosseL (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 编码。它一直包括了内容但并从未三个规定的能源地址。

永利澳门游戏网址304 1

Data U纳瓦拉L 早在 1995年就被提出,这个时候有过四个本子的 Data UTiggoL Schema 定义断断续续出现在
VRML
之中,随后不久,当中的二个版本被提上了议案——将它做个二个嵌入式的能源放置在
HTML 语言之中。从 RFC
文书档案定稿的日子来看(壹玖玖陆年),它是贰个异常受接待的表明。

☞ 格式

Data UPRADOI 的格式十一分简约,如下所示:

  • 先是局地是 data: 公约头,它标志这几个剧情为二个 data UCRUISERI 能源。
  • 第二盘部是 MIME
    类型,表示那串内容的变现情势,举例:text/plain,则以文件类型体现,image/jpeg,以
    jpeg 图片格局显得,同样,客商端也会以这一个 MIME 类型来深入分析数据。
  • 其三局部是编码设置,暗中同意编码是 charset=US-ASCII,
    即数据部分的每种字符都会自动编码为 %xx永利澳门游戏网址304,,关于编码的测验,能够在浏览器地址框输入分别输入上边两串内容,查看效果:

// 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 UHighlanderI
    承载的剧情,它能够是纯文本编写的剧情,也足以是透过 base64编码
    的源委。

洋洋时候咱们利用 data URAV4I
来展现一些较长的内容,如一串二进制数据编码、图片等,选择 base64
编码能够让内容变得更为简便易行。而对图纸来讲,在 gzip 压缩之后,base64
图片实际上比原图 gzip
压缩要大,体量扩充大概为30%,所以利用的时候必要权衡。

Data URubiconIs 定义的内容能够视作小文件被插入到任何文书档案之中。U揽胜极光I 是
uniform resource identifier
的缩写,它定义了接受内容的磋商以及附带的有关内容,如若附带的连带内容是贰个地点,那么此时的
U奥德赛I 也是二个 URubiconL (uniform resource locator),如:

☞ 兼容性

出于出现时间较早,近些日子主流的浏览器基本都扶助 data U福睿斯I:

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

而是有的浏览器对 data U福睿斯I 的采取存在限制:

  • 长度限制,长度超长,在部分使用下会造成内部存款和储蓄器溢出,程序崩溃

Opera 下限制为 4100 个字符,近日一度去掉了那几个限制 IE 8+ 下限制为 32,7六拾陆个字符(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 中允许使用 UXC90L 注解的地点,如 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 的法则注释了。

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

☞ HTTPS 下的安全提醒

HTTPS 打开页面,当在 IE6、7 下采用 data ULANDIs 时,会看出如下提示:

永利澳门游戏网址304 2

MS 的表达是:

您正在查阅的网址是个平平安安网站。它利用了 SSL (保险套接字层)或
PCT(保密通信手艺)那样的平安磋商来确定保证您所收发新闻的安全性。
当站点使用安全公约时,您提供的新闻比如姓名或信用卡号码等都经过加密,别的人不大概读取。但是,这么些网页同一时候含有未采取该安全合同的种类

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

浏览器在深入分析到叁个 UPRADOI
的时候,会首先剖断公约头,假若是以 http(s) 开始,它便会创设叁个互连网链接下载资源,假如它开采公约头为 data:,便会将其看做一个Data UEnclaveI 能源举办深入分析。

永利澳门游戏网址304 3

可是从 chrome 的瀑布流,大家得以做这样的思疑:

图中各种 Data U途达I
都提倡了央浼,可是意况都以 data(from cache),禁止使用缓存之后,仍旧那样。所以能够判明,浏览器在下载源码分析成
DOM 的时候,会将 Data U奥迪Q5I 的财富深入分析出来,并缓存在本地,最终 Data U昂CoraI
种种对应地方都会倡导壹次呼吁,只是这些央求还未制造链接,就被开采存在缓存的浏览器给拍死了。

协调后边的内容,可以告诉客商端三个纯正下载财富的地点,而 ULacrosseI
并不一定富含三个地点音讯,如(demo):

☞ 安全阀门

Data U陆风X8I 在 IE 下有多数日喀则范围,事实上,相当多 xss 注入也能够将 data UHighlanderI
的源头作为入口,使用 data U本田UR-VI 绕过浏览器的过滤。

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:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

☞ 扩大阅读

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

    1 赞 1 收藏
    评论

永利澳门游戏网址304 4

其情商为 data,并告诉客商端将那些内容作为 image/gif
格式来分析,要求深入分析的原委使用的是 base64
编码。它直接包涵了剧情但并未贰个分明的财富地址。

发表评论

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