← [ BACK_TO_NOTES ]

X-Frame-Options

X-Frame-Options 控制页面是否可以被 iframe 嵌入,防御点击劫持攻击。

#concept #evergreen #security #http #browser

[!info] related notes

X-Frame-Options

一句话定义

X-Frame-Options 告诉浏览器:这个页面是否允许被其他页面通过 iframe 嵌入,用于防御点击劫持攻击。

它要解决什么问题

点击劫持(Clickjacking):攻击者在自己的页面上用透明 iframe 嵌入目标网站,用户以为在点击攻击者的页面,实际上点击的是目标网站上的按钮(比如”确认转账”)。

攻击者的页面(可见)
  └── 透明 iframe 嵌入银行网站(用户看不见)
        └── 用户点击"领取奖品",实际点击的是"确认转账"

指令

DENY

X-Frame-Options: DENY

不允许任何页面 iframe 嵌入。包括同源页面也不行。

SAMEORIGIN

X-Frame-Options: SAMEORIGIN

只允许同源页面嵌入。比如 app.example.com 的页面可以被 app.example.com 的其他页面 iframe,但不能被 evil.com 嵌入。

现代替代:CSP frame-ancestors

CSP 的 frame-ancestors 指令比 X-Frame-Options 更灵活:

# X-Frame-Options 只有 DENY 和 SAMEORIGIN 两个选项
X-Frame-Options: SAMEORIGIN

# CSP frame-ancestors 可以指定具体来源
Content-Security-Policy: frame-ancestors 'self' https://partner.example.com

# 完全禁止嵌入
Content-Security-Policy: frame-ancestors 'none'

# 允许特定域名嵌入
Content-Security-Policy: frame-ancestors 'self' https://embed.example.com

对比

能力X-Frame-OptionsCSP frame-ancestors
完全禁止DENYframe-ancestors 'none'
只允许同源SAMEORIGINframe-ancestors 'self'
允许特定域名不支持frame-ancestors 'self' https://example.com
多个域名不支持支持
通配符不支持支持

推荐

如果只需要简单防护,X-Frame-Options 足够。如果需要精细控制(比如允许合作伙伴嵌入),用 CSP frame-ancestors。

两者可以同时设置,浏览器会同时检查。

边界与易混淆点

  • X-Frame-Options 是响应头,不是请求头:由被嵌入的页面设置,不是由 iframe 所在页面设置。
  • 它不影响 JavaScript 的 window.open:只管 iframe/object/embed 等嵌入方式。
  • ALLOW-FROM 已废弃:曾经有 ALLOW-FROM uri 选项,但因浏览器支持不一致已被废弃,用 CSP frame-ancestors 替代。
  • 同源检测基于页面的 URL,不是 iframe 的 URL:SAMEORIGIN 检查的是被嵌入页面的 origin 和嵌入它的页面的 origin 是否相同。

学习检查

不看正文回答:

  1. X-Frame-Options 防御的主要攻击是什么?
  2. DENY 与 SAMEORIGIN 分别允许哪些嵌入关系?
  3. 为什么 SAMEORIGIN 是指令值,不适合作为本笔记的通用别名?
  4. CSP frame-ancestors 相比 X-Frame-Options 提供了什么更细的控制?
  5. 为什么 X-Frame-Options 只解决“谁能 iframe 嵌我”,不能替代完整 CSP?
创建于 2026/5/24 更新于 2026/9/30
Digital Biome
Access

键盘导航

j / k / ↑ / ↓
选择对象
Enter / o
打开选择
/ 或 Ctrl+K
全站搜索
i / f / 1–4
筛选当前列表
g → h / l / p / t / a
首页 / 笔记 / 项目 / 工具 / About
r → 1–9
打开所选对象的关联
u
返回上一页
Esc
关闭浮层 / 取消命令;输入框内清空文本