如何获取或计算浏览器实际接收文件的完整性哈希值？

核心结论 #

不能直接通过Web API获取浏览器内部为SRI（子资源完整性）校验计算出的哈希值。浏览器的SRI校验逻辑是内部封闭实现的，计算结果不会暴露给前端JavaScript，这是出于安全设计的考虑，避免恶意脚本利用该信息进行攻击。

关于Request.integrity的误区 #

你使用Request.integrity返回空字符串的原因是：这个API是用来设置请求的完整性校验规则，而非获取浏览器计算后的哈希结果。只有当你在创建Request实例时主动传入integrity参数，它才会返回你设置的值：

const myRequest = new Request('https://code.jquery.com/jquery-3.6.1.min.js', {
  integrity: 'sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ='
});
console.log(myRequest.integrity); // 输出你设置的哈希值

手动计算文件哈希的替代方案 #

如果你需要获取文件的哈希值，可以通过fetch获取文件内容，再用Web Crypto API手动计算，示例代码如下：

async function calculateFileHash(url, algorithm = 'SHA-256') {
  try {
    // 获取文件原始字节内容
    const response = await fetch(url);
    const arrayBuffer = await response.arrayBuffer();
    
    // 使用Web Crypto API计算哈希
    const hashBuffer = await crypto.subtle.digest(algorithm, arrayBuffer);
    
    // 转换为SRI格式的base64字符串
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    const hashBase64 = btoa(String.fromCharCode(...hashArray));
    
    return `${algorithm.toLowerCase()}-${hashBase64}`;
  } catch (error) {
    console.error('哈希计算失败:', error);
    return null;
  }
}

// 调用示例
calculateFileHash('https://code.jquery.com/jquery-3.6.1.min.js')
  .then(hash => console.log('计算得到的哈希值:', hash));

注意事项 #

• 手动计算的前提是资源允许跨域访问（服务器设置了正确的CORS响应头），否则fetch会触发跨域报错。
• 该方法计算的哈希值与浏览器SRI校验的结果完全一致，因为两者都是基于文件的原始字节内容进行计算的。

内容的提问来源于stack exchange，提问作者Ariel Gueta