X-Frame-Options

用法

点击劫持攻击诱骗用户点击叠加在合法页面之上的隐藏元素。攻击者将目标站点嵌入一个透明的 iframe 中，在其上定位一个具有欺骗性的 UI，并捕获本意针对被框架内容的点击。X-Frame-Options 通过告知浏览器该响应是否允许出现在框架内来防止这种情况。

注意

X-Frame-Options 已被弃用，取而代之的是 CSP frame-ancestors。所有现代浏览器都支持 frame-ancestors，它提供更细粒度的控制，包括多个源和协议匹配。X-Frame-Options 仍被广泛部署，以便与较旧的浏览器保持向后兼容。

该头部接受两个有效值：DENY 和 SAMEORIGIN。第三个值 ALLOW-FROM 在早期实现中曾有定义，但现在已过时，会被现代浏览器忽略。

DENY

DENY 值阻止页面显示在任何框架中，无论请求方站点是谁。任何情况下都不允许框架嵌入。

SAMEORIGIN

SAMEORIGIN 值仅允许页面被共享同源的页面框架嵌入。https://example.re 上的页面允许框架嵌入另一个来自 https://example.re 的页面，但来自不同源的页面会被阻止。

ALLOW-FROM (obsolete)

ALLOW-FROM uri 值曾指示浏览器仅允许来自指定 URI 的框架嵌入。现代浏览器不再支持此指令。等价功能可通过 CSP frame-ancestors 指令实现：

Content-Security-Policy: frame-ancestors https://trusted.example.re

示例

阻止对页面的所有框架嵌入，这是针对点击劫持最严格的防护：

X-Frame-Options: DENY

允许同源框架嵌入，同时阻止外部站点嵌入该页面：

X-Frame-Options: SAMEORIGIN

一种纵深防御配置，将 X-Frame-Options 与 CSP frame-ancestors 指令结合，以获得广泛的浏览器覆盖：

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

疑难解答

当页面拒绝在另一个文档内渲染时，框架嵌入问题会表现为空白的 iframe 或控制台错误。

“Refused to display in a frame” 控制台错误。浏览器阻止被框架的页面并记录 Refused to display ‘https://example.re/’ in a frame because it set ‘X-Frame-Options’ to ‘DENY’（或 ‘SAMEORIGIN’）。请在 DevTools 的 Network 选项卡中检查被框架 URL 的响应头。如果页面需要被嵌入，请将头部值从 DENY 改为 SAMEORIGIN，或完全移除该头部并使用 CSP frame-ancestors 进行更精细的控制。

ALLOW-FROM 在现代浏览器中不起作用。ALLOW-FROM 指令已过时。Chrome、Firefox 和 Safari 会完全忽略该指令，将该头部视为未设置任何有效值。请用 CSP frame-ancestors 指令替换 ALLOW-FROM，它支持多个源：Content-Security-Policy: frame-ancestors https://trusted.example.re https://other.example.re。

X-Frame-Options 与 CSP frame-ancestors 冲突。当两个头部都存在时，支持 CSP Level 2 及以上的浏览器会忽略 X-Frame-Options，只遵循 frame-ancestors。缺乏 CSP 支持的较旧浏览器会回退到 X-Frame-Options。请确认预期的策略在两个头部之间保持一致。在 frame-ancestors ‘self’ 之外发送 X-Frame-Options: DENY 会造成不匹配：现代浏览器允许同源框架嵌入，而旧版浏览器则阻止所有框架嵌入。

合法的嵌入被阻止（支付表单、挂件、嵌入式应用）。当宿主页面发送 X-Frame-Options: DENY 时，需要 iframe 嵌入的第三方服务会失败。请使用 CSP frame-ancestors 将需要嵌入访问权限的特定源加入允许列表：Content-Security-Policy: frame-ancestors ‘self’ https://payments.provider.example.re。

从 X-Frame-Options 迁移到 CSP frame-ancestors。在过渡期内同时部署两个头部。将 frame-ancestors 设为匹配预期的框架嵌入策略。为不支持 CSP 的浏览器保留 X-Frame-Options。一旦旧版浏览器流量降至可接受的阈值以下，即可移除 X-Frame-Options 并仅依赖 frame-ancestors。请通过从允许的源在 iframe 中嵌入该页面并验证框架在多个浏览器中加载来测试迁移。