クリックジャッキングは UI 修復とも呼ばれ、悪意のある攻撃者が iframe 内に Web ページを埋め込むことでユーザーをだまして、ユーザーが認識しているものとは異なるものをクリックさせる攻撃の一種です。これにより、不正なアクションが発生し、ユーザーのセキュリティが侵害される可能性があります。このブログでは、JavaScript と Apache および Nginx のサーバー構成を使用してクリックジャッキング攻撃を防ぐ方法を、わかりやすい例とともに説明します。

クリックジャッキングを理解する

クリックジャッキングには、正当なウェブページ要素の上に透明または不透明の iframe を配置することが含まれており、ユーザーは無意識のうちに設定の変更や資金の送金などのアクションを実行します。

現実世界の例

攻撃者が銀行サイトから信頼できる Web ページに非表示の iframe を埋め込むシナリオを考えてみましょう。ユーザーが一見無害なボタンをクリックすると、実際には銀行取引を承認している可能性があります。

脆弱なページの例は次のとおりです:

    
    
    


    
Welcome to Our Site
    Click Me
    

JavaScript によるクリックジャッキングの防止

クリックジャッキング攻撃を防ぐには、JavaScript を使用して Web サイトがフレーム化されていないことを確認します。この保護を実装する方法に関するステップバイステップのガイドは次のとおりです:

1. JavaScript フレームバスティング
フレームバスティングには、JavaScript を使用して、Web サイトが iframe 内に読み込まれているかどうかを検出し、そこから抜け出すことが含まれます。

例：

    
    
    
    


    
Secure Site
    
This site is protected from clickjacking attacks.

この例では、JavaScript は現在のウィンドウ (window.self) が最上位のウィンドウ (window.top) でないかどうかをチェックします。そうでない場合は、最上位のウィンドウを現在のウィンドウの URL にリダイレクトし、事実上 iframe から抜け出します。

2.イベント リスナーによるフレーム バスティングの強化
イベント リスナーを使用してページがフレーム化されているかどうかを継続的にチェックすることで、フレームバスティング手法をさらに強化できます。

例：

    
    
    
    


    
Secure Site
    
This site is protected from clickjacking attacks.

この例では、継続的な保護を確保するために、DOMContentLoaded、load、resize イベントでPreventClickjacking 関数が呼び出されます。

サーバー側の保護

JavaScript メソッドは便利ですが、サーバー側の保護を実装すると、追加のセキュリティ層が提供されます。クリックジャッキングを防ぐために Apache と Nginx で HTTP ヘッダーを設定する方法は次のとおりです:

1. X フレーム オプション ヘッダー
X-Frame-Options ヘッダーを使用すると、サイトを iframe に埋め込むことができるかどうかを指定できます。 3 つのオプションがあります:

DENY: ドメインがページを埋め込むことを防ぎます。
SAMEORIGIN: 同じオリジンからの埋め込みのみを許可します。
ALLOW-FROM uri: 指定された URI からの埋め込みを許可します。
例：

X-Frame-Options: DENY

Apache 構成
このヘッダーをサーバー構成に追加します:

# Apache
Header always set X-Frame-Options "DENY"

Nginx 構成
このヘッダーをサーバー構成に追加します:

2.コンテンツ セキュリティ ポリシー (CSP) フレームの祖先
CSP は、iframe を使用してページを埋め込むことができる有効な親を指定する、frame-ancestors ディレクティブを通じて、より柔軟なアプローチを提供します。

例：

Content-Security-Policy: frame-ancestors 'self'

Apache 構成
このヘッダーをサーバー構成に追加します:

例：

# Apache
Header always set Content-Security-Policy "frame-ancestors 'self'"

Nginx 構成
このヘッダーをサーバー構成に追加します:

# Nginx
add_header Content-Security-Policy "frame-ancestors 'self'";

結論

クリックジャッキングは Web セキュリティに対する深刻な脅威ですが、JavaScript フレームバスティング手法と、X-Frame-Options や Content-Security-Policy ヘッダーなどのサーバー側の保護を実装することで、Web アプリケーションを効果的に保護できます。提供されている例を使用して、サイトのセキュリティを強化し、ユーザーにより安全なエクスペリエンスを提供してください。