小心IMG SRC空字串效應
3 |
在點部落看到一篇有趣的文章: 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設成空字串,別找自己麻煩!
Comments
# by Likey
請問這個問題只會發生在img標籤嗎 感覺這問題跟這網頁說的有點類似 http://lifesinger.wordpress.com/2011/09/22/empty-src-is-dangerous/
# by Jeffrey
to Likey, link/script的src也會導致相同的問題,而且依Yahoo文章的說法,HTML5規範了img.src空白不發Request,卻沒提link/script,所以也許將來瀏覽器仍會因此觸發非預期Request。 不過依我個人看法,在網站開發實務上,img.src先給空白再動態設定的情境比較常看到,link/script src設成空白的應用方式相對罕見,因此潛在危害風險倒是低一些。
# by 91
yup, 補回去我那篇Session遺失的可能性了。