DataURIScheme,base64

一、从HTTP URI Scheme入手　　　　　　　　　　　　　　　　　　　　　　　　

  对于 HTTP URI Scheme 我想大家都应该很熟悉了，href属性值http://github.com就是HTTP URI Scheme，那么什么是DATA URI Scheme呢？其实就是形如data:text/jpeg;base64,XINGSXXIANGJIJIGSAG==的资源链接，一般出现在img元素的src属性。

  DATA URI Scheme的作用，一般就是将经过Base64编码的数据嵌入网页中，从而减少请求资源的链接数。上面的DATA URI Scheme中 base64, 后的字符就是经过base64编码后的数据，浏览器会对其解码并渲染该图片资源。

二、Data URI Scheme格式　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  data:_①[]_②[;charset=]_③[;]_④,_⑤

  ①.  data ：协议名称；

  ②.  [] ：可选项，数据类型（image/png、text/plain等）

  ③.  [;charset=] ：可选项，源文本的字符集编码方式

  ④.  [;] ：数据编码方式（默认US-ASCII，BASE64两种）

  ⑤.  , ：编码后的数据

 注意：

　[a].  [][;charset=] 的缺省值为HTTP Header 中Content-Type的字段值；

   [b].  [;] 的默认值为US-ASCII，就是每个字符会编码为%xx的形式；

　[c].  [;charset=] 对于IE是无效的，需要通过 charset 设置编码方式；而Chrome则是 charset 属性设置编码无效，要通过 [;charset=] 来设置；FF就两种方式均可。

  [d]. 若 , 不是以 [;] 方式编码后的数据，则会报异常

三、示例　　　　　　　　　　　　　　　　　　　　　　　　　　

/**
 * data:,文本数据
 * data:text/plain,文本数据
 * data:text/html,HTML代码
 * data:text/css;base64,css代码
 * data:text/Javascript;base64,Javascript代码
 * data:image/x-icon;base64,base64编码的icon图片数据
 * data:image/gif;base64,base64编码的gif图片数据
 * data:image/png;base64,base64编码的png图片数据
 * data:image/jpeg;base64,base64编码的jpeg图片数据，示例：
 */
body { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC");}

/**
 * data:text/css,css代码，示例：
 * 注意：下列方式是无法设置background-image:url()样式的
 */


//data:text/Javascript,Javascript代码，示例：

四、优点&缺点　　　　　　　　　　　　　　　　　　　　　　　　

　优点：

　　①. 减少资源请求链接数。

　缺点：

五、优化方案　　　　　　　　　　　　　　　　　　　　　　　　　　

　通过在css文件的background-image样式规则使用Data URI Scheme，使其随css文件一同被浏览器缓存起来。

六、浏览器支持　　　　　　　　　　　　　　　　　　　　　　　　　　

七、标签支持　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  嵌入图片的object、img、input[type=image]、script、link和css规则中的background和backgroundImage属性

八、IE678的polyfill方案——MHTML　　　　　　　　　　　　　　　　

  MHTML（MIME HTML，Multipurpose Internet Mail Extensions HyperText Markup Language），就是将Data URI以附件的形式附加到页面页面上，具体示例如下：

/*!@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中使用。

   注意：1、boundary字段值可自定义；

           2、附件的末行必须为boundary字段值；

           3、附件内容不能被压缩工具擦写掉；

           4、由于高版本的IE在使用IE8兼容模式时能认识*这个css hack，但却不支持mhtml，所以会导致背景图片失效。应该采用IE的条件注释更为稳妥。

九、安全问题　　　　　　　　　　　　　　　　　　　　　　　　　　　

   当在IE6/7的HTTPS页面中使用Data URI时会提醒

   MS 的解释是：

您正在查看的网站是个安全网站。它使用了 SSL （安全套接字层）或 PCT（保密通讯技术）这样的安全协议来确保您所收发信息的安全性。
当站点使用安全协议时，您提供的信息例如姓名或信用卡号码等都经过加密，其他人无法读取。然而，这个网页同时包含未使用该安全协议的项目。

   也就是说问题在scheme字段上，由于全站都采用https的scheme，而data scheme则被视为不安全的协议了。

十、应用　　　　　　　　　　　　　　　　　　　　　　　　　　　

    1. 绕过浏览器过滤

// 绕过浏览器过滤
http://example.com/text.php?t="><

    2. 批量请求图片

   var imgs = []
   data.each(function(i, dataUri){
     imgs.push($([‘‘].join(‘‘)))
   })
   $(body).append(imgs)
})

十一、完全理解Base64编码　　　　　　　　　　　　　　　　　　　　　　

  Base64字符集： ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/ 

 ①. 对AB进行ASCII编码：得到A(65)B(66)
 ②. 转成二进制形式：得到A（01000001）B（01000010）
 ③. 以3个字节为一组，非3的倍数补0字节：010000010100001000000000
 ④. 以6bit为一组后高位补两个0：(00 010000)(00 010100)(00 001000)(00 000000)
 ⑤. 转为十进制：(16)(20)(8)(0)
 ⑥. 根据映射关系解码：QUI=

From：

  http://www.cnblogs.com/hustskyking/p/data-uri.html

  http://www.cnblogs.com/fsjohnhuang/p/3903688.html

Data URI Scheme,base64