点击劫持，也称为 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 应用程序。使用提供的示例来增强网站的安全性并为用户提供更安全的体验。