点击劫持攻击和预防

---

在本文中，您将了解点击劫持攻击、它们的工作原理、它们如何使您的网站用户面临风险以及如何防止它。

什么是点击劫持？

点击劫持攻击诱使网站用户在不知情的情况下在网站上执行不需要的操作。它通过将目标网站分层在恶意网站上的不可见框架中来工作。当用户认为他们点击了攻击者页面上的按钮时，实际上他们点击了完全不同的网站上的某些内容。

一个例子

假设我们有一个防火墙管理员，他在https://firewall.example.

 

攻击者可以做的是创建这样的页面。它诱使用户单击按钮。实际上，用户会禁用防火墙，因为防火墙管理页面位于 iframe 中按钮的顶部。

 

当然，在真正的攻击中，我们不会有任何不透明度，因此页面看起来像这样：

 

的代码https://evil.example可能看起来（以非常简化的形式）如下：

  
WANT A MILLION DOLLARS?
  CLICK ME

现场演示

这是一个小的网络应用程序。您可以立即试用。单击按钮以启用和禁用防火墙，但将其保持打开状态，以便我们可以在一分钟内通过点击劫持攻击将其关闭。

你可以在这里分叉并玩弄演示和攻击。

防止点击劫持攻击

防止点击劫持攻击的唯一方法是阻止其他网站构建您的网站。有几种方法可以做到这一点。

X-Frame-Options 标头

您可以使用X-Frame-OptionsHTTP 响应标头告诉浏览器根本不要构建您的网站。

X-Frame-Options: DENY

或者，您只能允许取景，但只能来自您的网站。

X-Frame-Options: SAMEORIGIN

但是，X-Frame-Options不能用于允许特定网站构建您的网站，并且已被Content-Security-Policy. 在这里阅读更多。

有关X-Frame-Options浏览器支持的详细信息，请参阅此页面

内容安全策略

Content-Security-PolicyHTTP 响应标头有一个名为的指令，frame-ancestors您可以使用它来防止您的网站框架化。

Content-Security-Policy: ...other options... frame-ancestors 'none'

或者，就像X-Frame-Options您可以允许您的网站像这样构建自己的框架：

Content-Security-Policy: ...other options... frame-ancestors 'self'

使用 CSP 代替的主要好处X-Frame-Options是您还可以允许特定的外部网站来构建您的网站。

Content-Security-Policy: ...other options... frame-ancestors https://foo.example

frame-ancestors 在此处阅读有关 CSP 的更多信息。

有关浏览器支持的最新状态frame-ancestors，请查看此页面。

隔离政策

防止成帧的第三种方法是使用获取元数据标头实现隔离策略。但是，并非所有浏览器都支持获取元数据。因此，您还必须实现X-Frame-Optionsor 或Content-Security-Policywith frame-ancestors。

要实施防止成帧的隔离策略：

• 创建一个中间件类，根据其标头过滤 HTTP 请求。
• 根据获取元数据请求标头，阻止来自其他网站的请求。
• 如果您还想阻止您的网站自行构建框架，请同时阻止所有非指向文档的导航请求。

如果您不熟悉获取元数据标头，我知道这听起来有点抽象。这是一篇关于该主题的完整文章，其中包含一个可以在 CodeSandbox 上运行的完整示例。

有关获取元数据标头的浏览器支持的最新状态，请查看此页面。

概括

点击劫持攻击是对 Web 应用程序的真正威胁。防止它们的唯一方法是不允许其他网站构建您的 Web 应用程序。

幸运的是，浏览器使我们能够做到这一点。最重要的防御是部署一个X-Frame-Options或一个Content-Security-Policy阻止框架的头。

您可以通过实施带有获取元数据标头的隔离策略来阻止对服务器端帧的请求，从而实现一个很好的附加防御层。