浅谈 C# 与 Data URI

如果您喜欢此文章，请收藏、点赞、评论，谢谢，祝您快乐每一天。

有看過這種HTML嗎?

</head>

<body>

</form>

</body>

</html>

在HTML裡link的href及img的src，並沒有指向某個URL，而是直接嵌入一段Base64編碼，而IE8+, Firefox, Safari, Opera, Chrome都能正確顯示其中的圖檔與CSS設定。

這種表示方法叫做data URI schema，是新一代瀏覽器支援的檔案資料表現格式，允許在網頁裡以字串形式直接內嵌圖檔、CSS檔案，進而達到以下好處:

瀏覽器不用為了下載圖檔、CSS另外發動HTTP Request。每次HTTP傳輸產生的額外資料量(HTTP Header、TCP/IP Header...等)，累積下來多半會大於使用Base64編碼二進位資料所增加的資料量(每3個Byte增加一個Byte)，事實上內嵌成Base64字串反而較節省頻寬。
基於TCP傳輸特性，傳送一個大檔案會比連續傳送多個拆解的小檔更快速有效率。(HTTP Keep-Alive可以改善傳送多個小檔案效率不佳的問題，但並不能徹底解決)
使用HTTPS(SSL)傳輸時，因為HTTPS Request的額外程序更多，內嵌資料做法的改善更明顯。
瀏覽器通常會有同時使用HTTP連線數的上限(例如: 兩條)，將所有需要資料一次下載回來，可以避免持續佔用寶貴的連線資源。
以往在網頁式的Rich Text編輯器裡處理貼上圖檔，得將圖檔上傳至伺服器端某處，再將URL丟回編輯器中。使用內嵌資料寫法，可讓網頁編輯文字要內嵌圖檔容易多了。

當然，凡事不會有利無害，網頁內嵌資料的做法也有其缺點:

因圖檔內容被綁在網頁中，若為動態網頁每次內容都會變化，就無法透過快取加速及節省頻寬，網頁內容含圖檔資料，每次都得重新下載。
當檔案資料有變化時，所有內嵌它的網頁都要重新產生編碼。
IE8以上的版本才有支援，且限制大小不可超過32KB
Base64會讓內容變大33%，但若Web Server端啟用GZIP壓縮，增加的大小可以縮小到2-3%。
對資安軟體來說，Data URI增加了網頁內容檢驗的難度。

IE從IE8開始才支援這種Data URI的做法，且基於安全、效率的考量，加入了一些限制:

不支援Javascript檔內嵌，避免惡意程式藏匿其中，逃避Script過濾機制。
內嵌檔案大小不可超過32KB。
支援格式包含: object (images only) , img, ``input type=image, ``link
以及CSS宣告，例如:``background-image, background, list-style-type, list-style等。

我寫了一小段ASP.NET程式用來產生Data URI字串，最前面的HTML就是透過這個工具做出來的，大家也可以玩看看。

using System;

using System.IO;

public partial class DataURI_Default : System.Web.UI.Page

{

private string GenDataURI(string contentType, string filePath)

{

byte\[\] buff = File.ReadAllBytes(filePath);

return string.Format("data:{0};base64,{1}",

contentType, Convert.ToBase64String(buff));

}

protected void Page_Load(object sender, EventArgs e)

{

string path = Request $"path"$ ?? "";

if (!string.IsNullOrEmpty(path) &&

File.Exists(Server.MapPath(path)))

{

string contentType = "";

switch (path.ToLower().Substring(path.Length-4, 4))

{

case ".jpg":

contentType="image/jpeg";

break;

case ".gif":

contentType="image/gif";

break;

case ".png":

contentType="image/png";

break;

case ".htm":

contentType="text/html";

break;

case ".css":

contentType="text/css";

break;

default:

Response.Write("Not supperted file type!");

Response.End();

break;

}

Response.Write(GenDataURI(contentType, Server.MapPath(path)));

Response.End();

}

如果您喜欢此文章，请收藏、点赞、评论，谢谢，祝您快乐每一天。