小心IMG SRC空字串效應

在點部落看到一篇有趣的文章: IMG SRC為空字串,可能會造成Session不見 引發我的好奇心,<img src="" />會與Session發生關聯實在是件吊詭的事,於是查了點資料,學會些新東西。

原來,<img src="" />在較早期瀏覽器版本上會觸發不同的反應: IE6-IE8會將src視為指向網頁所在目錄的URL、較舊版的Safari/Chrome/Firefox會將src指向網頁本身,新版本瀏覽器(IE要到IE9, Firefox則為3.5+)則會忽視空白src,不觸發任何Request。(參考: Yahoo's Best Practices for Speeding Up Your Web Site, Avoid Empty Image src)

仔細檢視這些空白src所觸發的額外Request,算是瀏覽器依循舊有RFC規範所實現的行為(HTML5中則規範對空字串src無需發出Request),沒有帶來任何好處,只平白造成系統無謂的負擔,也可能產生非預期的行為(例如: 影響Session),以下便是我模擬出<img src="" />可能影響Session的情境:

<%@ Page Language="C#" %>
 
<!DOCTYPE html>
 
<script runat="server">
void Page_Load(object sender, EventArgs e) 
{
    if (Request["mode"] == "check") 
    {
        Response.Write(Session["Boo"]);
        Response.End();
    }
    if (!IsPostBack) Session["Boo"] = Request.RawUrl;
}
</script>
 
<html>
<head runat="server">
    <title></title>
    <script type="text/javascript" 
        src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js"> </script>
    <script>
    $(function() {
        $("#disp").load("default.aspx?mode=check&r=" + Math.random());
    });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <img src="" />
    <div>
        Session["Boo"] = <span id="disp"></span>
    </div>
    </form>
</body>
</html>

以上的Default.aspx是IIS的目錄預設網頁,在!IsPostBack時會將Request.RawUrl存入Sesssion["Boo"],之後再用AJAX方式呼叫default.aspx?mode=check,將Session["Boo"]結果取回顯示於<span id="disp">。如果沒有意外,以httq://server/appName/default.aspx連上網頁,<span id="disp">的內容應為/appName/default.aspx。

然而,使用IE9或使用IE8測試將獲得不同結果: 在IE9下如預期為/appName/default.aspx;在IE8下就變成了/appName,改為<img src="somePicature.png" />後,才會得到/appName/default.aspx。

開啟Fiddler,可捕捉到IE8連向目錄(下圖中的/handler/)的額外Request,由於default.aspx是/handler/的預設網頁,因此呼叫/handler/時會再次執行default.aspx,Session["Boo"]值就被覆寫為"/handler/"。

以上實驗算是解開"空白src的img如何影響Session"的謎,而我的心得是(至少在所有瀏覽器都符合HTML5規範前):

永遠不要將img.src設成空字串,別找自己麻煩!

歡迎推文分享:
Published 16 November 2011 06:57 AM 由 Jeffrey
Filed under: ,
Views: 15,488



意見

# Likey said on 15 November, 2011 07:44 PM

請問這個問題只會發生在img標籤嗎

感覺這問題跟這網頁說的有點類似

lifesinger.wordpress.com/.../empty-src-is-dangerous

# Jeffrey said on 15 November, 2011 09:41 PM

to Likey, link/script的src也會導致相同的問題,而且依Yahoo文章的說法,HTML5規範了img.src空白不發Request,卻沒提link/script,所以也許將來瀏覽器仍會因此觸發非預期Request。

不過依我個人看法,在網站開發實務上,img.src先給空白再動態設定的情境比較常看到,link/script src設成空白的應用方式相對罕見,因此潛在危害風險倒是低一些。

# 91 said on 15 November, 2011 11:34 PM

yup, 補回去我那篇Session遺失的可能性了。

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<November 2011>
SunMonTueWedThuFriSat
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication