JS DataURL 整理(一)

一、初識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%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><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已經被禁止。

 

 

更多：

JavaScript 與 ECMAScript 的關系 

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

JavaScript Image對象 整理