點擊劫持，也稱為 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 來確保您的網站不被框架。以下是有關如何實施此保護的逐步指南：
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中文網其他相關文章！
