细说 Data URI

Data URL 早在 1995 年就被提出，那个时候有很多个版本的 Data URL Schema 定义陆续出现在 VRML 之中，随后不久，其中的一个版本被提上了议案——将它做个一个嵌入式的资源放置在 HTML 语言之中。从 RFC 文档定稿的时间来看（1998年），它是一个很受欢迎的发明。

Data URI 定义的内容可以作为小文件被插入到其他文档之中。URI 是 uniform resource identifier 的缩写，它定义了接受内容的协议以及附带的相关内容，如果附带的相关内容是一个地址，那么此时的 URI 也是一个 URL (uniform resource locator)，如：



    

  1. ftp://10.1.1.10/path/to/filename.ext
    2. 

  2. http://example.com/source/id
    3. 



协议后面的内容，可以告诉客户端一个准确下载资源的地址，而 URI 并不一定包含一个地址信息，如(demo)：




    

  1. data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7
    2. 



其协议为 data，并告诉客户端将这个内容作为 image/gif 格式来解析，需要解析的内容使用的是 base64 编码。它直接包含了内容但并没有一个确定的资源地址。


格式


Data URI 的格式十分简单，如下所示：




    

  1. data:[<mime type>][;charset=<charset>][;base64],<encoded data>
    2. 



    

  • 第一部分是 data: 协议头，它标识这个内容为一个 data URI 资源。
    • 

  • 第二部分是 MIME 类型，表示这串内容的展现方式，比如：text/plain，则以文本类型展示，image/jpeg，以 jpeg 图片形式展示，同样，客户端也会以这个 MIME 类型来解析数据。
    • 

  • 第三部分是编码设置，默认编码是 charset=US-ASCII, 即数据部分的每个字符都会自动编码为 %xx，关于编码的测试，可以在浏览器地址框输入分别输入下面两串内容，查看效果：

    

      

    1. // output: ä½ å¥½ -> 使用默认的编码展示，故乱码
      2. 

    2. data:text/html,你好  
      3. 

    3. // output: 你好 -> 使用 UTF-8 展示
      4. 

    4. data:text/html;charset=UTF-8,你好 
      5. 

    5. // output: 浣犲ソ -> 使用 gbk 展示（浏览器默认编码 UTF-8，故乱码）
      6. 

    6. data:text/html;charset=gbk,你好 
      7. 

    7. // output: 你好 -> UTF-8 编码，内容先使用 base64 解码，然后展示
      8. 

    8. data:text/html;charset=UTF-8;base64,5L2g5aW9 
      9. 

    

    • 

  • 第四部分是 base64 编码设定，这是一个可选项，base64 编码中仅包含 0-9,a-z,A-Z,+,/,=，其中 = 是用来编码补白的。
    • 

  • 最后一部分为这个 Data URI 承载的内容，它可以是纯文本编写的内容，也可以是经过 base64编码 的内容。
    • 



很多时候我们使用 data URI 来呈现一些较长的内容，如一串二进制数据编码、图片等，采用 base64 编码可以让内容变得更加简短。而对图片来说，在 gzip 压缩之后，base64 图片实际上比原图 gzip 压缩要大，体积增加大约为三分之一，所以使用的时候需要权衡。


兼容性


由于出现时间较早，目前主流的浏览器基本都支持 data URI：


    

  • Firefox 2+
    • 

  • Opera 7.2+
    • 

  • Chrome (所有版本)
    • 

  • Safari (所有版本)
    • 

  • Internet Explorer 8+
    • 



但是部分浏览器对 data URI 的使用存在限制：


    

  • 长度限制，长度超长，在一些应用下会导致内存溢出，程序崩溃
    

    

      

    1. Opera 下限制为 4100 个字符，目前已经去掉了这个限制
      2. 

    2. IE 8+ 下限制为 32,768 个字符（32kb），IE9 之后移除了这个限制
      3. 

    

    • 

  • 在 IE 下，data URI 只允许被用到如下地方：

      

    • object (images only)
      • 

    • img、input type=image、link
      • 

    • CSS 中允许使用 URL 声明的地方,如 background
      • 

    

    • 

  • 在 IE 下，Data URI 的内容必须是经过编码转换的，如 “#”、”%”、非 US-ASCII 字符、多字节字符等，必须经过编码转换
    • 



