前回：やられアプリ BadTodo - 12 メールヘッダ・インジェクション - demandosigno
該当する機能がマウス操作のみで使用可能な場合、細工された外部サイトを閲覧し操作することにより、利用者が誤操作し、意図しない機能を実行させられる可能性があります。
安全なウェブサイトの作り方 p.41 1.9 クリックジャッキング
まず「安全なWebアプリケーションの作り方 第2版 4.5.2 クリックジャッキング」の実習環境の例から参照します。
こちら罠ページ（サイトA）ですが<iframe>タグを使って上に実際に投稿が行われるページ（サイトB）を重ね合わせ、かつサイトBの見た目を透明にしています。
（実習用仮想マシン (Docker版 Ver 1.1.0) だと「応募」ボタンが「投稿」ボタンとなっていて分かりにくかったので「応募」に直しています）
上に重ねられているサイトBの不透明度を上げていくと
サイトBが現れます。ボタンの位置が同じため、サイトAの「応募」をクリックしたつもりが実際には透明になって上に重ねられているサイトBの「投稿」をクリックすることになり「脅迫文」を掲示板に投稿してしまいます。
（BurpSuiteの組み込みChromiumブラウザだと不透明度の操作がうまく動かなかったためFirefoxで試しています。）
詳細
最初、部品を並べただけだと以下のようになります。
<form>要素と黄色のマージン部分があり、その下に<div>で「クリックしてスマートフォンを当てよう」の部分、その下に<iframe>があります（ iframe は frameborder="1" にして枠を表示させました）。
<div style="position: absolute; top:35; left:5; z-index:0;">クリックしてスマートフォンを当てよう</div>のように position: absolute で絶対位置を指定し上に移動させます。
同様に<iframe>も少しずらしてみます。また"z-index: 5"としてデフォルトより優先度を上げているため表側に重なります。
"position: absolute; top: 0px;"にして完全に重ねます。（opacity: 0; frameborder="0" にすれば完成です）
BadTodoの方でも試す
非公開のTodoを公開させます。
事前準備としてtestユーザで１件登録します。
「公開」チェックボックスにチェックが入っていないため非ログインユーザなどには公開されていません。
さて次のような罠ホームページ（trap.example.org）を作り、ログイン中のtestユーザがアクセスしたとします。
透かすとこう。クリックすると「公開」にチェックを入れ「更新」してしまうことになる。
クリック後。公開されてしまった。
CSRFと似た脆弱性と言えます。
実際にはインラインフレーム内のURLに item=10 と変更するitem番号を指定し、この番号の編集権限を持つユーザがアクセスする必要があるため単純にはいきません。
<html> <head> <meta charset="UTF-8"> <title>１００万円！</title> </head> <body style="background-color: #FFFFFF"> <div style="position: absolute; top:200; left:200; z-index:0;"><img src="./hacker.png" width="359" height="359"></div> <div style="position: absolute; top:150; left:300; z-index:0;">100万円あげるから</div> <div style="position: absolute; top:291; left:145; z-index:0;">○←ココと</div> <div style="position: absolute; top:569; left:47; z-index:0;">○←ココをクリック</div> <iframe src="https://todo.example.jp/edittodo.php?item=10" style="position: absolute; top: 0px; left: 0px; z-index: 5; opacity: 0;" width="880" height="750" frameborder="1"></iframe> </body> </html>
