点击劫持等复杂攻击的出现使安全成为当今网络世界的首要问题。通过欺骗消费者点击与他们最初看到的内容不同的内容，攻击者部署了一种名为“点击劫持”的邪恶方法，这可能会带来灾难性的后果。此类攻击有可能诱骗人们下载恶意软件、发送私人信息，甚至做他们无意的事情，例如购买任何东西。为了防止此类攻击，JavaScript 是动态 Web 应用程序的重要组成部分。

在这篇博文中，我们将深入探讨点击劫持攻击的工作原理、它们为何如此危险，以及如何在 JavaScript 中实现点击劫持防御技术。我们将提供实用的代码示例和策略来帮助保护您的 Web 应用程序并防止这些恶意攻击。

了解点击劫持攻击

点击劫持是一种攻击类型，其中恶意网站通常使用 HTML 嵌入另一个网站，并在其上覆盖不可见或误导性元素，从而有效地“劫持”用户的点击。当用户与嵌入式页面交互时，他们认为自己正在单击可见网站上的按钮或链接，但实际上他们正在与隐藏的嵌入式网站进行交互。

以下是攻击者如何执行点击劫持攻击的基本示例：

    
    


    
Click the button to win a prize!
    Claim Prize
     

在上面的代码中，攻击者的页面显示为普通网页，但加载目标页面的不可见 iframe 覆盖在其顶部。用户认为他们正在与恶意页面进行交互，但他们实际上是在点击 iframe 中的元素。

为什么点击劫持是危险的

点击劫持可能会导致严重后果，包括：

无意购买：用户可能点击隐藏的“购买”按钮，导致不必要的交易。

帐户泄露：攻击者可以诱骗用户更改其设置或在他们信任的网站上提交敏感数据。

恶意软件下载：点击劫持可用于启动恶意文件下载，感染用户设备。

失去对社交媒体的控制：一些攻击涉及欺骗用户在社交媒体平台上点赞或分享内容。

这些攻击特别危险，因为用户通常不知道自己已受到损害，直到为时已晚。

防御 JavaScript 中的点击劫持

现在我们了解了点击劫持的工作原理，让我们探索可以在 JavaScript 中实现的各种防御技术。

1. 使用 X-Frame-Options 标头

X-Frame-Options HTTP 标头是防止您的网页嵌入其他网站的 iframe 的最简单、最有效的方法之一。此标头指示浏览器该网站是否可以嵌入 iframe 中。

X-Frame-Options header主要有3个选项：

DENY：阻止页面完全显示在 iframe 中。

SAMEORIGIN：仅当请求来自同一域时才允许嵌入页面。

ALLOW-FROM：允许页面仅由特定的受信任域嵌入。

以下是如何在 Node.js 中使用 JavaScript 设置此标头：

const express = require('express');
const helmet = require('helmet');

const app = express();

// Use helmet to set X-Frame-Options header
app.use(helmet.frameguard({ action: 'deny' }));

app.get('/', (req, res) => {
    res.send('Clickjacking prevention with X-Frame-Options');
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

在此示例中，hellip.frameguard() 中间件确保所有响应的 X-Frame-Options 标头设置为 DENY，通过禁止 iframe 嵌入来有效防止点击劫持。

1. 内容安全策略 (CSP)

另一种有效的防御机制是使用内容安全策略（CSP）标头。 CSP 标头提供了对内容嵌入方式和位置的更细粒度的控制。

为了防止点击劫持，您可以在 CSP 标头中包含frame-ancestors 指令。该指令允许您指定允许哪些域嵌入您的网站。

CSP 标头示例：

内容安全策略：框架祖先'self';

此政策确保只有同源（“自身”）才能将页面嵌入 iframe 中，有效防止其他网站这样做。

以下是如何在 Node.js 应用程序中实现 CSP：

const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.setHeader("Content-Security-Policy", "frame-ancestors 'self'");
    next();
});

app.get('/', (req, res) => {
    res.send('CSP frame-ancestors directive in action!');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

1. JavaScript 框架破坏技术

虽然依赖 X-Frame-Options 和 CSP 等标头通常更可靠，但您也可以使用 JavaScript 实现帧破坏。框架破坏脚本检测您的页面何时嵌入 iframe 并强制其脱离 iframe。

这是一个简单的 JavaScript 片段，用于检测和防止 iframe 嵌入：

if (window.top !== window.self) {
    // The page is embedded in an iframe, so redirect it
    window.top.location = window.self.location;
}

此代码检查当前窗口是否正在 iframe 中加载（window.top !== window.self）。如果是，它将父框架 (window.top) 重定向到 iframe (window.self) 的当前位置，从而有效地突破 iframe。

这是一项基本技术，可以被高级攻击者规避，因此它应该与 X-Frame-Options 和 CSP 等标头结合使用作为二级防御机制。

1. 使用 JavaScript 双重检查点击操作

另一种防御技术是为可能在点击劫持攻击中利用的关键操作添加确认对话框。通过要求用户确认其操作，您可以降低未经授权点击的风险。

以下是向按钮单击事件添加确认对话框的示例：

Delete Account

在此示例中，当用户单击“删除帐户”按钮时，会出现一个确认对话框。如果用户取消，则操作将被阻止。

1. 为嵌入内容实现沙盒属性

在您自己的网站上嵌入内容时，您可以使用 iframe 上的沙箱属性来限制嵌入内容的功能。这在嵌入不受信任的第三方内容时非常有用，因为它限制了嵌入内容的功能。

例如：

沙箱属性对 iframe 应用限制，例如禁用表单、脚本以及阻止 iframe 导航父页面。您可以通过添加像allow-scripts或allow-same-origin这样的值来选择性地允许某些功能。

结论：加强点击劫持防御

点击劫持是网络开发人员必须解决的严重安全风险，以保护用户和数据。通过实施防御技术（例如设置 X-Frame-Options 和 Content-Security-Policy 标头、使用 JavaScript 框架破坏技术以及为关键操作添加用户确认对话框），您可以显着降低 Web 应用程序遭受点击劫持攻击的风险。

将这些防御机制分层以确保全面保护至关重要，因为没有任何一种方法本身是万无一失的。通过组合多种策略，您可以使您的 Web 应用程序更能抵御点击劫持和其他形式的攻击。

参考链接：

OWASP：点击劫持防御备忘单

MDN Web 文档：内容安全策略 (CSP)

Google 网络基础知识：防止点击劫持

通过保持知情和警惕，您可以保护您的用户及其数据免受点击劫持的危险，确保更安全的浏览体验。