數據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..." />
這個站點有一個非常不錯的數據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初學者手冊
更多瀏覽器教程:
- HTML5提供了一些有用的技巧
- 我如何使基於CMS的網站脫機工作
- 漸進式Web應用程序完整指南
- 提取API
- 推送API指南
- 頻道消息傳遞API
- 服務人員教程
- 緩存API指南
- 通知API指南
- 深入IndexedDB
- Selectors API:querySelector和querySelectorAll
- 通過延遲和異步有效地加載JavaScript
- 文檔對像模型(DOM)
- Web存儲API:本地存儲和會話存儲
- 了解HTTP Cookies的工作原理
- 歷史API
- WebP圖像格式
- XMLHttpRequest(XHR)
- 深入的SVG教程
- 什麼是數據網址
- 學習網絡平台的路線圖
- CORS,跨域資源共享
- 網絡工作者
- requestAnimationFrame()指南
- 什麼是Doctype
- 使用DevTools控制台和控制台API
- 語音合成API
- 如何在純JavaScript中等待DOM ready事件
- 如何將類添加到DOM元素
- 如何遍歷來自querySelectorAll的DOM元素
- 如何從DOM元素中刪除類
- 如何檢查DOM元素是否具有類
- 如何更改DOM節點值
- 如何將click事件添加到從querySelectorAll返回的DOM元素列表中
- WebRTC,實時Web API
- 如何在JavaScript中獲取元素的滾動位置
- 如何替換DOM元素
- 如何只接受輸入文件字段中的圖像
- 為什麼要使用瀏覽器的預覽版?
- 斑點對象
- 文件對象
- FileReader對象
- FileList對象
- ArrayBuffer
- ArrayBufferView
- URL對象
- 類型數組
- DataView對象
- BroadcastChannel API
- Streams API
- FormData對象
- 導航器對象
- 如何使用地理位置API
- 如何使用getUserMedia()
- 如何使用拖放API
- 如何在網頁上滾動
- 在JavaScript中處理表單
- 鍵盤事件
- 鼠標事件
- 觸摸事件
- 如何從DOM元素中刪除所有子級
- 如何使用原始Javascript創建HTML屬性
- 如何檢查是否使用JavaScript選中了複選框?
- 如何使用JavaScript複製到剪貼板
- 如何使用JavaScript禁用按鈕
- 如何在瀏覽器中使頁面可編輯
- 如何使用URLSearchParams在JavaScript中獲取查詢字符串值
- 如何一次刪除頁面上的所有CSS
- 如何使用insertAdjacentHTML
- Safari,退出前警告
- 如何使用JavaScript將圖像添加到DOM
- 如何重設表格
- 如何使用Google字體