資料 URL

資料 URL 由四個部分組成：字首 (data:)、指示資料型別的 MIME 型別、如果是非文字資料則為可選的 base64 令牌，以及資料本身。

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

mediatype 是一個 MIME 型別 字串，例如 JPEG 影像檔案的 'image/jpeg'。如果省略，則預設為 text/plain;charset=US-ASCII。

如果資料包含 RFC 3986 中定義的保留字元，或包含空格字元、換行符或其他非列印字元，則必須對其進行 百分比編碼。

如果資料是文字資料，您可以嵌入文字（根據封閉文件的型別使用相應的實體或轉義符）。否則，您可以指定 base64 來嵌入 base64 編碼的二進位制資料。您可以在 此處 和 此處 找到有關 MIME 型別的更多資訊。

一些示例

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> 的 HTML 文件，它執行 JavaScript 警報。請注意，需要關閉指令碼標籤。

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

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

在 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=

在 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 的格式非常簡單，但很容易忘記在“資料”段之前放置逗號，或錯誤地將資料編碼為 base64 格式。

在 HTML 中格式化

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

長度限制

瀏覽器不需要支援任何特定的最大資料長度。例如，Opera 11 瀏覽器將 URL 的長度限制為 65535 個字元，這將 data URL 的長度限制為 65529 個字元（如果您使用純 data:，不指定 MIME 型別，則 65529 個字元是編碼資料的長度，而不是源資料的長度）。Firefox 97 及更高版本支援長達 32MB 的 data URL（97 之前，限制接近 256MB）。Chromium 反對超過 512MB 的 URL，Webkit（Safari）反對超過 2048MB 的 URL。

缺少錯誤處理

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

不支援查詢字串等

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

安全問題

一些安全問題（例如，網路釣魚）與資料 URL 以及在瀏覽器頂級導航到它們相關聯。為了緩解此類問題，所有現代瀏覽器都阻止了到 data: URL 的頂級導航。有關更多詳細資訊，請參閱 Mozilla 安全團隊的這篇博文。

• Base64
• 百分比編碼
• atob()
• btoa()
• CSS url()
• URI