← 返回 Clickjacking Lab

🛡️ 实验二：X-Frame-Options 防护

X-Frame-Options 是一个 HTTP 响应头，用于控制页面是否可以被 iframe 嵌入

📖 X-Frame-Options 选项

值 说明 使用场景
DENY 完全禁止被嵌入 敏感页面（登录、支付）
SAMEORIGIN 只允许同源页面嵌入 内部系统页面
ALLOW-FROM uri 允许指定来源嵌入 ⚠️ 已废弃，不推荐

🎮 对比演示

❌ 无防护
✅ X-Frame-Options: DENY

👆 左侧页面可以被嵌入，右侧页面被浏览器阻止

打开开发者工具 Console 可以看到错误信息

💻 服务端实现

Express.js

// 单个路由
app.get('/transfer', (req, res) => {
  res.setHeader('X-Frame-Options', 'DENY')
  res.send(html)
})

// 全局中间件
app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY')
  next()
})

// 使用 helmet 库
const helmet = require('helmet')
app.use(helmet.frameguard({ action: 'deny' }))

Nginx

add_header X-Frame-Options "DENY" always;

Apache

Header always set X-Frame-Options "DENY"

🔍 响应头对比

无防护页面:

HTTP/1.1 200 OK
Content-Type: text/html
// 没有 X-Frame-Options

有防护页面:

HTTP/1.1 200 OK
Content-Type: text/html
X-Frame-Options: DENY

⚠️ 注意事项

  • ALLOW-FROM 已被废弃，现代浏览器不支持
  • 推荐同时使用 CSP frame-ancestors 作为补充
  • X-Frame-Options 只能设置一个值，不能组合