為什么將CSS數據URI記錄為404請求？

Question

為了減少我們網站上的請求數量，我們使用CSS數據URI而不是鏈接到外部圖像。 出於某種原因，這些數據URI偶爾仍被記錄為針對我們服務器的404請求。 為什么會這樣？

隨機細節：

• 我們正在使用Splunk進行跟蹤
• 發生多個數據URI
• 適用於所有瀏覽器
• 在我們網站的多個頁面上
• 我們的質量檢查未能復制該問題
• 以下是特定數據URI的結果
• 相關的CSS文件 - （ http://c.mfcreative.com/lib/tgn/combo.ashx?14/css/v1/main.css ）
• 同一文件的未分類版本 - （ http://c.mfcreative.com/lib/tgn/combo.ashx?14/css/v1/main.css&minify=false 請參閱第35行

相關CSS：

body{background:#e2decd url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAGuCAIAAADeSvtRAAAAfUlEQVQ4y9WTzQ7AIAiD+fr+rzzYSeOWGP+z7MABwVJstYiQmf02zvP3yrk2442Gqvijb9LT34tJ7vVP5u/zTBzDP113n/eYCv3ec1IOLGjn1bu9+K0zQEad/4r/iMj8dvLfVqetfcsf5X6z/y7ieuVk/SU19wMesxMXQMANapSO6rYFQnIAAAAASUVORK5CYII=) repeat-x 0 0}

查詢以查看我們所有的404錯誤（在我們的前10個404錯誤中有5個數據URI）：

sourcetype=iis* host=prd*ssscdn* sc_status=404 | top 100 cs_uri_stem

生成以下圖像的查詢：

sourcetype=iis* host=prd*ssscdn* sc_status=404 cs_uri_stem="/lib/tgn/data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAGuCAIAAADeSvtRAAAAfUlEQVQ4y9WTzQ7AIAiD+fr+rzzYSeOWGP+z7MABwVJstYiQmf02zvP3yrk2442Gqvijb9LT34tJ7vVP5u/zTBzDP113n/eYCv3ec1IOLGjn1bu9+K0zQEad/4r/iMj8dvLfVqetfcsf5X6z/y7ieuVk/SU19wMesxMXQMANapSO6rYFQnIAAAAASUVORK5CYII="

---

任何幫助/方向都將非常感謝！

---

alt text http://www.jasonbuckboyer.com/playground/blah/data-uri-404-error1.png

Answer 1

我對Srikanth的評論表示贊同。 它看起來像你的代碼中有一些東西將/lib/tgn/粘貼到url字符串的前面，最后將它放在data之前生成/lib/tgn/data:image/png ，這是無效的。

您需要跟蹤該代碼並讓它一起忽略所有字符串（如果它是數據uri），同時仍然允許它將圖像路徑附加到在/lib/tgn/目錄中保存和訪問的圖像。

添加說明

根據你的評論，我不確定我們是否清楚地溝通。 我在上面發布的“生成以下圖片的查詢”代碼中看到的是：

cs_uri_stem="/lib/tgn/data:image/png;base64,iVBORw0KGgo... [etc.]"

您發布的圖像顯示cs_uri_stem值在data:image/png之前都插入了/lib/tgn/ 。 某些東西 （可能是你的CDN組合，也許是服務器上的url重寫規則，或其他東西）似乎導致在進程/請求時將/lib/tgn/代碼添加到css url()代碼中（因為它看起來像它沒有直接添加到CSS中，因為你的縮小代碼和擴展代碼都沒有顯示它添加了）。 但是，您發布的圖像顯示的最終結果表明導致404錯誤的cs_uri_stem都在data:image/png之前添加了/lib/tgn/ 。 因此瀏覽器最終沒有將url()視為數據，因為請求是以路徑開頭的，即/lib/tgn/data:image/png ... 因為它認為它正在尋找從path /lib/tgn/開始的文件，所以瀏覽器正在發出一個請求（當然）它永遠不會被滿足，因此產生了404錯誤。

現在也許我仍然不清楚你在評論中指的是什么，但也許我已經讓自己更清楚地知道我認為你的問題是什么。