CSP+子资源校验，提升CDN安全防护

CSP虽能限制脚本加载来源，却无法防范CDN节点被篡改后返回恶意代码的风险；真正筑牢安全防线的关键在于与子资源完整性（SRI）深度协同：CSP负责“谁可以加载”，SRI通过integrity哈希+crossorigin="anonymous"严格校验“加载的内容是否原装未变”——二者缺一不可。但SRI绝非简单加个属性即可生效：它强制要求跨域资源启用CORS、哈希值必须随资源更新实时同步、构建部署流程需自动化保障一致性，稍有疏漏（如遗漏crossorigin、缓存策略失配或灰度发布不同步）便会令整套防护形同虚设。这不仅是前端安全配置，更是对工程化能力的实战考验。

单靠 CSP 无法防御 CDN 节点被篡改——它只管“从哪加载”，不管“加载来的东西对不对”。真正能拦住被污染脚本执行的，是 integrity 属性配合 crossorigin。CSP 和 SRI 必须一起用，且分工明确：CSP 控制来源白名单，SRI 校验内容指纹。

为什么 script-src 白名单对 CDN 劫持无效

CSP 的 script-src 指令只校验资源 URL 是否在许可列表里，不校验响应体内容。如果攻击者控制了 CDN 节点（比如中间代理劫持、CDN 服务商被入侵、或配置错误导致缓存污染），浏览器仍会加载并执行那个“看起来合法”但内容已被替换的 JS 文件。

• 典型现象：https://cdn.example.com/react.min.js 在 CSP 白名单中，但返回的是挖矿脚本
• CSP 日志里不会报错，Content-Security-Policy 响应头也完全合规
• 只有启用 SRI 后，浏览器才会在下载完成后比对哈希，不一致就直接丢弃该资源，且触发 onerror 事件

integrity 属性必须搭配 crossorigin 才生效

integrity 不是摆设，但浏览器强制要求跨域资源开启 CORS 才允许校验哈希——否则无法读取响应体做比对。

• 错误写法： → 浏览器静默忽略 integrity
• 正确写法：
• crossorigin="anonymous" 表示不带凭据（Cookie、Authorization）发起请求，这是最常用且安全的模式
• 若 CDN 返回的响应头不含 Access-Control-Allow-Origin，请求会失败；需确保 CDN 配置了正确的 CORS 头

CSP 如何配合 SRI 构建纵深防线

CSP 不替代 SRI，但能补上 SRI 顾不到的缺口：比如内联脚本、动态 import()、或未加 integrity 的旧资源。

• 把 script-src 设为严格白名单，禁用 'unsafe-inline' 和 'unsafe-eval'，逼迫所有脚本走外链 + SRI
• 对动态 import()，SRI 原生不支持，但可通过 SystemJS 或自定义加载器在 fetch 后手动校验哈希，再注入 URL.createObjectURL() 创建 blob URL
• 用 require-sri-for script style 指令强制所有脚本和样式必须带 integrity，否则直接拦截（注意：IE/Edge Legacy 不支持此指令）
• 示例 CSP 头：Content-Security-Policy: script-src 'self' https://cdn.example.com; require-sri-for script; block-all-mixed-content

生成和更新 integrity 值的实际约束

哈希不是写一次就一劳永逸——只要资源内容变，integrity 就必须重算，否则页面直接崩。

• 构建时用工具生成：Webpack 可配 SubresourceIntegrityPlugin，Vite 用户可用 vite-plugin-sri
• 不能手算 SHA256：命令行用 openssl dgst -sha384 -binary FILE.js | openssl base64 -A，注意必须用 binary 模式
• CDN 缓存策略要匹配：若 JS 文件名不带 hash（如 app.js），更新后旧 integrity 值立刻失效，用户可能卡在白屏
• 灰度发布时，不同用户拿到的 JS 内容可能不同，但 integrity 值只有一个——这会导致部分用户加载失败，必须同步更新 HTML 中的哈希值

最关键的细节往往藏在 crossorigin 和构建流程里：少写一个属性，或构建后忘了更新 HTML 中的哈希，整套机制就形同虚设。SRI 不是加个属性就完事，它把校验责任从网络层推到了构建与部署环节。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSP+子资源校验，提升CDN安全防护》文章吧，也可关注golang学习网公众号了解相关技术文章。