ブラウザ振り分けクイズ

ちょっと思い出したのでクイズを書いてみます。

以下の条件で、IEでは、imgie.gif、 Firefoxでは、imgfx.gif、その他多くののブラウザでは、imgother.gif ノミを表示するHTMLを作ってください。

  1. JavaScriptなどのスクリプトは使わない
  2. CSSを通じてハックしない
  3. HTMLの書き方のみで勝負するが、validでなくても良い

※最新のブラウザで実現できなかったらすみません。なんだお、とか叱らないでくださいませ。

このテクで、ブラウザごとにJSファイルや外部スタイルシートとかを分別できないのかなぁと昔、妄想したことがあります。

コメントへのコメント&御礼

hasegawayosukeさんへ

http://d.hatena.ne.jp/hasegawayosuke/20070927/p1

なんと申しますか、すごいものを拝見させて頂きました。ある意味勉強になります。ありがとうございます。それにしてもいかにも長谷川さんらしい解といいますか。私が用意した回答例はもっと単純でシンプルなのです。恥ずかしくなってきました。

masaさんへ

ネットスケ−プナビゲータまで視野に入れていただき、興味深かったです。長年の蓄積を組み合わせてのチャレンジにうなりました。

Tietewさんへ

いやぁ、お懐かしい。
その後、某所では公益のために事実上孤軍奮闘獅子奮迅の闘いのようでしたが、陰ながら応援いたしておりました。がんばってください。(私が見たのは変な人を防ぐためのIPのブロック関連です)

追記:たけさこさん

  1. http://wafful.org/2007/09/27/new-browser-detection-web-20-html-hacks/
  2. http://wafful.org/2007/09/28/yet-another-browser-detection-html-slash-quote-20/

あぁぁぁぁぁぁ!!!!美しい。ウットリ。1番のほうは



<img x=` s\x00rc="safari2.gif" ` sr\x00c="ie.gif"
src\x00="webkit.gif" src\x0c="opera.gif"
src="gecko.gif" src="lynx.gif" />
ちなみに、"`" はIEで有効なのです、はい。

2番のほうは、CSSスクリプトもバイバリコードも使わない方式で多数のブラウザに対応していますから決定版ですね。

回答例

意図

出題の意図として、もちろん唯一の正解などないのだ、という願いが込められています。皆さんの回答例を拝見していて刺激になりまた勉強になります。

私が書こうと思っていた回答例はシンプルなものです。少々エレガントではないかと思っておりました。ブラウザごとにもってくるソースをHTMLだけで振り分けできれば面白いと思い探求したものです。

私の回答例

はじめに

on XPsp2にて、IE6,Firefox,Operaにて調べました。各ブラウザの構文解析の癖を利用しました。HTML断片のパース(構文解析)については各ブラウザともに重要部分であって頻雑には更新されないだろうと思っておりますので、他のOSやバージョンによって通用しない・・・ということはあまりないだろうと踏んでいます。

前提知識

以下の断片をご覧ください。各ブラウザは、foo.gifとbar.gifのどちらを表示するでしょうか。


<img src="foo.gif" src="bar.gif" >
私の知る限り、ブラウザはfoo.gifを表示するようです。例外があればご教示ください。また、こうなる根拠(標準)があればご教示くださると幸いです。ブラウザごとの構文解析の癖をつけば、特定のブラウザのみがfoo.gifを表示し、他のブラウザではbar.gifを表示することになるかもしれません。
従って、目標は、

<img IE用のsrc="foo.gif" Firefox用のsrc="bar.gif" 普通のブラウザ?用のsrc="buz.gif" >
近いものを探すこととなります。
現に、長谷川さんによる回答例では、上のようになっています。

スラッシュを使う


属性 = "属性値"
上記において、調べてみます。
IEにおいては、スラッシュを混ぜた以下の形式が有効です。

/属性 = "属性値"
また、Firefoxにおいては、スラッシュを混ぜた以下の形式が有効です。(長谷川さんから動かないよとツッコミありました。あれ?なのでFirefox1.508あたりで修正を試みました。古すぎ。)

属性/ = "属性値"

私のささやかな回答例

従いまして、上記の考えにより生まれたのが以下のHTML断片です。


<img
/src = "imgie.gif"
src/ = "imgfx.gif"
src = "imgother.gif"
>

余談

昔、XSS対策に我流がはなやかだったころ、officeさんの茶室においてさまざまな特定ウェブサイトのXSS検証が試みられていました。私は、≪属性 = "属性値"≫をふたつ重ねたらどうなるのだろうかと興味を持ち調べたことがあったのでした。つまり、


src="a.html" なにかの属性=$userdata
において、$userdataの中身にもう一回src属性を追加したら最初のsrc属性を上書きできるのではないかというチャレンジです。ブラックリストにおいてstyleやonイベントなどを消されていたとしてのベクターの探求でした。結果としてこういう方向は無理だとわかりました。いやぁ懐かしい。
あ、似たような例を今思いつきました。meta要素でセミコロンを使うやつ。あれ。これは既存の公開された知識ですね。
入力されたHTML断片をまじめに懸命に構文解析しながら、要素や属性ごとに分別しながらそれごとにブラックリストに載っている危険文字列を消すタイプを考えますと、考え込んでしまいますね。ブラウザごとに構文解析の癖がある以上、こうした抑止力には穴があるかもしれませんよ、ということになるからです。
はてなのHTMLの解析では徹底したホワイトリスト方式のようですのでその点、安心です。ただ、はてなスタイルシートの解析では(充分に練りあがられているとはいえ)ブラックリスト方式ですので、なんとなならないのかなぁといつも思っています。
というより、スクリプト起動を阻止できるようなスタイルシートホワイトリスト的なルーチンの決定版は、現存していないのかもしれません。作成されて広く公開されれば、非常に有効だと思うのですが。知られているように、W3Cが用意しているように、ありとあらゆるスタイルシートのバリデーションが可能なのですから、XSS防止のためのミニマムな検証版の作成、なんとかならないですかねぇ。
とまぁ、実は余談のほうが言いたかったことだったりしますです。はい。