点击劫持与嵌入策略治理（X-Frame-Options/CSP frame-ancestors）最佳实践

背景与价值点击劫持通过不可信嵌入诱导用户操作。结合响应头策略与消息来源校验，可在浏览器层面系统阻断此类攻击。统一规范全局防护：默认 `X-Frame-Options: DENY` 与 `Content-Security-Policy: frame-ancestors 'none'`。受控嵌入：仅针对个别页面允许特定来源嵌入。消息来源校验：对 `postMessage` 的 `origin` 与 `data` 进行严格校验。核心实现响应头设置type Res = { setHeader: (k: string, v: string) => void } function setClickjackHeaders(res: Res, allowOrigins?: string[]) { if (!allowOrigins || allowOrigins.length === 0) { res.setHeader('X-Frame-Options', 'DENY') res.setHeader('Content-Security-Policy', "frame-ancestors 'none'") } else { res.setHeader('X-Frame-Options', 'SAMEORIGIN') const s = allowOrigins.map(o => `'${o}'`).join(' ') res.setHeader('Content-Security-Policy', `frame-ancestors ${s}`) } } postMessage来源校验const allowOrigins = new Set(['https://app.example.com','https://admin.example.com']) function isAllowedOrigin(o: string): boolean { try { const u = new URL(o); return allowOrigins.has(u.origin) } catch { return false } } function handleMessage(event: MessageEvent) { const origin = event.origin if (!isAllowedOrigin(origin)) return const data = event.data if (typeof data !== 'object' || typeof data.type !== 'string') return } 落地建议全站默认拒绝嵌入，针对确需嵌入的页面按来源白名单配置 `frame-ancestors`。针对嵌入通信统一校验 `origin` 与数据结构，拒绝不合规消息。与COOP/COEP协同治理，避免跨上下文资源共享导致的信息泄漏。验证清单是否统一下发 `X-Frame-Options` 与 `frame-ancestors` 并按页面差异化配置。嵌入通信是否进行来源与数据结构校验。