🔒 实验三：CSP frame-ancestors 防护

CSP frame-ancestors 是 Content-Security-Policy 的一个指令，比 X-Frame-Options 更灵活

📖 frame-ancestors 语法

值	说明	示例
`'none'`	禁止任何页面嵌入	等同于 X-Frame-Options: DENY
`'self'`	只允许同源嵌入	等同于 X-Frame-Options: SAMEORIGIN
`域名`	允许指定域名嵌入	`https://trusted.com`
`多个值`	允许多个来源	`'self' https://a.com https://b.com`

🎮 对比演示

❌ 无防护

✅ CSP: frame-ancestors 'none'

👆 右侧页面被 CSP 策略阻止嵌入，查看 Console 可见错误

💻 服务端实现

// Express.js
app.get('/transfer', (req, res) => {
  res.setHeader('Content-Security-Policy', "frame-ancestors 'none'")
  res.send(html)
})

// 允许特定域名
res.setHeader('Content-Security-Policy', "frame-ancestors 'self' https://trusted.com")

// Nginx
add_header Content-Security-Policy "frame-ancestors 'none'" always;

// Apache
Header always set Content-Security-Policy "frame-ancestors 'none'"

🔍 响应头

HTTP/1.1 200 OK
Content-Type: text/html
Content-Security-Policy: frame-ancestors 'none'

⚡ CSP vs X-Frame-Options

特性	X-Frame-Options	CSP frame-ancestors
多域名支持	❌	✅
通配符	❌	✅ `*.example.com`
浏览器支持	所有浏览器	现代浏览器
推荐程度	作为后备	✅ 首选

最佳实践：同时设置两个头，确保兼容性

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