一、初識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:[][;base64],

組成含義

data:

前綴

[]

[;base64]

可選的base64標識

數據本身

[]詳情

mediatype是一個MIME type的字符串，比如'image/jpeg'。

如果忽略的話，默認是"text/plain;charset=US-ASCII"。

canvas.toDataURL()并沒有忽略，默認MIMIE type為"image/png"。

[;base64]和詳情

如果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片段：普通標簽

Hello, World!

data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E

HTML片段：執行js的script標簽

data:text/html,

執行js的script標簽，注意閉script標簽是需要的。

三、data URL常見問題

羅列一些在創建和使用data URL時的常見問題。

data:text/html,lots of text...

bottom?arg=val

其實它代表的是：

lots of text...

bottom?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 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

異常處理的缺失

media的無效參數，或者‘base64’排版錯誤，都會被忽略，但是不會報錯出來。

不支持字符串查詢

data URL的數據部分是不透明的，所以如果使用query string(比如?parameter-data)去查詢時，將只在數據中包含URL的查詢字符串。也就是說查詢無效，query也會被當做數據的一部分。

安全問題

許多安全問題(如網絡釣魚)都與data url相關，并在瀏覽器的頂層導航到它們。

為了解決這些問題，在Firefox 59+中(發布版本，從58開始)，對數據的頂層導航data:// urls已經被禁止。

更多：

總結

以上是生活随笔為你收集整理的data:text/html firefox钓鱼,JS DataURL 整理(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。