在网页中置放Base64编码文件

细说 Data URI

2015/08/27 · HTML5 ·
URI

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

Data URL 早在 1995 年就被提议,这个时候有许多个版本的 Data URL Schema
定义陆续出现在 VRML 之中,随后赶忙,其中的一个版本被提上了议案——将它做个一个嵌入式的资源放置在
HTML
语言之中。从 RFC 文档定稿的年月来看(1998年),它是一个很受欢迎的阐发。

Data URIs 定义的内容可以视作小文件被插入到别的文档之中。URI
是 uniform resource identifier 的缩写,它定义了接受内容的协商以及附带的相关内容,如若附带的相干内容是一个地点,那么此时的
URI 也是一个 URL (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

在网页中置放Base64编码文件。情商前边的内容,可以告诉客户端一个确切下载资源的地点,而 URI
并不一定蕴含一个地点音讯,如(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 URL 早在 1995
年就被提议,那么些时候有千千万万个本子的 Data URL Schema 定义陆续出现在
VRML
之中,随后不久,其中的一个版本被提上了议案——将它做个一个嵌入式的资源放置在
HTML 语言之中。从 RFC
文档定稿的小时来看(1998年),它是一个很受欢迎的表达。

世家兴许注意到了,网页上稍加图片的src或css背景图片的url前面跟了一大串字符,比如:data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D。那么那是何许啊?那是Data
URI scheme。
Data URI
scheme是在RFC2397中定义的,目标是将一些小的多寡,直接嵌入到网页中,从而不用再从表面文件载入。比如上面那串字符,其实是一张小图片,将这一个字符复制黏贴到火狐的地点栏中并转到,就能观察它了,一张1X36的白灰png图片。

☞ 格式

在网页中置放Base64编码文件。Data URI 的格式万分简易,如下所示:

  • 先是部分是 data: 协议头,它标识那一个内容为一个 data URI 资源。
  • 其次有些是 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 URI
    承载的情节,它可以是纯文本编写的始末,也可以是透过 base64编码
    的情节。

多多时候大家使用 data URI
来显现一些较长的情节,如一串二进制数据编码、图片等,采纳 base64
编码能够让内容变得尤为简约。而对图片来说,在 gzip 压缩之后,base64
图片实际上比原图 gzip
压缩要大,体积增添大概为三分之一,所以使用的时候必要权衡。

引子:在商讨FileReader时,有个格局readAsDataURL;然后看到打印出来的东西类似于如下:【data:text/plain;base64,Y29tZSBvbiB0byBidXkgYSBwaWFubyE=】,这些事物如故像个超链接一样可以跳转,在新窗口中显得出文档内容,假如是图表还会显示出图片。于是比较奇怪这是怎样定位到图片的地点的,原来那串字符并从未一定图片位置,而是将图纸的情节一向包涵了进来,所以浏览器就一向解析出来了。具体用法见如下小说

Data URIs 定义的内容可以当做小文件被插入到其余文档之中。URI 是
uniform resource identifier
的缩写,它定义了接受内容的合计以及附带的有关内容,如若附带的连带内容是一个地点,那么此时的
URI 也是一个 URL (uniform resource locator),如:

在上头的Data URI中,data表示收获数据的订立名称,image/png
是数据类型名称,base64
是数码的编码方法,逗号后边就是其一image/png文件base64编码后的数码。
当前,Data URI scheme协助的品类有:
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据
base64不难地说,它把部分 8-bit 数据翻译成标准 ASCII
字符,网上有成百上千免费的base64
编码息争码的工具,在PHP中可以用函数base64_encode() 举行编码,如echo
base64_encode(file_get_contents(‘wg.png’));
当前,IE8、Firfox、Chrome、Opera浏览器都协助那种小文件嵌入。
举个图片的事例:
网页中一张图纸可以如此突显:

☞ 兼容性

由于出现时间较早,近来主流的浏览器基本都协理 data URI:

  • Firefox 2+
  • Opera 7.2+
  • Chrome (所有版本)
  • Safari (所有版本)
  • Internet Explorer 8+

而是一些浏览器对 data URI 的使用存在限制:

  • 长度限制,长度超长,在有些施用下会导致内存溢出,程序崩溃

Opera 下限制为 4100 个字符,近日一度去掉了这么些界定 IE 8+ 下限制为 32,768
个字符(32kb),IE9 之后移除了那一个范围

1
2
Opera 下限制为 4100 个字符,目前已经去掉了这个限制
IE 8+ 下限制为 32,768 个字符(32kb),IE9 之后移除了这个限制
  • 在 IE 下,data URI 只同意被用到如下地方:
    • object (images only)
    • img、input type=image、link
    • CSS 中允许行使 URL 注明的地点,如 background
  • 在 IE 下,Data URI 的情节必须是经过编码转换的,如 “#”、”%”、非
    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

<img src=“;

☞ HTTPS 下的三沙提示

HTTPS 打开页面,当在 IE6、7 下使用 data URIs 时,会合到如下提示:

皇家赌场手机版 2

MS 的分解是:

你正在查阅的网站是个安全网站。它应用了 SSL (避孕套接字层)或
PCT(保密通讯技术)那样的拉萨协议来确保您所收发音讯的安全性。
当站点使用安全磋商时,您提供的音信例如姓名或信用卡号码等都通过加密,其外人无法读取。然则,这一个网页同时涵盖未利用该安全磋商的项目

很明朗,IE 嗅到了”未利用安全磋商的档次”。

浏览器在解析到一个 URI
的时候,会率先判断协议头,如若是以 http(s) 初阶,它便会确立一个网络链接下载资源,倘使它发现协议头为 data:,便会将其看成一个
Data URI 资源开展解析。

皇家赌场手机版 3

可是从 chrome 的瀑布流,大家可以做这么的估量:

图中每个 Data URI
都倡导了请求,不过情况都是 data(from cache),禁用缓存之后,依旧那样。所以可以判定,浏览器在下载源码解析成
DOM 的时候,会将 Data URI 的资源解析出来,并缓存在当地,最终 Data URI
每个对应地方都会倡导一回呼吁,只是那么些请求还未制造链接,就被发觉存在缓存的浏览器给拍死了。

Data URL 早在 1995
年就被指出,这多少个时候有许四个本子的 Data URL Schema
定义陆续出现在 VRML 之中,随后不久,其中的一个版本被提上了议案——将它做个一个嵌入式的资源放置在
HTML
语言之中。从 RFC 文档定稿的时刻来看(1998年),它是一个很受欢迎的注明。

探讨后边的情节,可以告诉客户端一个准儿下载资源的地点,而 URI
并不一定包罗一个地点新闻,如(demo):

也足以如此突显:

☞ 安全阀门

Data URI 在 IE 下有诸多平安范围,事实上,很多 xss 注入也足以将 data URI
的源头作为入口,使用 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 URIs
定义的内容可以视作小文件被插入到其余文档之中。URI
是 uniform resource identifier(统一资源标识符) 的缩写,它定义了接受内容的商谈以及附带的相关内容,如若附带的相干内容是一个地方,那么此时的
URI 也是一个 URL
(uniform resource locator)(统一资源定位符)
,如:

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

<imgsrc=“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D”/>

☞ 扩张阅读

  • 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

其情商为 data,并报告客户端将这些内容作为 image/gif
格式来分析,须要分析的始末使用的是 base64
编码。它直接包蕴了内容但并不曾一个确定的资源地址。

 

皇家赌场手机版,协和后边的始末,可以告知客户端一个准确无误下载资源的地方,而
URI
并不一定包括一个地址音信,如(demo):

皇家赌场手机版 5

我们把图像文件的始末一贯写在了HTML
文件中,那样做的功利是,节省了一个HTTP
请求。坏处呢,就是浏览器不会缓存那种图像。

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

☞ 格式

Data URI 的格式极度简单,如下所示:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>
  • 第一有的是 data: 协议头,它标识那么些情节为一个 data URI 资源。

  • 其次局地是 MIME
    类型,表示那串内容的变现格局,比如:text/plain,则以文件类型展现,image/jpeg,以
    jpeg 图片方式显得,同样,客户端也会以那么些 MIME 类型来分析数据。

  • 其三局地是编码设置,默许编码是 charset=US-ASCII,
    即数据部分的各类字符都会自动编码为
    %xx,关于编码的测试,可以在浏览器地址框输入分别输入上面两串内容,查看效果:

    皇家赌场手机版 6😉

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

    皇家赌场手机版 7😉

  • 第四片段是 base64
    编码设定,那是一个可接纳,base64 编码中仅包罗0-9,a-z,A-Z,+,/,=,其中 = 是用来编码补白的。

  • 最终一片段为这些 Data URI
    承载的情节,它可以是纯文本编写的始末,也足以是透过 base64编码
    的内容。

诸多时候大家选择 data URI
来展现一些较长的内容,如一串二进制数据编码、图片等,选用 base64
编码能够让内容变得尤其简便易行。而对图纸来说,在 gzip 压缩之后,base64
图片实际上比原图 gzip
压缩要大,体积扩大差不离为三分之一,所以拔取的时候须求权衡。

在线转换为Base64编码网站:

其情商为
data,并报告客户端将以此情节作为 image/gif 格式来分析,须求分析的情节使用的是
base64
编码。它直接包罗了内容但并没有一个确定的资源地址。

☞ 兼容性

由于出现时间较早,方今主流的浏览器基本都援救 data URI:

  • Firefox 2+
  • Opera 7.2+
  • Chrome (所有版本)
  • Safari (所有版本)
  • Internet Explorer 8+

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

  • 长度限制,长度超长,在有些选择下会促成内存溢出,程序崩溃

    Opera 下限制为 4100 个字符,目前已经去掉了这个限制
    IE 8+ 下限制为 32,768 个字符(32kb),IE9 之后移除了这个限制
    
  • 在 IE 下,data URI 只同意被用到如下地点:

    • object (images only)
    • img、input type=image、link
    • CSS 中允许使用 URL 申明的地点,如 background
  • 在 IE 下,Data URI 的始末必须是通过编码转换的,如 “#”、”%”、非
    US-ASCII 字符、多字节字符等,必须经过编码转换

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

MHTML 就是 MIME HTML,是 “Multipurpose Internet Mail Extensions
HyperText 马克up Language”
的简称,它就好像一个带着附件的邮件一般,如下所示:

皇家赌场手机版 8😉

/** 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); 
}

皇家赌场手机版 9😉

上方的一串注释就像是一个附件,这个附件内容是一个名叫 myidBackground 的 base64 编码图片,在一个 class 叫做 myid 的 css 中用到了它。这里有几点需要注意:
  • _ANY_SEPARATOR 可以是擅自内容
  • 在”附件”甘休地点要求加上得了符 _ANY_SEPARATOR,否则在 Vista 和
    Win7 的 IE7
    中会出错。
  • 附件代码注意不要被压缩工具给干掉了

此地存在一个坑:部分系统匹配形式下的 IE8 也认识 css 中的 hack 符号
*,可是不襄助 mhtml,所以地点的情节不会卓有功用。处理方案猜想就只有应用
IE 的标准化注释了。

皇家赌场手机版 10

☞ HTTPS 下的安全提示

HTTPS 打开页面,当在 IE6、7 下行使 data URIs 时,会看到如下指示:

皇家赌场手机版 11

MS 的分解是:

您正在查看的网站是个平安网站。它选取了 SSL (避孕套接字层)或
PCT(保密通信技术)那样的平安协议来确保您所收发音讯的安全性。
当站点使用安全磋商时,您提供的音讯例如姓名或信用卡号码等都经过加密,其旁人不可以读取。可是,这几个网页同时含有未使用该安全协议的类型

很引人侧目,IE 嗅到了”未使用安全磋商的花色”。

浏览器在分析到一个 URI 的时候,会首先判断协议头,即使是以 http(s)
初始,它便会确立一个网络链接下载资源,若是它发现协议头为
data:,便会将其视作一个 Data URI 资源进行分析。

皇家赌场手机版 12

而是从 chrome 的瀑布流,咱们得以做那样的臆想:

图中种种 Data URI 都提倡了请求,不过意况都是
data(from cache),禁用缓存之后,依旧那样。所以可以断定,浏览器在下载源码解析成
DOM 的时候,会将 Data URI 的资源解析出来,并缓存在地面,最终 Data URI
每个对应地方都会发起一回呼吁,只是那一个请求还未建立链接,就被发觉存在缓存的浏览器给拍死了。

☞ 格式

Data URI 的格式格外简短,如下所示(灰色部分是主旨,此外可挑选的顺序不可能更改):

data:[<mime type>][;charset=<charset>][;base64],<encoded data>
  • 率先有的是 data: 协议头,它标识这么些内容为一个
    data URI 资源。

  • 第二有的是 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 
    
  • 第四片段是 base64 编码设定,这是一个可挑选,base64
    编码中仅包蕴 0-9,a-z,A-Z,+,/,=,其中 = 是用来编码补白的。

  • 末尾一片段为那些 Data URI
    承载的情节,它能够是纯文本编写的内容,也可以是经过 base64编码
    的情节。

诸多时候大家运用 data URI
来显示一些较长的始末,如一串二进制数据编码、图片等,选拔 base64
编码可以让内容变得尤为简明。而对图片来说,在 gzip 压缩之后,base64
图片实际上比原图 gzip
压缩要大,体积扩大差不多为三分之一,所以选择的时候须求权衡。

☞ 安全阀门

Data URI 在 IE 下有诸多安全限制,事实上,很多 xss 注入也得以将 data URI
的源头作为入口,使用 data URI 绕过浏览器的过滤。

// 绕过浏览器过滤
http://example.com/text.php?t="><script src="data:text/html,<script>alert("Xss")</script><!--

此间可以很大程度的发散,很风趣,值得读者去探究。

☞ 兼容性

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

  • Firefox 2+
  • Opera 7.2+
  • Chrome (所有版本)
  • Safari (所有版本)
  • Internet Explorer 8+

而是部分浏览器对 data URI
的施用存在限制:

  • 长度限制,长度超长,在一部分施用下会招致内存溢出,程序崩溃

    Opera 下限制为 4100 个字符,目前已经去掉了这个限制
    IE 8+ 下限制为 32,768 个字符(32kb),IE9 之后移除了这个限制
    
  • 在 IE 下,data URI 只允许被用到如下地点:

    在 IE 下,Data URI
    的内容必须是通过编码转换的,如 “#”、”%”、非 US-ASCII
    字符、多字节字符等,必须透过编码转换

    • object (images only)
    • img、input type=image、link
    • CSS 中允许采纳 URL 注明的地点,如 background

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

MHTML 就是 MIME HTML,是 “Multipurpose
Internet Mail Extensions HyperText 马克up Language”
的简称,它似乎一个带着附件的邮件一般,如下所示:

/** 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 的准绳注释了。

☞ 扩充阅读

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

 

☞ HTTPS 下的安全提醒

HTTPS 打开页面,当在 IE6、7 下利用 data
URIs 时,会看到如下提示:

皇家赌场手机版 13

MS 的分解是:

你正在查看的网站是个平安网站。它接纳了
SSL (保险套接字层)或
PCT(保密通信技术)那样的平安协议来确保您所收发音讯的安全性。 
style=”font-size: 18px;”>当站点使用安全协议时,您提供的新闻例如姓名或信用卡号码等都通过加密,其余人无法读取。但是,那些网页同时富含未利用该安全协议的档次

很令人惊叹,IE
嗅到了”未利用安全协议的品类”。

浏览器在解析到一个 URI
的时候,会率先判断协议头,要是是以 http(s) 开始,它便会建立一个互连网链接下载资源,假使它发现协议头为 data:,便会将其看作一个
Data URI 资源拓展辨析。

皇家赌场手机版 14

可是从 chrome
的瀑布流,大家能够做那样的算计:

图中各种 Data URI
都提倡了请求,不过情状都是 data(from cache),禁用缓存之后,仍然那样。所以能够判定,浏览器在下载源码解析成
DOM 的时候,会将 Data URI 的资源解析出来,并缓存在该地,最后 Data URI
每个对应地方都会倡导一回呼吁,只是这么些请求还未创造链接,就被察觉存在缓存的浏览器给拍死了。

☞ 安全阀门

Data URI 在 IE
下有诸多安全范围,事实上,很多 xss 注入也得以将 data URI
的源头作为入口,使用 data URI 绕过浏览器的过滤。

// 绕过浏览器过滤
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

Leave a Comment.