の挙動

HTML

firefox4か5で、

<img src=""/>

みたいな感じで、srcを空にしたimgタグを書いてると、imgタグが現在開いているページ自体を読み込むようだ。

firefox4,5における空のimgタグの挙動 - 技術記録

という問題。気になったのでローカルのWebサーバで検証してみた。
何が気になったか言うと、

で

  1. Return the img element to the unavailable state.
  2. If an instance of the fetching algorithm is still running for this element, then abort that algorithm, discarding any pending tasks generated by that algorithm.
  3. Forget the img element's current image data, if any.
  4. If the user agent cannot support images, or its support for images has been disabled, then abort these steps.
  5. If the element's src attribute's value is the empty string, then set the element to the broken state, queue a task to fire a simple event named error at the img element, and abort these steps.
  6. Resolve the value of the element's src attribute, relative to the element. (Snip)
4.8 Embedded content ? HTML5

とStep5でsrcが空の場合が定義されているのに、Firefoxではそういう動きをしていない点。

Step5を無視すると、srcはURLではないので、相対パスとして、ドキュメントのURLの相対パスとみなしてURLの解決がされるはず。つまり、location.href + ""であり、ドキュメントのURLそのものにリクエストが飛んでしまい。理屈としては合いそうな気がしたのだ。

検証データ

もしかするとと思い、TML5で記述したもの(Standards Compliant モードと、旧来のHTML(Quirks モード)と2つ用意して試してみた。

Standard Compliantモード: img_src.test.html"

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>&lt;img src=""/&gt; test</title>
</head>
<body>
<h1>&lt;img src=""/&gt; test</h1>

<p>
  <img src=""/>
</p>
</body>
</html>

Quirksモード: img_src.test2.html

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>&lt;img src=""/&gt; test</title>
</head>
<body>
<h1>&lt;img src=""/&gt; test</h1>

<p>
  <img src=""/>
</p>
</body>
</html>

結果

lighttpdのアクセスログから判断をした。

Standard Compliant (標準準拠) モード
127.0.0.1 localhost - [09/Aug/2011:11:22:26 +0000] "GET /img_src.test.html HTTP/1.1" 200 188 "-" "Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0"
127.0.0.1 localhost - [09/Aug/2011:11:22:27 +0000] "GET /favicon.ico HTTP/1.1" 404 345 "-" "Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0"
Quirks (後方互換) モード
127.0.0.1 localhost - [09/Aug/2011:11:27:12 +0000] "GET /img_src.test2.html HTTP/1.1" 200 217 "-" "Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0"
127.0.0.1 localhost - [09/Aug/2011:11:27:13 +0000] "GET /img_src.test2.html HTTP/1.1" 304 0 "http://localhost/img_src.test2.html" "Mozilla/5.0 (Windows NT 5.1; rv:5.0) Gecko/20100101 Firefox/5.0"

また、後方互換モードだと、画像を表示できなかったマーク(?)が出てくる。

まとめ

後方互換モードの時にはリクエストが飛んでしまう模様。標準準拠モードではリクエストは飛ばないようだ(載せていないけど、HTML4のDOCTYPEを書いたものでも試したところ、アクセスログには記録されなかった)。

ということで、標準準拠したマークアップをしましょう、でFAでしょうか。