一、初識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>

[<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%3E

HTML片段：執行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><aname="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已經被禁止。

更多：

JavaScript 與 ECMAScript 的關係

新版本chrome瀏覽器(80版本以後)帶來的跨域請求cookie丟失問題

JavaScript Image物件 整理