最近看了下关于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 的例子.可以作为平常的参考.