data URIs

data URIs, 由 RFC 2397 文件定義, 允許作者在文件中嵌入檔案.

表達式

data URI 的表達式如下：

data:[<mediatype>][;base64],<data>

mediatype 為一 MIME type 字串，例如 JPEG 圖檔為「image/jpeg」，為非必要參數，若省略的話，默認值為「text/plain;charset=US-ASCII」。

If the data is textual, you can simply embed the text (using the appropriate entities or escapes based on the enclosing document's type). Otherwise, you can specify base64 to embed base64-encoded binary data.

範例

data:,Hello%2C%20World!

一個簡單的 text/plain data

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

同前者，但經過 base64 加密。

data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E

一 HTML 檔，內容為<h1>Hello, World</h1>

以 base64 格式加密資料

在 Linux 和 Mac OS X 中，可以在終端機輸入下面的程式碼來進行加密：

uuencode -m infile remotename

The infile parameter is the name of the file you wish to encode into base64 format, and remotename is the remote name for the file, which isn't actually used in data URLs.

輸出結果如下所示：

begin-base64 664 test
YSBzbGlnaHRseSBsb25nZXIgdGVzdCBmb3IgdGV2ZXIK
====

The data URI will use the encoded data after the initial header line.

JavaScript

請先閱讀文章《 Base64 encoding and decoding. 》。

轉換 nsIFile 至data URI

This function returns a base 64-encoded data URI from the passed nsIFile.

function generateDataURI(file) {
  var contentType = Components.classes["@mozilla.org/mime;1"]
                              .getService(Components.interfaces.nsIMIMEService)
                              .getTypeFromFile(file);
  var inputStream = Components.classes["@mozilla.org/network/file-input-stream;1"]
                              .createInstance(Components.interfaces.nsIFileInputStream);
  inputStream.init(file, 0x01, 0600, 0);
  var stream = Components.classes["@mozilla.org/binaryinputstream;1"]
                         .createInstance(Components.interfaces.nsIBinaryInputStream);
  stream.setInputStream(inputStream);
  var encoded = btoa(stream.readBytes(stream.available()));
  return "data:" + contentType + ";base64," + encoded;
}

安全

常見的問題

以下列舉幾個再使用 data URIs 時常遇到的問題.

表達式

data URIs 的格式十分簡單, 但是我們容易忘記在 "data" 區塊前面使用逗號, 或是不正確的將資料轉換為 base64 的格式.

在HTML 的格式

A data URI provides a file within a file, which can potentially be very wide relative to the width of the enclosing document. As a URL, the data should be formatable with whitespace (linefeed, tab, or spaces), but there are practical issues that arise when using base64 encoding.

長度限制

Although Mozilla supports data URIs of essentially unlimited length, browsers are not required to support any particular maximum length of data. For example, the Opera 11 browser limits data URIs to around 65000 characters.

缺乏錯誤處理

Invalid parameters in media, or typos when specifying "base64", are ignored, but no error is provided.

未支援 query 字串, etc.

The data portion of a data URI is opaque, so an attempt to use a query string (page-specific parameters, with the syntax <url>?parameter-data) with a data URI will just include the query string in the data the URI represents. For example:

data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val

This represents an HTML resource whose contents are:

lots of text...<p><a name="bottom">bottom</a>?arg=val

Note: as of Firefox 6, fragments (anchors) are processed consistent with other URI schemes, thus a bare "#" in the content needs to be escaped as '%23'.

瀏覽器的支援

The data scheme is supported by Opera 7.20 and above, as well as Safari and Konqueror. Internet Explorer 7 and below, however, do not currently support it. Internet Explorer 8 and above only supports data URIs for images in CSS, <link>, and <img>.

參見

• Base64 encoding and decoding
• atob()
• btoa()
• CSS url()
• URI

資源

• RFC 2397 -- The "data" URL scheme"