什麼是數據網址

數據URL是一種URI方案,提供了一種在文檔中內聯數據的方法,通常用於將圖像嵌入HTML和CSS中

介紹

數據URL是一種URI方案,它提供了一種內聯HTML文檔中的數據的方法。

假設您要嵌入一個小圖像。您可以按照通常的方式將其上傳到文件夾並使用img標記,以使瀏覽器從網絡引用它:

<img src="image.png" />

或者您可以使用一種稱為數據URL的特殊格式對其進行編碼,從而可以將圖像直接嵌入到HTML文檔中,因此瀏覽器無需單獨請求即可獲取它。

數據URL可能會為小文件節省一些時間,但對於較大的文件,HTML文件的大小會有所增加,而且如果圖像在所有頁面上重新加載,則它們尤其會成為問題,因為您無法利用瀏覽器緩存能力。

同樣,編碼為數據URL的圖像通常比二進制格式的相同圖像大一點。

如果您經常編輯圖像,它們並不實用,因為每次更改圖像時,都必須再次對其進行編碼。

也就是說,它們在Web平台上佔有一席之地。

數據網址的外觀

數據URL是以以下開頭的字符串data:緊隨其後的是MIME類型格式。例如,PNG圖像具有mime類型image/png

這之後是逗號,然後是實際數據。

文本通常以純文本格式傳輸,而二進制數據通常以base64編碼。

以下是此類數據網址的示例:

<img src="data:image/png,%89PNG%0D%0A..." />

這是在鏈接中編碼的這篇文章的橫幅圖片的小版本

這是base64編碼的數據URL的外觀。注意它以data:image/png;base64

<img src="data:image/png;base64,iVBORw0KGgoAA..." />

這是本文base64的橫幅圖像的小版本,編碼為鏈接

這個站點有一個非常不錯的數據URL生成器:https://dopiaza.org/tools/datauri/index.php您可以使用它來將桌面上的任何圖像轉換為數據URL。

數據URL可以在可以使用URL的任何地方使用,如您所見,您可以將其用於鏈接,但是在CSS中使用它們也很常見:

.main {
    background-image url('data:image/png;base64,iVBORw0KGgoAA...');
}

瀏覽器支持

他們是所有現代瀏覽器均支持

安全

數據URL不僅可以對圖像進行編碼,還可以對任何類型的信息進行編碼,因此它們帶有一系列安全隱患。

維基百科

數據URI可用於構建攻擊頁面,這些攻擊頁面試圖從毫無戒心的Web用戶那裡獲取用戶名和密碼。它也可以用來解決跨站點腳本(XSS)限制,將攻擊有效載荷完全嵌入地址欄中,並通過URL縮短服務託管,而不需要由第三方控制的完整網站。

查看Mozilla Firefox博客中的這篇文章有關惡意用戶如何使用數據URL進行不良操作以及Firefox瀏覽器如何減輕此類風險的更多信息。

數據網址在RFC 2397

免費下載我的JavaScript初學者手冊


更多瀏覽器教程: