【亚洲必赢官网】在网页中放置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

协议前面的始末,可以告知客户端一个准确下载资源的地点,而 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图片。

☞ 格式

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
压缩要大,体积扩大大概为三分之一,所以选取的时候需求权衡。

Data URIs 定义的情节可以作为小文件被插入到任何文档之中。URI 是
uniform resource identifier
的缩写,它定义了接受内容的说道以及附带的连带内容,假如附带的连锁内容是一个地方,那么此时的
URI 也是一个 URL (uniform resource locator),如:

引子:在研究FileReader时,有个艺术readAsDataURL;然后看到打印出来的事物类似于如下:【data:text/plain;base64,Y29tZSBvbiB0byBidXkgYSBwaWFubyE=】,这几个事物居然像个超链接一样可以跳转,在新窗口中体现出文档内容,如若是图形还会来得出图片。于是比较好奇那是何许定位到图片的职位的,原来那串字符并从未稳定图片地点,而是将图纸的情节一直包涵了进来,所以浏览器就一贯解析出来了。具体用法见如下小说

在上头的Data URI中,data代表收获数据的签订名称,image/png
是数据类型名称,base64
是数据的编码方法,逗号前边就是其一image/png文件base64编码后的数量。
【亚洲必赢官网】在网页中放置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
每个对应位置都会发起一遍呼吁,只是那几个请求还未建立链接,就被察觉存在缓存的浏览器给拍死了。

研讨前边的情节,可以告诉客户端一个准儿下载资源的地方,而 URI
并不一定包括一个地方音信,如(demo):

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

也得以如此显示:

☞ 安全阀门

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

Data URIs
定义的始末可以视作小文件被插入到其余文档之中。URI
是 uniform resource identifier(统一资源标识符) 的缩写,它定义了接受内容的情商以及附带的连带内容,假设附带的连锁内容是一个地点,那么此时的
URI 也是一个 URL
(uniform resource locator)(统一资源定位符)
,如:

<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

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

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

 

亚洲必赢官网 5

说道前面的情节,可以告诉客户端一个可相信下载资源的地点,而
URI
并不一定包括一个地址音讯,如(demo):

大家把图像文件的始末向来写在了HTML
文件中,那样做的益处是,节省了一个HTTP
请求。坏处呢,就是浏览器不会缓存那种图像。

☞ 格式

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
压缩要大,体积增添大概为三分之一,所以使用的时候须求权衡。

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

在线转换为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 马克(Mark)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 的尺度注释了。

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

☞ HTTPS 下的张家界提示

HTTPS 打开页面,当在 IE6、7 下选用 data URIs 时,见面到如下提醒:

亚洲必赢官网 10

MS 的表明是:

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

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

浏览器在解析到一个 URI 的时候,会首先判断协议头,假设是以 http(s)
开头,它便会确立一个网络链接下载资源,假诺它发现协议头为
data:,便会将其用作一个 Data URI 资源开展解析。

亚洲必赢官网 11

不过从 chrome 的瀑布流,大家得以做这么的可疑:

图中各样 Data URI 都提倡了请求,可是情状都是
data(from cache),禁用缓存之后,依然那样。所以可以判明,浏览器在下载源码解析成
DOM 的时候,会将 Data URI 的资源解析出来,并缓存在地头,最后 Data URI
每个对应地方都会发起两次呼吁,只是那一个请求还未建立链接,就被发现存在缓存的浏览器给拍死了。

亚洲必赢官网 12

☞ 安全阀门

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 的格式非常简练,如下所示(肉色部分是重点,其余可接纳的逐条无法更改):

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
压缩要大,体积增加大致为三分之一,所以采纳的时候需求权衡。

☞ 扩充阅读

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

 

☞ 兼容性

由于出现时间较早,近年来主流的浏览器基本都支持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 Markup 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 的标准化注释了。

☞ 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
网站地图xml地图