サムネイル付のウェブ検索

take©です。
ある人とサムネイル付のウェブ検索の話をしたので試しに作ってみた。 ウェブページのサムネイルはiframe + transform: scale で、検索はGoogle AJAX Search APIを使いました。

ちなみに、Firefox 3.6以上でないと動作しないのでご注意ください。

Thumbnail Search（画像をクリックしても見ることができます）

クリックジャック？

さくっと作れると思っていたら以外なところではまってしまった。 検索結果にtwitterのページが存在すると、twitterにリダイレクトされてしまうじゃないか。なぜだ。

Twitter はiframeに表示できない - 0xFF
主要ブラウザすべてに影響する「クリックジャッキング」攻撃とは - INTERNET Watch

ほぉ、クリックジャック対策ですか。 twitterは過去にクリックジャックの被害にあっているようで、ユーザが意図しないつぶやきをさせられてしまうとうことがあったらしい。
ということで、さっそくtwitterの対策内容を拝見。

if (window.top !== window.self) {
	document.write = "";
	window.top.location = window.self.location;
	setTimeout(function(){
		document.body.innerHTML='';
	},1);
	window.self.onload=function(evt){document.body.innerHTML='';};
}

上記はtwitterに埋め込まれていたjavascriptだ。 なるほど。自分が親フレームでない場合は親フレームのwindow.locationを書き換えてしまってる。 さらにlocationを書き換えられなかった場合に備えてbodyのinnerHTMLを空っぽにしている。

どうしようもない気がするけど、とりあえずwindow.onbeforeunloadで回避？しました。
コードはこんな感じ。

window.onbeforeunload = function(event) {
	return "もしかすると、検索されたサイトがページの移動を要求しています。";
};

微妙なメッセージです。 だけどwindow.onbeforeunloadではページ移動なのか、リロードなのか、ページが閉じられようとしているのか、判断できないのです。
とりあえず、twitterが検索結果にヒットした場合、ダイアログが表示されるようになりました。 ダイアログで「キャンセル」を選択すればtwitterにリダイレクトされることはないです。（サムネイルはでませんが、、）
今回はこれで妥協しよう。

やはり便利さとセキュリティは裏表ですね。iframeは便利だけどその反面悪さもできるってこと。

おまけ

検索結果のサイトリンクが、アクセスしていないのにつねにvisited扱いになり、リンクがすべて紫色になってしまいしばらく悩んだ。 だけどよくよく考えればサムネイルにiframeを使っているので、検索結果を表示した時点ですべてのサイトにiframe経由でアクセス済みなんだね。 あぁばかばかしいところで悩んだ。
ということで意味ないからvisitedなリンクも青にしてしまえ。