低版本IE的解决之道 - MHTML


MHTML 就是 MIME HTML，是 “Multipurpose Internet Mail Extensions HyperText Markup Language” 的简称，它就像一个带着附件的邮件一般，如下所示：




    

  1. /** FilePath: http://example.com/test.css */
    2. 

  2. /*!@ignore
    3. 

  3. Content-Type: multipart/related; boundary="_ANY_SEPARATOR"
    4. 

    5. 

  5. --_ANY_SEPARATOR
    6. 

  6. Content-Location:myidBackground
    7. 

  7. Content-Transfer-Encoding:base64
    8. 

    9. 

  9. iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
    10. 

  10. --_ANY_SEPARATOR--
    11. 

  11. */
    12. 

    13. 

  13. .myid {
    14. 

  14.   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==");
    15. 

  15.   *background-image: url(mhtml:http://example.com/test.css!myidBackground); 
    16. 

  16. }
    17. 



上方的一串注释就像是一个附件，这个附件内容是一个名叫 myidBackground 的 base64 编码图片，在一个 class 叫做 myid 的 css 中用到了它。这里有几点需要注意：


    

  • _ANY_SEPARATOR 可以是任意内容
    • 

  • 在”附件”结束位置需要加上结束符 _ANY_SEPARATOR，否则在 Vista 和 Win7 的 IE7 中会出错。
    • 

  • 附件代码注意不要被压缩工具给干掉了
    • 



这里存在一个坑：部分系统兼容模式下的 IE8 也认识 css 中的 hack 符号 *，但是不支持 mhtml，所以上面的内容不会生效。处理方案估计就只有使用 IE 的条件注释了。


HTTPS 下的安全提示


HTTPS 打开页面，当在 IE6、7 下使用 data URIs 时，会看到如下提醒：




MS 的解释是：


您正在查看的网站是个安全网站。它使用了 SSL （安全套接字层）或 PCT（保密通讯技术）这样的安全协议来确保您所收发信息的安全性。 

当站点使用安全协议时，您提供的信息例如姓名或信用卡号码等都经过加密，其他人无法读取。然而，这个网页同时包含未使用该安全协议的项目。


很明显，IE 嗅到了”未使用安全协议的项目”。


浏览器在解析到一个 URI 的时候，会首先判断协议头，如果是以 http(s) 开头，它便会建立一个网络链接下载资源，如果它发现协议头为data:，便会将其作为一个 Data URI 资源进行解析。




但是从 chrome 的瀑布流，我们可以做这样的猜测：


图中每个 Data URI 都发起了请求，不过状态都是 data(from cache)，禁用缓存之后，依然如此。所以可以断定，浏览器在下载源码解析成 DOM 的时候，会将 Data URI 的资源解析出来，并缓存在本地，最后 Data URI 每个对应位置都会发起一次请求，只是这个请求还未建立链接，就被发现存在缓存的浏览器给拍死了。


安全阀门


Data URI 在 IE 下有诸多安全限制，事实上，很多 xss 注入也可以将 data URI 的源头作为入口，使用 data URI 绕过浏览器的过滤。




    

  1. // 绕过浏览器过滤
    2. 

  2. http://example.com/text.php?t="><script src="data:text/html,<script>alert("Xss")</script><!--
    3. 



这里可以很大程度的发散，很有意思，值得读者去深究。


扩展阅读

				


				
时间： 2024-08-29 05:01:54

		
		


		


	

	
	

		


		
细说 Data URI的相关文章


								

		

			

                CSS中使用image data URI来处理图片的方法
			

		

		

									

				  即将图片资源转换为 base64 字符串格式嵌到页面或样式中.这样连图片的请求链接都省了. 如: 使用方式 CSS Code复制内容到剪贴板 /** 数据格式 **/ data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAA lwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAAB			

		

	

				

		

			

                Data URI(转)
			

		

		

									

				Data URL 早在 1995 年就被提出,那个时候有很多个版本的 Data URL Schema 定义陆续出现在 VRML 之中,随后不久,其中的一个版本被提上了议案--将它做个一个嵌入式的资源放置在 HTML 语言之中.从 RFC 文档定稿的时间来看(1998年),它是一个很受欢迎的发明. Data URIs 定义的内容可以作为小文件被插入到其他文档之中.URI 是 uniform resource identifier 的缩写,它定义了接受内容的协议以及附带的相关内容,如果附带的相关内容			

		

	

				

		

			

                javascript中Data URI使用详解
			

		

		

									

				Data URI,不是URL URL是uniform resource locator的缩写,在web中的每一个可访问资源都有一个URL地址,例如图片,HTML文件,js文件以及style sheet文件,我们可以通过这个地址去download这个资源. 其实URL是URI的子集,URI是uniform resource identifier的缩写.URI是用于获取资源,包括其附加的信息的一种协议.附加信息可能是地址,也可能不是地址,如果是地址,那么这时URI就变成URL了.注意的是data U			

		

	

				

		

			

                图片base64编码利器：在线 Data URI 生成工具 – Duri.me
			

		

		

									

				这篇文章介绍一款在线的图片 base64 编码利器 -Duri.me.data URI 图片是 base64编码的图片文件,可以嵌入到 HTML 或者 CSS 文件中,能够减少 HTTP 请求,提高网页加载速速. Duri.me是一个简单但非常有用的 Web 应用程序,可以快速的在线生成图片文件的data URI.Duri.me使用非常简单,把图片拖放到框内,然后点击 Generate Base-64 Code 按钮就会自动生成编码,Duri.me帮你生成了图片.CSS和Base64字符串三种形			

		

	

				

		

			

                android 根据uri获取真实路径
			

		

		

									

				1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 public static String getRealFilePath( final Context context, final Uri uri ) {           if ( null == uri ) return null;           final String scheme = uri.getScheme();         String			

		

	

				

		

			

                intent-filter 之 data
			

		

		

									

				转:http://blog.sina.com.cn/s/blog_4b650d650100kq55.html intent-filter 之 data 「scheme, host, port, mimeType, path, pathPrefix, pathPattern」 之前一直搞不很明白 AndroidManifest.xml 中 activity 标签下的 intent-filter 中 data 标签的属性含义,今天认真看了 Dev Guide,又在网上查询了大量相关资料,现把 dat			

		

	

				

		

			

                PHP中data/base64数据流转图片文件输出例子
			

		

		

									

				我们来看看data/base64是什么吧 什么是data:image/*;base64? 答:这是Data URI scheme. 还不懂? Ps:Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入. 例如: data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYW			

		

	

				

		

			

                用Visual Studio 2010编写Data Url生成工具C#版
			

		

		

									

				声明:本文系本人依照真实经历原创,未经许可,谢绝转载. 此文百度经验版本:如何用Visual Studio 2010打造Data Url生成工具 源码下载:用Visual Studio 2010编写Data Url生成工具C#源码 什么是Data Url呢?Data URI scheme是在RFC2397中定义的,目的是将一些小的数据,直接嵌入到网页中,从而不用再从外部文件载入. 例如: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUh			

		

	

				

		

			

                data:image/png;base64
			

		

		

									

				大家可能注意到了,网页上有些图片的src或css背景图片的url后面跟了一大串字符,比如: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAAA3NCSVQICAjb4U/gAAAABlBMVEX///+ZmZmOUEqyAAAAAnRSTlMA/1uRIrUAAAAJcEhZcwAACusAAArrAYKLDVoAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDkvMjAvMTIGkKG+AA