簡介 | 技术维基

＃什麼是資料 URL

資料 URL 是一種 URI 方案，提供了一種將資料嵌入到文件中的方法，它通常用於在 HTML 和 CSS 中嵌入圖像。

簡介

資料 URL 是一種 URI 方案，提供了在 HTML 文件中直接嵌入資料的方法。

假設您想要嵌入一個小圖像。您可以按照通常的方式，上傳圖像到一個文件夾，然後使用 img 標籤讓瀏覽器通過網路請求它：

<img src="image.png" />

或者您可以將其編碼為一種特殊格式，稱為資料 URL，這樣就可以直接將圖像嵌入到 HTML 文件中，這樣瀏覽器就不必再發送單獨的請求來獲取它。

資料 URL 可能會為小文件節省一些時間，但對於較大的文件，它們的缺點在於增加的 HTML 文件大小，特別是如果圖像在所有頁面都重新加載，那麼它們將成為一個問題，因為您無法利用瀏覽器的緩存功能。

此外，作為資料 URL 編碼的圖像通常比二進制格式的圖像稍大。

如果您的圖像經常編輯，那麼使用資料 URL 將不太實用，因為每次圖像更改時都需要再次進行編碼。

儘管如此，它們在 Web 平台上有其應用之處。

資料 URL 是以 data: 開始的字串，後面跟著 MIME 類型格式。例如，PNG 圖像的 MIME 類型是 image/png。

接下來是逗號，然後是實際的資料。

文本通常以純文本方式傳輸，而二進制資料通常以 base64 編碼的方式進行傳輸。

以下是資料 URL 的示例：

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

這是使用 base64 編碼的橫幅圖像的小版本的示例（以連結的形式）：data:image/png,%89PNG%0D%0A%1A%0A%00…

這是使用 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 在所有現代瀏覽器中得到支援。

資料 URL 可以編碼任何類型的資訊，不僅僅是圖像，因此它們帶來了一些安全性問題。

資料 URL 可以用於構建試圖從不懷疑的 Web 用戶那裡獲取用戶名和密碼的釣魚網頁。它也可以用於繞過跨站腳本（XSS）限制，將攻擊頁荷徹底嵌入到地址欄中，並通過 URL 縮短服務進行託管，而不需要由第三方控制的完整網站。

詳細了解資料 URL 如何被惡意用戶用於進行網頁攻擊和 Firefox 瀏覽器如何消除此類風險，請參閱Mozilla Firefox 博客上的這篇文章。