CSP 与 SRI 前端安全（指令、nonce/hash、strict-dynamic 落地）

CSP 与 SRI 前端安全（指令、nonce/hash、strict-dynamic 落地）概述内容安全策略（CSP）与子资源完整性（SRI）可有效防止 XSS 与供应链污染。本文总结关键指令与校验方法。关键实践与参数基本指令：`default-src 'none'` 作为兜底；明确 `script-src`、`style-src`、`img-src` 等来源。`nonce` 与 `hash`：为内联脚本/样式添加一次性 `nonce`；或使用 `sha256-...` 哈希白名单。`strict-dynamic`：允许带 `nonce` 的脚本动态加载下游脚本，减少域白名单依赖。SRI：`integrity` 属性（如 `sha384-...`）配合 `crossorigin="anonymous"` 验证第三方资源。示例（响应头与标签）Content-Security-Policy: default-src 'none'; base-uri 'self'; object-src 'none'; script-src 'self' 'nonce-<random>'; style-src 'self' 'nonce-<random>'; img-src 'self' data:; connect-src 'self'; frame-ancestors 'none'; <script nonce="<random>">/* 安全内联脚本 */</script> <link rel="stylesheet" href="/app.css" integrity="sha384-..." crossorigin="anonymous" /> <script src="https://cdn.example/app.js" integrity="sha384-..." crossorigin="anonymous"></script> 验证方法浏览器控制台检查 CSP 违规报告；启用 `report-to`/`report-uri` 收集。对第三方资源篡改模拟，确认 SRI 拦截与降级行为。灰度开启 `strict-dynamic` 并验证动态脚本加载路径。注意事项避免使用 `unsafe-inline` 与过度放宽的 `*`/`data:` 来源。`nonce` 必须每次请求随机且不可重用；后端模板正确注入。第三方脚本需评估可信域与最小权限原则。