Web应用CSP内容安全策略与XSS防护实践

概述CSP 通过限制资源加载与执行来源降低 XSS 风险。本文给出安全指令组合、部署与验证流程，配合工程化实践实现可度量的前端安全基线。核心指令组合（已验证）Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-<per-request-nonce>' 'strict-dynamic'; style-src 'self' 'nonce-<per-request-nonce>'; img-src 'self' data:; object-src 'none'; base-uri 'none'; frame-ancestors 'none'; upgrade-insecure-requests; connect-src 'self' https://api.example.com; form-action 'self'; 使用每请求随机 `nonce` 注入到允许的脚本与样式；拒绝 `unsafe-inline` 与 `unsafe-eval`。`strict-dynamic` 与可信入口配合，限制动态加载链。组件嵌入与点击劫持：通过 `frame-ancestors` 与必要时 `sandbox` 约束。工程化实践子资源完整性（SRI）：对第三方脚本启用 `integrity`，防篡改。DOM 清理：对富文本输入进行严格白名单过滤与转义（例如移除事件属性与危险标签）。资源域名治理：统一静态与接口域名，减少白名单扩散。部署与验证先以 `Content-Security-Policy-Report-Only` 观察违规上报，再切换强制策略。浏览器 DevTools 覆盖率与违例面板检查；指标：违例次数、来源分布与趋势；上线后逐步收紧策略。常见误区一次性上线过严策略导致业务受阻；应先报告后强制。误用通配符与过多可信来源，策略形同虚设。仅前端替换而后端未注入 `nonce`，导致脚本不可执行。结语以严格的 CSP 指令组合、按步骤的报告与强制切换，以及工程化的输入与依赖治理，可显著降低 XSS 风险并维持可度量的安全基线。