【WEB安全】WEB安全基础知识系列-DATA URI

1.DATA URI 释义:

• 举例：data:text/html;charset=utf-8;base64,PGh0bWw+PGJvZHk+aGkhISEhPC9ib2R5PjwvaHRtbD4=
  Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。
  
  
  data表示取得数据的协定名称，
  
  
  text/html 是数据类型名称，
  
  
  charset=utf-8;是编码格式，
  
  
  base64 是数据的编码方法，
  
  
  逗号后面就是这个image/png文件base64编码后的数据。

• 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图片数据
  2.应用举例

• 1.直接挂载<object data=data:text/html;base64,PHNjcmlwdD5hbGVydCgieHNzIik8L3NjcmlwdD4=></object>页面

• 会弹’xss’,如下图所示
• 
• 2.压缩图片，减少网络请求，提高运行效率，图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使
• 用该字符串代替图像地址。那么图片的 base64 编码长什么样子呢？举个栗子。www.google.com 的首页搜索框右侧
• 的搜索小图标使用的就是base64编码。我们可以看到：
• 

1 2 3 4

//在css里的写法 #fkbx-spch, #fkbx-hspch { background: url(data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=) no-repeat center; }

1 2

//在html代码img标签里的写法 <i<span style="font-size: 14pt;" data-wiz-span="data-wiz-span">mg src=</span>``<span style="font-size: 14pt;" data-wiz-span="data-wiz-span">"data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///yH5B…EoqQqJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs="</span>``<span style="font-size: 14pt;" data-wiz-span="data-wiz-span">&gt;</span>

上面分别是图片的 base64 编码在 css 里面的写法和在 html<img> 标签里的写法。base64 编码长得就是这个样子，

当然 base64 编码不仅仅运用在图片编码，
4.总结与思考:

• 正确的利用此类协议可以更好的屏蔽XSS漏洞

• 同时运用BASE64对图像转换，可以有效的减少网络流量，节省带宽，此类应用在雪碧图中，表现的更为明显
  5.引用:

• http://www.cnblogs.com/coco1s/p/4375774.html

• http://26836659.blogcn.com/articles/data-url.html
• http://www.pjhome.net/web/html5/encodeDataUrl.htm