Data Uri Schema的使用

最近看了下关于Data Uri的资料.前一篇是我转载的维基百科的内容.这篇主要讲使用.

Data URI Schema的利弊

如前文所讲.Data Uri主要是为了减少Http连接.如

<img src="http://www.google.com/logo.png"/>

替换成

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA
7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC" />

将负载由网络传输转移客户端.
客户端在解析网页时需要更多的时间去解码.同时如果该图被多次使用,那它将多次被解析,即浏览器不会对它做缓存.当然简单的解决办法是写到css中.

例如：

.logobg {
  background: url(data:…)
}

<div class=”navigation logobg”>..
helo, hello
<div class=”footer logobg”>…

<Data URI的利弊>里面提供了例子展示了当调用单个和多个图片时,普通的连接与data uri在性能上的差异.

当然Data URI还有一个弊端.那就是IE对它不支持.

Data URI Schema在XSS中的应用

另外它也可以解决js injection被屏蔽的问题...

例如:

<iframe src="data:text/html;base64,PHNjcmlwdD5hbGVydCgxKTwvc2NyaXB0Pg=="></iframe>

该相关内容可以见<XSS with Data URI Scheme>.内容详细介绍了data uri在xss中的使用,以及各浏览器之间的区别.

例子

在<data: URL tests>中提供了一系列对Data URI 的例子.可以作为平常的参考.