点击劫持防护

该 内容安全策略 frame-ancestors 指令和 X-Frame-Options 标头控制网站如何在另一个网站上的 <iframe> 中嵌入。这些功能有助于防止点击劫持。

问题

点击劫持 是一种攻击，恶意网站通过使链接或 UI 元素看起来像用户熟悉的受信任网站来欺骗用户点击。这通常是通过 <iframe> 将受信任网站的部分或全部嵌入到恶意网站中来实现的。然后，按钮、链接或其他 UI 功能将放置在该内容的顶部，以使用户认为他们正在与受信任的网站交互，而实际上他们正在与恶意网站交互。

解决方案

根据需要使用 HTTP 标头

  • Content-Security-Policy: frame-ancestors 是首选，因为它提供了对网站嵌入的更细粒度的控制。但是，它在 IE11 及更早版本、Chromium 版本之前的 Edge、Safari 9.1（桌面版）和 Safari 9.2（iOS 版）中不受支持。
  • X-Frame-Options 的粒度较低，但它在上面列出的旧版浏览器中受支持。

建议同时使用两者，除非您知道不需要支持旧版浏览器。

除非您确实需要，否则应拒绝所有嵌入您网站的尝试。当需要嵌入时，请提供必要的最小嵌入权限。需要在 <iframe> 中嵌入的网站必须使用 JavaScript 防御和强大的 Content-Security-Policy 来防止来自恶意来源的点击劫持。 Window.confirm() 可用作 JavaScript 防御的一部分，以通知用户他们即将执行的操作：请参阅 window.confirm() 保护。

每个设置的等效选项如下所示

CSP 值 X-Frame-Options 值 描述
frame-ancestors 'none' DENY 拒绝所有嵌入尝试。
frame-ancestors 'self' SAMEORIGIN 仅允许同源嵌入尝试。
frame-ancestors https://example.org ALLOWFROM https://example.org 允许来自指定域的嵌入尝试。

注意：X-Frame-Options: ALLOWFROM https://example.org 语法已弃用，大多数浏览器都会忽略它。建议在这种情况下改为设置 DENY，和/或依赖于 CSP 等效项。

注意：使用 SameSite 指令设置 Cookie 在依赖于用户身份验证的点击劫持情况下也很有用。

示例

使用 X-Frame-Options 和 CSP 阻止网站被嵌入

http
Content-Security-Policy: frame-ancestors 'none'
X-Frame-Options: DENY

仅允许在同源页面上嵌入网站

http
Content-Security-Policy: frame-ancestors 'self'
X-Frame-Options: SAMEORIGIN

仅允许 example.org 嵌入网站

http
Content-Security-Policy: frame-ancestors https://example.org
# Block embedding in browsers that don't support CSP2
X-Frame-Options: DENY

另请参阅