JavaScript でのクリックジャッキング攻撃の防止

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

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

クリックジャッキングでは、透明または不透明の iframe を正規の Web ページ要素の上に配置し、ユーザーが無意識のうちに設定の変更や送金などのアクションを実行するようにします。

現実世界の例

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

脆弱なページの例を次に示します:

リーリー

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

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

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

例:

リーリー

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

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

例:

リーリー

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

サーバー側の保護

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

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

拒否: ドメインがページを埋め込むことを防ぎます。

SAMEORIGIN: 同じオリジンからのみ埋め込みを許可します。
ALLOW-FROM uri: 指定された URI からの埋め込みを許可します。
例:

リーリー

Apache構成

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

リーリー

Nginx 構成

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

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

例:

リーリー

Apache構成

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

例:

リーリー

Nginx 構成

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

リーリー

結論

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

以上がJavaScript でのクリックジャッキング攻撃の防止の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。