iframe 安全：点击劫持与 X-Frame-Options

点击劫持（用户界面重绘）会将目标网站嵌入诱饵页面上方的透明内嵌框架中。用户以为自己点击的是诱饵内容，实际上点击的是下方隐藏的、已完成身份验证的页面，从而在不知情的情况下执行目标网站上的操作。

攻击者会将 victim.com 加载到一个透明的内嵌框架中，并将其定位在“点击赢大奖！”按钮上方。当用户点击时，实际上点击的是 victim.com 的“删除账户”按钮，并且会以本人在 victim.com 会话 Cookie 中的身份完成身份验证。整个过程不需要钓鱼。

X-Frame-Options: DENY 会阻止页面在任何内嵌框架中加载。X-Frame-Options: SAMEORIGIN 只允许同源页面将其嵌入内嵌框架。请在服务器端为所有已完成身份验证的页面设置此标头，以防止点击劫持。

Content-Security-Policy: frame-ancestors 'none' 是对 X-Frame-Options: DENY 现代且更灵活的替代方案。frame-ancestors 'self' 可替代 SAMEORIGIN。frame-ancestors 还可以允许特定的受信任源：frame-ancestors https://trusted.example.com。

旧式破框机制使用 JavaScript 跳出框架。这类机制很容易被 sandbox 属性击败，因为该属性会阻止破框脚本运行。请始终使用服务器端标头（X-Frame-Options 或 CSP frame-ancestors），不要依赖不可靠的 JavaScript 破框机制。

允许框架嵌入的合理场景包括：在自己的源上嵌入自己的内容（SAMEORIGIN），以及允许特定合作伙伴嵌入您的小组件（使用带有特定源的 frame-ancestors）。请设计策略来允许这些场景，同时拒绝其他所有场景。

请同时设置 X-Frame-Options（用于较旧的浏览器）和 CSP frame-ancestors（用于现代浏览器），以实现最大范围的覆盖。当两者同时存在时，在支持 CSP 的浏览器中，frame-ancestors 优先。发送两者可以确保所有用户代理都受到点击劫持防护。

即使是同源内嵌框架也可能带来风险：如果嵌入页面存在存储型 XSS，那么在同源的情况下，它可以通过 parent.document 访问父级页面。对于不需要访问父级页面的同源内嵌框架，请使用不带 allow-same-origin 的 sandbox，以限制嵌入内容漏洞造成的损害。

请验证点击劫持防护：使用浏览器的网络选项卡，检查响应标头中是否包含 X-Frame-Options 或 CSP frame-ancestors。securityheaders.com 等工具可以分析标头。请创建一个带有内嵌框架、指向您网站的测试 HTML 页面，并确认该页面加载失败。

嵌入第三方内容（YouTube、Google 地图）时，您就是负责框架嵌入的一方，因此请确保被嵌入的服务允许根据其自身的 X-Frame-Options 策略进行框架嵌入。您无法嵌入禁止框架嵌入的网站——这是有意设计的，用于保护该服务的用户。

与大多数 CSP 指令不同，frame-ancestors 不能通过 HTTP-equiv 元标签设置，而必须作为 HTTP 响应标头发送。这样可以确保攻击者无法在浏览器读取元标签之前，通过篡改嵌入的 HTML 来移除防护。

为什么 JavaScript 破框代码不是可靠的点击劫持防御措施？

点击劫持会将已完成身份验证的页面嵌入透明内嵌框架，以劫持用户的点击。防御措施是使用服务器端的 X-Frame-Options: DENY 或 CSP frame-ancestors: none 标头。请同时设置两者，以覆盖不同浏览器。JavaScript 破框机制不可靠，请始终使用 HTTP 标头。frame-ancestors 能够细粒度地允许受信任的源，而 X-Frame-Options 无法做到这一点。