数据 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