JavaScript -クリックジャッキング攻撃

こんにちは、将来のプログラマーたち！今日は、Webセキュリティの興味深い世界に飛び込み、特にクリックジャッキングという小さなトリックに焦点を当てます。プログラミングが初めての方也不用担心——私はこのトピックをステップバイステップでガイドします。これまでに数多くの生徒を指導してきましたから。それでは、始めましょう！

JavaScript - Clickjacking Attack

クリックジャッキング攻撃

あなたが可愛い猫のビデオをクリックしようとしているのに、間違って100匹のゴム鸭子を注文してしまう imagine してみてください。これがクリックジャッキング攻撃が行うことです——意図しないものをクリックさせられるのです。

クリックジャッキング、またはUIレデッシングとも呼ばれるこの攻撃は、ユーザーが見ているものとは異なるものをクリックさせようとする悪意のある技術です。これにより、意図しない操作やデータの盗難、甚至於マルウェアのインストールにつながる可能性があります。

クリックジャッキングはどのように働く？

この狡猾な攻撃が実際にどのように働くのか、見ていきましょう：

攻撃者は見た目では無害なWebページを作成します。
彼らは、 invisible iframe にターゲットサイト（攻撃者があなたに操作させたいサイト）を埋め込むます。
攻撃者のページは、ターゲットサイトのボタンやリンクを完全にオーバーレイするように設計されています。
あなたが攻撃者のページをクリックしていると感じている間、実は隠されたターゲットサイトとインタラクションしているのです。

魔术師の技巧と同じですが、Webページでのことです！

例

この概念をよりよく理解するために、いくつかのコード例を見てみましょう。まだすべてを理解できない場合は、心配しないでください——これから詳しく説明します！

例1: 基本的なクリックジャッキング

<html>
<head>
<title>賞を当てよう！</title>
<style>
#target_website {
position:relative;
width:128px;
height:128px;
opacity:0.00001;
z-index:2;
}
#decoy_website {
position:absolute;
width:300px;
height:400px;
z-index:1;
}
</style>
</head>
<body>
<div id="decoy_website">
<h1>ここをクリックして賞を獲得しよう！</h1>
<button>賞を請求する</button>
</div>
<iframe id="target_website" src="https://example.com/delete-account"></iframe>
</body>
</html>

この例では：

デコイサイトを作成し、賞を約束します。
ターゲットサイト（example.com/delete-account）を invisible iframe に埋め込むます。
iframe は「賞を請求する」ボタンの上に配置されます。
ユーザーがボタンをクリックすると、実はターゲットサイトのアカウント削除ボタンをクリックしているのです！

例2: ドラッグアンドドロップを使用したクリックジャッキング

<html>
<head>
<title>フォトエディタ</title>
<style>
#target_website {
position:absolute;
width:300px;
height:400px;
opacity:0.00001;
z-index:2;
}
#decoy_website {
width:300px;
height:400px;
z-index:1;
}
</style>
</head>
<body>
<div id="decoy_website">
<h1>画像をドラッグして編集する</h1>
<img src="cute_cat.jpg" draggable="true" ondragstart="drag(event)">
</div>
<iframe id="target_website" src="https://example.com/share-private-data"></iframe>
<script>
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
</script>
</body>
</html>

このより高度な例では：

フェイクのフォトエディタインターフェースを作成します。
ターゲットサイト（プライベートデータを共有する可能性のあるサイト）を invisible iframe に埋め込むます。
ユーザーが画像をドラッグアンドドロップしようとすると、知らず知らずのうちにターゲットサイトとインタラクションして、プライベート情報を共有する可能性があります。

実世界でのクリックジャッキングインシデント

クリックジャッキングは理論上の脅威だけでなく、実際の攻撃にも使用されています：

2008年に、Facebookを通じて拡散したクリックジャッキングワームがあり、ユーザーが知らずに特定のページの「いいね！」ボタンをクリックしていました。
2012年に、研究者がGoogleのAndroidアプリマーケットに対するクリックジャッキング攻撃を演示し、ユーザーが知らずにアプリを購入されることがありました。
2017年に、Microsoft Outlook Web Appにおけるクリックジャッキングの脆弱性が発見され、攻撃者が被害者のメールを読む可能性がありました。

これらのインシデントは、クリックジャッキング攻撃を理解し、予防することがいかに重要であるかを示しています。

防止策

危険性を知ったところで、どのようにクリックジャッキングを防ぐことができるか見てみましょう：

方法	説明	例
X-Frame-Options	ページがiframe内で表示されるのを防ぐHTTPヘッダー	`X-Frame-Options: DENY`
Content Security Policy	品質の源がどれであるかを細かく制御する	`Content-Security-Policy: frame-ancestors 'self'`
フレームブレイクスクリプト	iframeからブレイクするJavaScript	`if (top != self) top.location = self.location;`
SameSite Cookie	クロスサイトリクエストでcookieを送信しないようにする	`Set-Cookie: session=123; SameSite=Strict`

フレームブレイクスクリプトの簡単な例を見てみましょう：

<html>
<head>
<style>html{display:none;}</style>
<script>
if (self == top) {
document.documentElement.style.display = 'block';
} else {
top.location = self.location;
}
</script>
</head>
<body>
<h1>保護されたコンテンツ</h1>
<p>このページはクリックジャッキングから保護されています！</p>
</body>
</html>

このスクリプトは以下のことを行います：

最初にすべてのページを非表示にします。
ページが最上位のウィンドウであるか確認します。
もし最上位のウィンドウなら、コンテンツを表示します。
もし違う場合は（iframe内にある場合）、iframeからブレイクします。

Webセキュリティは猫とネズミのゲームのようです。新しい攻撃方法が登場するたびに、防御を強化していかなければなりません。好奇心を持ち続け、学び続け、Web開発において常にセキュリティを最優先に考えましょう！

このチュートリアルがクリックジャッキング攻撃を理解するのに役立ったことを願っています。素晴らしいコードの力を持ち、責任を持って使用してください。そして、ハッピーコーディング！

Credits: Image by storyset

前のチュートリアル:

JavaScript - IndexedDB

次のチュートリアル:

JavaScript - カリー化