浏览器 Data 协议的应用
2022-09-29 22:01 前端

本文初稿写于 2020 年 10 月 17 日中午,但是发现写的不太好,所以在 2022 年 9 月 29 日进行了大幅度的修改,本文可能有一些用语不是很准确,但是意思应该是达到了的,仅供参考,具体请以相关文档为准。

在一些情况下,你可能需要引用一个外部资源,但是又难以保证这个外部资源存在哪是否哪天就会失效了;又或者你需要引入好几十个极其简单的小图标,每个小图标都使用 img 标签发送一个请求,这样会造成一定的性能浪费。对于上面这两种情况,我想 Data 协议 是一个适合的答案,在 MDN Web Docs 中,Data 协议被介绍为:

Data URLs,即前缀为 data: 协议的 URL,其允许内容创建者向文档中嵌入小文件

怎么理解 Data 协议?假如现在在你的作业本上有这样的一道题目:

如图所示是某一物体运动的 s-t 图像...
(图请见书第 10 页图 3-4)

此时就需要你去翻书,看一下图是什么,这就像是一般情况下我们去请求外部资源,不过,如果我们把这个图抄在题旁边呢?这样我们既不用担心书丢了找不到图(外部资源失效),也不用再麻烦翻书了(极简单的内容也要请求一下造成性能浪费),这就像是使用 Data 协议了,方便又快捷。

不过也要提到一下 Data URI 的弊处:

  1. 冗长:如果在一个 Markdown 文档中使用一个 Data URI 来存储某个图片,那么就会出现一个极长的字符串,会大大影响可编辑性。

  2. 占用空间:使用 Data URI 存储可能会相较于直接请求外部资源占用更多的空间。

怎么使用

Data URI 的格式,或者说是语法是这样的:

data:[资源类型];[编码,][编码方式,]内容

举几个例子:

应用

举个例子,你可以使用 Data URI 存储一些你想要嵌入在文档内的的图片,来防止外部资源丢失,尤其是在一些不能够直接将内嵌的图片等资源存储在文档里的文档类型中(如 Markdown、HTML 等)。如在 Markdown 中,可以:

![图片](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAICAIAAAB/FOjAAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiUAABYlAUlSJPAAAAA8SURBVChTY/z//z8DKYAJSjMwMDIyopHIDDhAaEAGeKxF0YDHYDhA0UCMf7A7CQ4wjSCgAdNtJAYrAwMA3qUPFUTBASYAAAAASUVORK5CYII=)  
上面是一张写着 `Hi!` 的图片。

图片
上面是一张写着 Hi! 的图片。

不过,Data 协议的链接也可能被用来于进行钓鱼诈骗,请见《Phishing without a webpage – researcher reveals how a link itself can be malicious》(没有网页的网上诱骗–研究人员揭示链接自身可能是恶意的)。 (2022 年 9 月 27 日注:现在在 Chrome 浏览器 60+ 版本中已经有阻止跳转到 Data URI 限制了,问题不大)