data: URL
Data URLs，以 data: scheme 开头的 URL，允许内容创建者将小型文件内嵌到文档中。它们以前被称为“data URIs”，直到该名称被 WHATWG 弃用。
注意： 现代浏览器将 Data URLs 视为独特的、不透明的源，而不是继承负责导航的设置对象的源。
语法
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>
- 语法
-
dataURL 的格式非常简单，但很容易忘记在“data”部分之前添加逗号，或者错误地将数据编码为 base64 格式。 - 在 HTML 中格式化
-
dataURL 提供了一个文件中的文件，相对于包含文档的宽度，它可能非常宽。作为 URL，data应该可以使用空格（换行符、制表符或空格）进行格式化，但 在使用 base64 编码时 会出现实际问题。 - 长度限制
-
浏览器不要求支持任何特定的最大数据长度。Chromium 和 Firefox 将
dataURL 限制为 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 安全团队的这篇博文。
规范
| 规范 |
|---|
| “data” URL scheme # 第 2 节 |
浏览器兼容性
加载中…