data: URL

語法

data:[<media-type>][;base64],<data>

data

URL 的 scheme。

<media-type> 可選

指示資料型別的 MIME 型別，例如 JPEG 影像檔案的 image/jpeg。如果省略，則預設為 text/plain;charset=US-ASCII。您可以在這裡找到 MIME 型別結構的完整解析 和 網路上常見 MIME 型別表。

;base64 可選

指示資料應進行 base64 解碼；請參閱 將資料編碼為 base64 格式。

<data>

資料本身。如果資料包含 RFC 3986 中定義的 保留字元，或包含空格、換行符或其他非列印字元，則這些字元必須進行 百分比編碼。如果資料是文字，您可以嵌入文字（使用適合包含文件型別的相應實體或轉義符）。否則，您可以指定 base64 來嵌入 base64 編碼的二進位制資料。

一些示例

data:,Hello%2C%20World%21

文字/純文字資料 Hello, World!。請注意逗號如何被 百分比編碼 為 %2C，空格字元被編碼為 %20。

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==

上面內容的 base64 編碼版本

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

包含 <h1>Hello, World!</h1> 的 HTML 文件

data:text/html,%3Cscript%3Ealert%28%27hi%27%29%3B%3C%2Fscript%3E

包含 <script>alert('hi');</script> 並執行 JavaScript alert 的 HTML 文件。請注意，必須有閉合的 script 標籤。

將資料編碼為 base64 格式

Base64 是一組二進位制到文字的編碼方案，它透過將其轉換為基數 64 表示形式，以 ASCII 字串格式表示二進位制資料。由於它僅包含 URL 語法允許的字元（“URL 安全”），因此我們可以安全地在 data URL 中編碼二進位制資料。Base64 使用 + 和 / 字元，這些字元在 URL 中可能有特殊含義。因為 Data URLs 沒有 URL 路徑段或查詢引數，所以在這種情況下這種編碼是安全的。

在 JavaScript 中編碼

Web API 具有用於編碼或解碼 base64 的原生方法：Base64。

在 Unix 系統上編碼

在 Linux 和 macOS 系統上，可以使用命令列 base64（或者，作為替代，使用帶 -m 引數的 uuencode 工具）來完成檔案或字串的 Base64 編碼。

echo -n hello|base64
# outputs to console: aGVsbG8=

echo -n hello>a.txt
base64 a.txt
# outputs to console: aGVsbG8=

base64 a.txt>b.txt
# outputs to file b.txt: aGVsbG8=

在 Microsoft Windows 上編碼

在 Windows 上，可以使用 PowerShell 中的 Convert.ToBase64String 來執行 Base64 編碼。

[convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello"))
# outputs to console: aGVsbG8=

或者，GNU/Linux shell（例如 WSL）提供了 base64 工具。

bash$ echo -n hello | base64
# outputs to console: aGVsbG8=

常見問題

本節介紹建立和使用 data URL 時常見的問

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

這表示一個 HTML 資源，其內容是

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

語法

data URL 的格式非常簡單，但很容易忘記在“data”部分之前新增逗號，或者錯誤地將資料編碼為 base64 格式。

在 HTML 中格式化

data URL 提供了一個檔案中的檔案，相對於包含文件的寬度，它可能非常寬。作為 URL，data 應該可以使用空格（換行符、製表符或空格）進行格式化，但 在使用 base64 編碼時 會出現實際問題。

長度限制

瀏覽器不要求支援任何特定的最大資料長度。Chromium 和 Firefox 將 data URL 限制為 512MB，Safari (WebKit) 將其限制為 2048MB。請注意，Firefox 97 將限制從 256KB 提高到 32MB，Firefox 136 將其提高到 512MB。

缺乏錯誤處理

媒體中的無效引數，或在指定 'base64' 時出現拼寫錯誤，都會被忽略，但不會提供錯誤。

不支援查詢字串等

data URL 的資料部分是不透明的，因此嘗試將查詢字串（頁面特定引數，語法為 <url>?parameter-data）與 data URL 一起使用，只會將查詢字串包含在 URL 所表示的資料中。

安全問題

一些安全問題（例如網路釣魚）與 data URL 有關，並且在瀏覽器的頂層導航中出現。為了緩解這些問題，所有現代瀏覽器都阻止了到 data: URL 的頂層導航。有關更多詳細資訊，請參閱 Mozilla 安全團隊的這篇博文。

規範

瀏覽器相容性

另見

• Base64
• 百分號編碼
• atob()
• btoa()
• CSS <url>
• URI