首頁 > 文章 > web前端 > 防止 JavaScript 中的點擊劫持攻擊

防止 JavaScript 中的點擊劫持攻擊

WBOY原創: 2024-07-22 17:56:391058瀏覽

Preventing Clickjacking Attacks in JavaScript

點擊劫持，也稱為 UI 糾正，是一種攻擊類型，惡意行為者透過在 iframe 中嵌入網頁來誘騙用戶點擊與他們感知的內容不同的內容。這可能會導致未經授權的操作並危及用戶安全。在本部落格中，我們將探討如何使用 JavaScript 和 Apache 和 Nginx 的伺服器配置以及使用者友好的範例來防止點擊劫持攻擊。

了解點擊劫持

點擊劫持涉及在合法網頁元素上放置透明或不透明的 iframe，導致用戶在不知不覺中執行更改設定或轉移資金等操作。

現實世界的例子

考慮這樣一個場景：攻擊者將銀行網站的隱藏 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 來確保您的網站不被框架。以下是有關如何實施此保護的逐步指南：

1。 JavaScript 框架破壞
框架破壞涉及使用 JavaScript 來檢測您的網站是否已載入到 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 框架選項標頭
X-Frame-Options 標頭可讓您指定您的網站是否可以嵌入 iframe 中。有以下三個選項：

DENY：阻止任何網域嵌入您的頁面。
SAMEORIGIN：僅允許來自同一來源的嵌入。
ALLOW-FROM uri：允許從指定的 URI 嵌入。
例：

X-Frame-Options: DENY

Apache 設定
將此標頭加入您的伺服器設定：

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

Nginx 設定
將此標頭加入您的伺服器設定：

2。內容安全策略 (CSP) 框架祖先
CSP 透過frame-ancestors 指令提供了更靈活的方法，該指令指定可以使用 iframe 嵌入頁面的有效父級。

範例：

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中文網其他相關文章！

JavaScript nginx if for while using Event function this apache http ui embedding iframe

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：直方圖中最大的矩形下一篇：直方圖中最大的矩形

看更多