JS魔法堂:Data URI Scheme介绍

一、前言                                

  上周五公司内部的Any Topic Conf.上我和同事们分享了这个主题,有同事说这个有用,有同事说这个没啥用,后来还延伸到网站性能的话题上,大家讨论的激烈程度让我觉得这次选题还不错。本篇先不管到底有用与否,仅仅记录理论知识。也希望大家一起来分享实战经验啊!

二、从HTTP URI Scheme入手                        

  对于 <a href="http://github.com">HTTP URI Scheme</a> 我想大家都应该很熟悉了,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:[<mime type>][;charset=<charset>][;<encoding>],<encoded data>

  ①.  data :协议名称;

  ②.  [<mime type>] :可选项,数据类型(image/png、text/plain等)

  ③.  [;charset=<charset>] :可选项,源文本的字符集编码方式

  ④.  [;<encoding>] :数据编码方式(默认US-ASCII,BASE64两种)

  ⑤.  ,<encoded data> :编码后的数据

 注意:

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

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

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

  [d]. 若 ,<encoded data> 不是以 [;<encoding>] 方式编码后的数据,则会报异常

四、示例                          

/**
 * 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()样式的
 */
<link rel="stylesheet" type="text/css" href="data:text/css;charset=gbk,#pseudo{color:red;}"/>

//data:text/javascript,javascript代码,示例:
<script type="text/javascript" charset="gbk" src="data:text/javascript;charset=gbk,alert('%D6%D0%CE%C4')"></script>

五、优点&缺点                        

优点:

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

缺点:

  ①. 不会被浏览器缓存起来;

  ②. 移动端性能比http URI scheme低。

六、优化方案                          

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

七、浏览器支持                          

①. 支持

  Opera 7.2+ data URI 必须小于4100字符

  IE8+ data URI必须小于32k(IE8不支持js的data URI)

  Chrome、FF和Safari无限制

②. 不支持

  IE567

八、标签支持                            

  嵌入图片的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以附件的形式附加到页面页面上,具体示例如下:

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

   注意: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="><script src="data:text/html,<script>alert("Xss")</script><

    2. 批量请求图片

$.get('http://imgs.foo.com', {ids:[1,2,3,4,5,6,7]}, function(data){
   var imgs = []
   data.each(function(i, dataUri){
     imgs.push($(['<img src="data:image/jpeg;base64,', dataUri, '"/>'].join('')))
   })
   $(body).append(imgs)
})

十二、完全理解Base64编码                      

  Base64字符集: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

  字节与字符映射关系(十进制):从0开始到63

  原理:

  对以某编码方式编码后的字节数组为对象,以3个字节为一组,按顺序排列24bit数据,然后以6bit一组分成4组;再在每组的最高位补2个0凑足一个字节。这时一组就有4个字节了。若字节数组不是3的倍数,那么最后一组就填充1到2个0字节。 然后按Base64编码方式(就是映射关系)对字节数组进行解码,就会得到平时看到的Base64编码文本。对于字节数组不是3的倍数,最后一组填充1到2个0字节的情况,填补的0字节对应的是=(等号)。

  示例:

 ①. 对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=

十三、总结                          

  Data URI Scheme就介绍到这里吧,各位一起来分享实战经验吧!

十四、THANKS                          

http://www.cnblogs.com/hustskyking/p/data-uri.html(待整理)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏進无尽的文章

简述OC语言

对于一门语言的学习是需要时间领悟的,而对于一些原理性的问题,我们需要清楚其核心思想,知其然而知其所以然,这样才能有利于自己的后续发展。本文只是简述,没有面面具到...

24420
来自专栏java一日一条

2015年Java开发岗位面试题归类

3. 说说你知道的几个Java集合类:list、set、queue、map实现类咯。。。

10710
来自专栏CDA数据分析师

工具 | 很全的 Python 面试题

Python语言特性 1 Python的函数参数传递 看两个例子: ? 所有的变量都可以理解是内存中一个对象的“引用”,或者,也可以看似c中void*的感觉。 ...

1.4K90
来自专栏木木玲

Netty 源码解析 ——— AdaptiveRecvByteBufAllocator

36920
来自专栏Charlie's Road

<Solidity学习系列四>使用编译器

Solidity存储库的一个构建目标是solc,solidity命令行编译器。 使用solc --help为您提供所有选项的解释。 编译器可以生成各种输出,范围...

16720
来自专栏Kirito的技术分享

JAVA 拾遗--Future 模式与 Promise 模式

写这篇文章的动机,是缘起于微信闲聊群的一场讨论,粗略整理下,主要涉及了以下几个具体的问题: 同步,异步,阻塞,非阻塞的关联及区别。 JAVA 中有 callb...

3.1K100
来自专栏Hongten

java开发_UUID(Universally Unique Identifier,全局唯一标识符)和GUID(Globally Unique Identifier,全球唯一标识符)

GUID: 即Globally Unique Identifier(全球唯一标识符) 也称作 UUID(Universally Unique IDentifie...

12610
来自专栏生信技能树

linux命令行文本操作一文就够

主要是 awk/grep/sed这三驾马车,加上vi这个神器,最后辅助一些小工具,包括 wc,cat,diff,join,paste,cut,uniq 这里 简...

52290
来自专栏草根专栏

使用 Moq 测试.NET Core 应用 -- Mock 属性

第一篇文章, 关于Mock的概念介绍: https://www.cnblogs.com/cgzl/p/9294431.html

12640
来自专栏LhWorld哥陪你聊算法

【Linux篇】--awk的使用

awk是一个强大的文本分析工具。相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大。 简单来说awk就是把文件逐行的读入,(空格...

15220

扫码关注云+社区

领取腾讯云代金券