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： ``` ``` - 生成哈希（示例命令）： ``` 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可显著提升前端资源安全，结合报告与自动化哈希管理在生产稳定落地。