img標籤爲空的陷阱

把頁面中的img標籤的src設置爲「」存在巨大的風險，不管是在html中寫入

 

<img src=」" />

 

仍是在js中寫入

 

var img = new Image(); img.src = 「」;

 

出現一次這樣的標籤會致使向你的服務器多作一次請求。img標籤的src=""時，會引發瀏覽器再次訪問"./"即當前目錄，若是該目錄下有default.aspx,index.aspx等IIS的默認文檔，則默認文檔會執行2次

• 在IE中，這樣作會請求一次當前頁面所在的目錄。如在http://playgoogle.com/demo/a.html 中出現這種空src的標籤，會致使從新請求一次://playgoogle.com/demo/

 

• 在Safari 和 Chrome中，將請求當前頁面自己。

 

• 在Firefox 3.5之前的版本中，有和Safari一樣的問題，可是在3.5中修正了這個BUG。

 

• • 在Opera 中，不會作額外的請求。

 

在一個訪問量不高的網站中，多一個這樣的請求也無所謂（甚至可讓你的網站瀏覽看上去翻番），但在一個千萬級訪問量甚至更高的WEB站點裏，這樣會致使你的服務器和帶寬的成本顯著增長。 另一個隱患是，從新請求某個頁面可能會致使用戶的一些信息被無心中修改，例如cookies，或者ajax操做。

你永遠不會寫出這樣的代碼？ 

我並不這麼認爲，不少時候這種狀況在無心中出現，好比下面這段php代碼：

<img src="$imageUrl" > 

你原計劃是從服務器端讀取這個src地址，可是因爲某個緣由，這個地址還未設置，或者代碼的BUG致使讀取失敗，就會出現空的src標籤。

其餘的標籤中的空src會不會致使這樣的問題？ 

好消息是，在IE中只有image標籤有這個問題。壞消息是，在Chrome, Safari, 和 Firefox中<script src=""> 和<link href="">都會致使出現一個新的請求。

如何解決這個問題？ 

能夠從兩方面着手，一是儘可能避免這種壞的編程方式，不要出現空的src標籤。另外，能夠從服務器端着手，在發現時這種無心義的請求時不要返回任何東西給客戶端。

<?php 
    //Works for IE only when using path URLs and not file URLs 

    //get the referrer 
    $referrer = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : ''; 

    //current URL (assuming HTTP and default port) 
    $url = "http://" . $_SERVER['HTTP_HOST']  . $_SERVER['REQUEST_URI']; 

    //make sure they're not the same 
    if ($referrer == $url){ 
        exit; 
    } 
?> 

原文網址：

 

Empty image src can destroy your site