点击劫持

点击劫持示例

假设用户银行的网站是 https://my-bank.example.com。用户通常会保持在该网站上登录。为简单起见，我们假设该网站有一个按钮页面，该按钮可以将用户的所有资金转给攻击者 — 尽管这显然不现实，但该网站可能有一些执行敏感操作的交互式元素是合乎情理的。

攻击者创建一个包含以下内容的网页：

• 一个 <button> 元素，其内容鼓励用户点击它
• 一个 <iframe> 元素，嵌入了银行的页面。

<button id="fake-button">Click here for a free kitten!</button>
<iframe width="800" height="200" src="https://my-bank.example.com"></iframe>

在页面的 CSS 中，攻击者

• 隐藏 <iframe>，例如通过将其 opacity 设置为零
• 将按钮定位在与“转走所有钱？”按钮相同的位置。

iframe {
  opacity: 0;
}

#fake-button {
  position: absolute;
  top: 185px;
  left: 90px;
}

结果如下（我们将 <iframe> 的透明度设置为 0.1，以便您可以看到叠加层）

如果用户试图点击“点击这里免费获取小猫！”按钮，他们实际上将点击银行网站上不可见的“转走所有钱？”按钮。如果用户已登录，那么此操作发送到银行服务器的请求将包含用户的真实凭据，并且请求将成功。

点击劫持防御措施

点击劫持取决于目标网站是否被嵌入到攻击者的伪造网站的 <iframe> 中。主要的防御措施是禁止或至少控制此能力。

这里有两个相关的工具

• <a href="/en-US/docs/Web/HTTP/Guides/CSP#clickjacking_protection">frame-ancestors</a> 指令，位于 <a href="/en-US/docs/Web/HTTP/Guides/CSP">内容安全策略</a> 中
• <a href="/en-US/docs/Web/HTTP/Reference/Headers/X-Frame-Options">X-Frame-Options</a> 响应头。

frame-ancestors 指令是 X-Frame-Options 的替代品。通过同时设置 X-Frame-Options 和 frame-ancestors，您可以防止不支持 frame-ancestors 的浏览器进行嵌入。鉴于 <a href="/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/frame-ancestors#browser_compatibility">浏览器对 frame-ancestors 的支持非常好</a>，这并不是一个主要问题。

如果同时设置了 frame-ancestors 和 X-Frame-Options，那么支持 frame-ancestors 的浏览器将忽略 X-Frame-Options。

作为额外的部分缓解措施，网站应为会话 Cookie 设置 <a href="/en-US/docs/Web/HTTP/Reference/Headers/Set-Cookie#samesitesamesite-value">SameSite</a> 属性为 Lax 或 Strict。来自嵌入式上下文（例如 <iframe> 元素）且与顶层文档不是 <a href="/en-US/docs/Glossary/Site">同站</a> 的请求将不包含这些 Cookie，因此服务器不会将请求视为来自已登录用户的请求。

防御总结清单

• 设置 <a href="/en-US/docs/Web/HTTP/Guides/CSP#clickjacking_protection">frame-ancestors</a> CSP 指令以及 <a href="/en-US/docs/Web/HTTP/Reference/Headers/X-Frame-Options">X-Frame-Options</a> HTTP 响应头，以防止其他网站将您的网站嵌入为 <iframe>，或者严格控制哪些网站可以嵌入它。

• 为会话 Cookie 设置 <a href="/en-US/docs/Web/HTTP/Reference/Headers/Set-Cookie#samesitesamesite-value">SameSite</a> 属性为 Lax 或 Strict。

另见

• OWASP 网站上的点击劫持防御备忘单