JavaScript でのクリックジャッキング攻撃の防止-jsチュートリアル-php.cn

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

WBOY

リリース： 2024-07-22 17:56:39

オリジナル

1073 人が閲覧しました

Preventing Clickjacking Attacks in JavaScript

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

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

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

現実世界の例

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clickjacking Example</title>
</head>
<body>
    <h1>Welcome to Our Site</h1>
    <button onclick="alert('Clicked!')">Click Me</button>
    <iframe src="https://example-bank.com/transfer" style="opacity:0; position:absolute; top:0; left:0; width:100%; height:100%;"></iframe>
</body>
</html>

ログイン後にコピー

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

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

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

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Frame Busting Example</title>
    <script>
        if (window.top !== window.self) {
            window.top.location = window.self.location;
        }
    </script>
</head>
<body>
    <h1>Secure Site</h1>
    <p>This site is protected from clickjacking attacks.</p>
</body>
</html>

ログイン後にコピー

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

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

例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Frame Busting</title>
    <script>
        function preventClickjacking() {
            if (window.top !== window.self) {
                window.top.location = window.self.location;
            }
        }

        window.addEventListener('DOMContentLoaded', preventClickjacking);
        window.addEventListener('load', preventClickjacking);
        window.addEventListener('resize', preventClickjacking);
    </script>
</head>
<body>
    <h1>Secure Site</h1>
    <p>This site is protected from clickjacking attacks.</p>
</body>
</html>

ログイン後にコピー

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

サーバー側の保護

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

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

拒否: ドメインがページを埋め込むことを防ぎます。
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 アプリケーションを効果的に保護できます。提供されている例を使用して、サイトのセキュリティを強化し、ユーザーにより安全なエクスペリエンスを提供します。

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