子资源完整性（Subresource Integrity，SRI）安全机制与防护

1. 知识点描述

子资源完整性（SRI） 是一种安全机制，用于验证通过CDN或其他外部源加载的资源（如JavaScript库、CSS文件）是否被篡改。其核心原理是通过在HTML标签中附加加密哈希值，浏览器在加载资源时自动校验哈希是否匹配，若不匹配则阻止资源执行，从而防范恶意代码注入或CDN劫持攻击。

2. 为什么需要SRI？

背景问题

• 第三方资源风险：现代Web应用常依赖CDN加速公共库（如jQuery、Bootstrap），但若CDN被黑或遭到中间人攻击，资源可能被替换为恶意代码。
• 供应链攻击：攻击者通过污染开源库或劫持更新流程，使合法资源携带漏洞。
• 传统防护不足：HTTPS仅保证传输加密，无法验证资源内容是否被篡改。

示例场景

假设网站通过CDN加载jQuery：

<script src="https://cdn.example.com/jquery-3.6.0.min.js"></script>

若CDN被攻破，攻击者可能将jQuery替换为窃取用户数据的恶意脚本，而用户无法感知。

3. SRI的实现原理

步骤1：生成资源哈希值

开发者使用工具（如OpenSSL）对资源文件计算加密哈希值（通常用SHA-384），生成Base64编码的摘要。

openssl dgst -sha384 -binary jquery-3.6.0.min.js | openssl base64 -A

输出示例：
sha384-oqVuAfXRKap7fdgcCY5uykM6+R8GqS8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC

步骤2：在HTML中注入完整性校验

通过<script>或<link>标签的integrity属性指定哈希值，crossorigin="anonymous"确保跨域请求时发送凭据：

<script 
  src="https://cdn.example.com/jquery-3.6.0.min.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R8GqS8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossorigin="anonymous">
</script>

步骤3：浏览器验证流程

1. 下载资源文件。
2. 使用integrity指定的算法（如SHA-384）计算资源哈希值。
3. 比对计算值与integrity中的哈希值：
   • 匹配：正常加载资源。
   • 不匹配：阻塞资源执行，触发浏览器安全错误（如Chrome的net::ERR_FAILED）。

4. SRI的进阶应用与注意事项

多哈希值支持

为兼容不同版本或算法，可提供多个哈希值，浏览器使用第一个支持的算法：

<script 
  integrity="sha384-xxx sha512-yyy"
  src="https://cdn.example.com/library.js">
</script>

动态加载资源的SRI

通过JavaScript动态插入标签时，需显式设置integrity属性：

const script = document.createElement('script');
script.src = 'https://cdn.example.com/library.js';
script.integrity = 'sha384-xxx';
script.crossOrigin = 'anonymous';
document.head.appendChild(script);

局限性

• 缓存失效问题：资源内容更新时需重新计算并更新哈希值，否则浏览器会因校验失败拒绝加载。
• 仅适用于静态资源：无法保护动态生成的内容（如API响应）。
• 性能开销：浏览器需计算哈希，但对现代设备影响微乎其微。

5. 防护实践与工具链集成

开发流程集成

• 构建工具自动化：使用Webpack、Gulp等插件（如webpack-subresource-integrity）在构建时自动生成哈希并注入HTML。
• CI/CD校验：在流水线中检查所有第三方资源的SRI标签是否完整。

监控与应急

• SRI审计工具：使用Lighthouse或SecurityHeaders.com扫描缺失SRI的资源。
• 降级方案：若CDN资源失效，可回退到自托管副本或备用CDN。

6. 总结

SRI通过密码学哈希验证资源完整性，是防御供应链攻击和CDN劫持的关键技术。结合HTTPS、CSP等机制，可构建纵深防御体系。实际应用中需平衡安全性与维护成本，确保哈希值随资源更新同步调整。