一、初识Data URL
数据URL是带有前缀的URL，data:可以将小文件直接嵌入文档中。
- data URL是一种特殊格式的url，它的前缀是
data: - data URL允许内容的创建者将小文件嵌入在documents中
- 过去被叫做data URIs，直到WHATWG将其更名为data URL(s)
data URL与传统的url有什么区别？
现代浏览器将data url视作唯一的不透明来源，而不是负责导航的url。
如何理解这句话呢？看一下这个例子：
// data URL
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAADklEQVQYV2NkgAJGGAMAAC0AA03DhRMAAAAASUVORK5CYII=
// 传统的URL
https://www.google.com由上面的结果可以看出：
data URL与传统的url不同。
传统的url在浏览器地址栏中输入，可以直接导航到目标地址；而data URL则是一个data的url表现，可以理解为用url代表数据。
二、data URL语法
data URL由哪四部分组成？
data:[<mediatype>][;base64],<data>| 组成 | 含义 |
|---|---|
data: |
前缀 |
[<mediatype>] |
MIME type 代表数据的类型 |
[;base64] |
可选的base64标识 |
<data> |
数据本身 |
[<mediatype>]详情
- mediatype是一个MIME type的字符串，比如'image/jpeg'。
- 如果忽略的话，默认是"text/plain;charset=US-ASCII"。
- canvas.toDataURL()并没有忽略，默认MIMIE type为"image/png"。
[;base64]和<data>详情
- 如果data是纯文本，你可以简单的嵌入文本（根据document类型使用适当的实体或者转义）。
- 如果data不是纯文本的话，可以标识为base64，并且嵌入base64编码的二进制数据。
常见的data URL形式
- 简单的text/plain数据
- 简单的text/palin数据的base64形式
- HTML片段：普通标签
- HTML片段：执行js的script标签
简单的text/plain数据
Hello World!
data:,Hello%2C%20World! // MIME type和;base64都没有，data和数据间只有`:,`注意引号和空格的percent-encoding（URL-encoding）。
对于CSV数据（”text/csv“），percent-encoding需要保留分隔电子表格行的行尾。
简单的text/palin数据的base64形式
Hello World!
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==HTML片段：普通标签
<h1>Hello, World!</h1>
data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3EHTML片段：执行js的script标签
<script>alert('hi');</script>
data:text/html,<script>alert('hi');</script>执行js的script标签，注意闭script标签是需要的。
三、data URL常见问题
罗列一些在创建和使用data URL时的常见问题。
data:text/html,lots of text...<p><a name%3D"bottom">bottom</a>?arg=val其实它代表的是：
lots of text...<p><a name="bottom">bottom</a>?arg=val- 语法
- HTML中的格式
- 长度限制
- 异常处理的缺失
- 不支持字符串查询
- 安全问题
语法
data URL的格式非常简单，很容易忘记在data前面添加一个逗号，或者是错误的将数据编码为base64格式。
HTML中的格式
data URL在文件中提供了一个文件，这个文件相对于闭文档的宽度可能非常宽。
作为一URL，data应该将空白格式化好（换行、tab、或者空格），但是在使用base64编码时会有一些问题。
长度限制
尽管firefox支持无现场的data URL长度，但是浏览器不需要支持任何最大特定长度的数据。例如Opera 11浏览器将URL的长度限制到65535，data URL限制到65529（65529指的是base64 encoded后的<data>长度）。
主流浏览器data URL长度限制
- Chrome - 2MB for the current document. Otherwise the limit is the in-memory storage limit for - arbitrary blobs: if x64 and NOT ChromeOS or Android, then 2GB; otherwise, total_physical_memory / 5 (source).
- Firefox - unlimited
- IE ≥ 9 & Edge - 4GB
引自：Data protocol URL size limitations
异常处理的缺失
media的无效参数，或者‘base64’排版错误，都会被忽略，但是不会报错出来。
不支持字符串查询
data URL的数据部分是不透明的，所以如果使用query string（比如<url>?parameter-data）去查询时，将只在数据中包含URL的查询字符串。也就是说查询无效，query也会被当做数据的一部分。
安全问题
许多安全问题(如网络钓鱼)都与data url相关，并在浏览器的顶层导航到它们。
为了解决这些问题，在Firefox 59+中(发布版本，从58开始)，对数据的顶层导航data:// urls已经被禁止。
更多：