CDN引入外部资源时启用integrity校验的优势

1. 什么是SRI与integrity属性？

SRI是一项W3C规范，它允许浏览器验证所获取的外部资源是否与预期内容完全一致。其核心是通过 integrity 属性在HTML标签中嵌入资源的加密哈希值：

<script 
  src="https://cdn.example.com/library.js"
  integrity="sha256-abc123..."
  crossorigin="anonymous">
</script>

当浏览器下载资源后，会计算其内容的哈希值，与 integrity 中的值比对。若匹配，则正常执行；否则拒绝执行并抛出错误。这有效防止了CDN被攻破、中间人攻击或意外文件损坏带来的风险。

2. 核心好处详解

• 阻断供应链攻击 — CDN作为第三方服务，其安全性不在我们直接控制范围内。integrity确保只有内容完全一致的文件才会被使用。
• 防御中间人篡改 — 在不强制使用HTTPS的环境中（虽然现在已少见），网络传输中的任意节点都可能篡改资源。integrity配合 crossorigin 属性，即便HTTP响应被修改，浏览器也能识别并拒绝。
• 混合内容场景下的安全感 — 对于老旧站点仍存在部分HTTP引用，integrity可在资源被降级攻击时提供额外验证层。
• 增强用户信任与合规性 — 金融、医疗等行业对数据安全有严格要求。SRI实施可作为安全审计中的加分项，体现对用户隐私的负责态度。

3. 如何正确添加integrity属性？

第一步：生成哈希值

主流CDN服务（如cdnjs、jsDelivr、unpkg）已直接在资源页面提供完整的 integrity 值。若自行托管或使用定制构建，可通过命令行生成：

# 生成SHA-384哈希（推荐）
cat library.js | openssl dgst -sha384 -binary | openssl base64 -A

# 或使用shasum
shasum -b -a 384 library.js | awk '{ print $1 }' | xxd -r -p | base64

最终格式为：sha384-{base64哈希值}

第二步：添加到HTML标签

<!-- 单个哈希 -->
<link 
  rel="stylesheet" 
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
  integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  crossorigin="anonymous">

<!-- 支持多哈希（备选算法） -->
<script 
  src="https://code.jquery.com/jquery-3.7.1.min.js"
  integrity="sha384-... sha512-...">
</script>

第三步：务必设置crossorigin属性

没有 crossorigin="anonymous"，浏览器会绕过SRI检查。该属性要求请求不带用户凭证，适用于公共CDN资源。