點選劫持是一種攻擊型別，透過在 iframe 中嵌入網頁來誘騙使用者點選與他們所感知的不同的東西。這可能導致未經授權的操作並危及使用者安全。在本篇文章中，我們將探討如何使用JavaScript 和 Apache 和 Nginx 的伺服器配置來防止點選劫持攻擊。
首先我們一起來看看這樣一個場景:攻擊者將來自銀行站點的隱藏 iframe 嵌入到受信任的網頁中。當用戶點選一個看似無害的按鈕時，他們實際上可能是在授權一筆銀行交易。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
</head>
<body>
<button onclick="alert('Clicked!')">點我</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. 突破“Frame Busting ”
在“X-FRAME-OPTIONS”或者“瀏覽器防禦部署”被廣泛使用之前，網站防禦 ClickJacking 的唯一方法也只能使用 javascript 指令碼。我們把這樣的 javascript 指令碼稱為 "Frame Busting"，而突破“Frame Busting”的指令碼，則稱為 Busting Frame Busting。
“Frame Busting” 使用JavaScript來檢測網站是否載入在iframe內，是的話就會脫離它。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frame Busting</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。
使用事件監聽來增強 Frame Busting
可以透過使用事件監聽來持續檢查頁面是否有 Iframe，從而進一步增強 Frame Busting 技術：
<!DOCTYPE html>
<html>
<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 Header
X-Frame-Options Header允許使用者指定使用者的站點是否可以嵌入到 iframe中。有三種選項:
DENY:阻止任何域嵌入頁面。
SAMEORIGIN:只允許從同一個原點嵌入。
ALLOW-FROM uri:允許嵌入指定的 uri。
例如：
X-Frame-Options: DENY
Apache 配置：
# Apache Header always set X-Frame-Options "DENY"
2. Content-Security-Policy (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 應用程式。
