CSP与SRI前端资源安全策略实践

概述目标：使用内容安全策略（CSP）与子资源完整性（SRI）限制资源来源并校验哈希，降低XSS风险与供应链攻击。适用：公共网站与管理后台、第三方脚本接入场景。核心与实战响应头示例（严格CSP）：Content-Security-Policy: default-src 'none'; script-src 'self' https://cdn.example.com 'nonce-abc123'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; connect-src 'self' https://api.example.com; frame-ancestors 'none'; base-uri 'self'; object-src 'none' HTML标签添加SRI与nonce：<script src="https://cdn.example.com/lib.min.js" integrity="sha384-Base64HashedValue" crossorigin="anonymous"></script> <script nonce="abc123">/* inline script allowed by nonce */</script> 生成哈希（示例命令）：openssl dgst -sha384 -binary lib.min.js | openssl base64 -A 示例动态nonce注入（后端）：const nonce = crypto.randomBytes(16).toString('base64') res.setHeader('Content-Security-Policy', `script-src 'self' https://cdn.example.com 'nonce-${nonce}'`) res.render('page', { nonce }) 阻止不可信来源：-- 测试从不同域加载脚本应被CSP阻止 验证与监控浏览器控制台：观察CSP违反报告与阻止日志；启用`Content-Security-Policy-Report-Only`进行灰度验证。报告端点：配置`report-uri`或`report-to`将违规事件上报以监控。SRI校验：修改脚本内容后SRI应失败并阻止加载；确保哈希更新流程加入发布管道。常见误区过度放宽策略（如`unsafe-inline`）导致效果下降；尽量使用nonce或严格来源。未更新SRI哈希导致合法更新被阻止；需在构建时自动生成与替换。忽视`Report-Only`阶段验证直接上线导致功能受影响；应先灰度验证。结语通过CSP与SRI可显著提升前端资源安全，结合报告与自动化哈希管理在生产稳定落地。