Data URI Scheme,base64

標籤：

一、從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 */

/*[email protected]Content-Type: multipart/related; boundary="_ANY_SEPARATOR"--_ANY_SEPARATORContent-Location:myidBackgroundContent-Transfer-Encoding:base64iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//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=

From：

  http://www.cnblogs.com/hustskyking/p/data-uri.html

  http://www.cnblogs.com/fsjohnhuang/p/3903688.html

Data URI Scheme,base64