什么是 Data URL

Data URL 是前缀为 data: 协议的 URL，允许在 URL 中直接嵌入数据，与常见的 URL（如 ）不同，Data URL 不指向外部资源，而是直接包含数据内容。这种方式可以用于在网页或应用程序中内联小型的文件或数据片段，而无需从外部服务器加载。这种协议常用于网页、演示文档或者应用中嵌入小片段的 Markdown 文本而无需访问外部文件。

举个例子，你可以直接在网页中打开下面的链接，打开之后会在网页上展示一段 markdown 文本

data:text/markdown;base64,IyMgSGVsbG8gV29ybGQKVGhpcyBpcyBhIG1hcmtkb3duIHRleHQK

展示的内容为

## Hello World
This is a markdown text

Data URL 格式

典型的 Data URL 格式如下：

data:[type>][;base64],

还是以上面的例子介绍一下

对于 Data URL data:text/markdown;base64,IyMgSGVsbG8gV29ybGQKVGhpcyBpcyBhIG1hcmtkb3duIHRleHQK, 其实是内嵌的 Markdown 文本文件，它使用 text/markdown 作为媒体类型，数据部分采用base64编码，也就是将 markdown文本使用 base64 进行压缩。不过不用担心在浏览器中展示的是编码后的base64编码，浏览器会自己解码，最终展示的是解码之后的markdown文本。

当然你也可以不使用base64进行压缩，但是需要进行 urlEncode，像下面这样，在浏览器中打开的效果是一样的

data:text/mardkwon,%23%23+Hello+World%0aThis+is+a+markdown+text%0a

使用场景

其实这个东西并不陌生，比如我们在网页中使用base64 编码展示图片用的就是这个协议

.example {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA...);
}

下面整理了几个比较常用的场景

1. 内嵌图像资源

.logo {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA...);
}

2. Web 应用中做文件导出

href="data:application/json;base64,eyB0aXRsZTogJ2hlbGxvIHdvcmxkJyB9" download="data.json">JSON

3. 前端演示或沙盒应用

<iframe src="data:text/markdown;base64,SGVsbG8gd29ybGQhIFRoaXMgaXMgYSBtYXJrZG93biB0ZXh0Lg==" />

4. 简易的网页应用

data:text/html;base64,PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9InpoIj4KPGhlYWQ+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCI+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCI+CiAgICA8dGl0bGU+5oyJ6ZKu54q25oCB56S65L6LPC90aXRsZT4KICAgIDxzdHlsZT4KICAgICAgICBib2R5IHsKICAgICAgICAgICAgZm9udC1mYW1pbHk6IEFyaWFsLCBzYW5zLXNlcmlmOwogICAgICAgICAgICBkaXNwbGF5OiBmbGV4OwogICAgICAgICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICAgICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICAgICAgICAgICAgaGVpZ2h0OiAxMDB2aDsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2Y0ZjRmNDsKICAgICAgICB9CgogICAgICAgIC5idXR0b24gewogICAgICAgICAgICBwYWRkaW5nOiAxNXB4IDMwcHg7CiAgICAgICAgICAgIGZvbnQtc2l6ZTogMTZweDsKICAgICAgICAgICAgY29sb3I6IHdoaXRlOwogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDA3YmZmOwogICAgICAgICAgICBib3JkZXI6IG5vbmU7CiAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDVweDsKICAgICAgICAgICAgY3Vyc29yOiBwb2ludGVyOwogICAgICAgICAgICB0cmFuc2l0aW9uOiBiYWNrZ3JvdW5kLWNvbG9yIDAuM3MsIHRyYW5zZm9ybSAwLjJzOwogICAgICAgICAgICBtYXJnaW46IDEwcHg7CiAgICAgICAgfQoKICAgICAgICAuYnV0dG9uOmhvdmVyIHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzAwNTZiMzsKICAgICAgICB9CgogICAgICAgIC5idXR0b246YWN0aXZlIHsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogIzAwNDA4NTsKICAgICAgICAgICAgdHJhbnNmb3JtOiBzY2FsZSgwLjk1KTsKICAgICAgICB9CgogICAgICAgIC5idXR0b246ZGlzYWJsZWQgewogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjYzBjMGMwOwogICAgICAgICAgICBjdXJzb3I6IG5vdC1hbGxvd2VkOwogICAgICAgIH0KICAgIDwvc3R5bGU+CjwvaGVhZD4KPGJvZHk+CgogICAgPGJ1dHRvbiBjbGFzcz0iYnV0dG9uIj7mraPluLjnirbmgIE8L2J1dHRvbj4KICAgIDxidXR0b24gY2xhc3M9ImJ1dHRvbiIgb25tb3VzZW92ZXI9InRoaXMuaW5uZXJIVE1MPSfmgqzlgZznirbmgIEnIiBvbm1vdXNlb3V0PSJ0aGlzLmlubmVySFRNTD0n5q2j5bi454q25oCBJyI+5oKs5YGc54q25oCBPC9idXR0b24+CiAgICA8YnV0dG9uIGNsYXNzPSJidXR0b24iIG9ubW91c2Vkb3duPSJ0aGlzLmlubmVySFRNTD0n5oyJ5LiL54q25oCBJyIgb25tb3VzZXVwPSJ0aGlzLmlubmVySFRNTD0n5q2j5bi454q25oCBJyI+5oyJ5LiL54q25oCBPC9idXR0b24+CiAgICA8YnV0dG9uIGNsYXNzPSJidXR0b24iIGRpc2FibGVkPuemgeeUqOeKtuaAgTwvYnV0dG9uPgoKPC9ib2R5Pgo8L2h0bWw+Cg==

其他兼容性

从 MDN 看 Data URL 的兼容性还是不错的 Data URL | MDN ()

安全性

浏览器会将 Data URL 视为唯一的不透明来源，意味着浏览器将 Data URL 视为一种安全策略，限制了这些 URL 在某些场景下的使用，比如你无法通过window.open打开 Data URL，你也无法通过 fetch请求 Data URL，就连localstorage也无法访问。

可以传输的数据大小

实际还没有进行测试，如果 MDN 上描述的没有问题，那这个数据量也是很惊人的

查阅一些资料后，有一些文章中提到限制是：

总结一下优势：局限