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

了解點擊劫持

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

現實世界的例子

考慮這樣一種情況：攻擊者將銀行網站的隱藏 iframe 嵌入到受信任的網頁中。當用戶點擊看似無害的按鈕時，他們實際上可能正在授權銀行交易。

以下是易受攻擊頁面的範例：

    
    
    


    
Welcome to Our Site
    Click Me
    

使用 JavaScript 防止點擊劫持

為了防止點擊劫持攻擊，您可以使用 JavaScript 來確保您的網站不會被陷害。以下是有關如何實施此保護的分步指南：

1. JavaScript 架構破壞
框架破壞涉及使用 JavaScript 來偵測您的網站是否在 iframe 內載入並突破它。

例子：

    
    
    
    


    
Secure Site
    
This site is protected from clickjacking attacks.

在此範例中，JavaScript 檢查目前視窗 (window.self) 是否不是最頂層視窗 (window.top)。如果不是，它會將最頂層的視窗重新導向到目前視窗的 URL，從而有效地突破 iframe。

2.使用事件偵聽器增強訊框清除
您可以透過使用事件偵聽器持續檢查頁面是否被框架來進一步增強框架破壞技術。

例子：

    
    
    
    


    
Secure Site
    
This site is protected from clickjacking attacks.

在此範例中，在 DOMContentLoaded、load 和 resize 事件上呼叫 PreventClickjacking 函數，以確保持續保護。

伺服器端保護

雖然 JavaScript 方法很有用，但實作伺服器端保護可以提供額外的安全層。以下是如何在 Apache 和 Nginx 中設定 HTTP 標頭以防止點擊劫持：

1. X-Frame-Options 標頭
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 應用程式。使用提供的範例來增強網站的安全性並為使用者提供更安全的體驗。