点击劫持防护与UI安全（frame-ancestors/XFO）最佳实践

点击劫持防护与UI安全（frame-ancestors/XFO）最佳实践概述点击劫持通过跨站嵌入与视觉欺骗引导用户执行敏感操作。通过正确配置CSP与XFO并限制嵌入来源，可有效防护。响应头策略Content-Security-Policy: frame-ancestors 'none'

X-Frame-Options: DENY

嵌入白名单Content-Security-Policy: frame-ancestors 'self' https://trusted.example

X-Frame-Options: SAMEORIGIN

服务器统一设置function setClickjackingHeaders(res: any, allowTrusted = false) {

if (allowTrusted) {

res.setHeader('Content-Security-Policy', "frame-ancestors 'self' https://trusted.example")

res.setHeader('X-Frame-Options', 'SAMEORIGIN')

} else {

res.setHeader('Content-Security-Policy', "frame-ancestors 'none'")

res.setHeader('X-Frame-Options', 'DENY')

}

}

运维要点对关键页面默认使用 `frame-ancestors 'none'` 与 `DENY`如需嵌入，仅允许受控来源并进行最小化白名单管理监控嵌入失败与异常来源，配合COOP/COEP降低跨站风险通过CSP与XFO协同与严格白名单，可在常见Web场景下有效防护点击劫持并提升UI安全。