Chrome环境下仅出现的FileReader计算SHA-256哈希异常问题

阿华AIGC实验室

2026-5-29

问题拆解与解决办法

你遇到的这个报错是Chrome对Web Crypto API的安全上下文限制造成的，我来详细说明原因和解决方案：

核心原因

Chrome 要求 Web Crypto API（也就是你代码里的 crypto.subtle）必须在安全上下文下才能使用，安全上下文的定义包括：

本地开发的 localhost/127.0.0.1 环境
HTTPS 协议部署的线上环境

当你把页面部署到使用 HTTP 协议的服务器上时，Chrome 会直接隐藏 crypto.subtle 对象，导致你调用 .digest() 时抛出「Cannot read property 'digest' of undefined」的错误。而 Safari 和安卓端浏览器对 HTTP 环境的限制没这么严格，所以能正常运行。

解决方案

1. 切换到 HTTPS 协议（最推荐）

这是解决问题的根本办法，现在主流云服务商都提供免费的 SSL 证书（比如 Let's Encrypt），给你的服务器配置 HTTPS 后，Chrome 就会正常暴露 crypto.subtle API，报错自然就消失了。

2. 代码优化（避免潜在问题+友好提示）

除了协议问题，你的代码还有几个小细节可以优化，避免闭包变量覆盖和未处理的错误：

不要在 reader.onload 里用 reader.result，改用 e.target.result——因为循环创建多个 FileReader 时，闭包会导致 reader 变量被最后一个实例覆盖，可能拿到错误的结果。
提前检查 crypto.subtle 是否可用，给用户友好提示，而不是直接报错。
增加文件读取和哈希计算的错误捕获，提升用户体验。

优化后的代码如下：

function convertStringToArrayBufferView(str) {
  var bytes = new Uint8Array(str.length);
  for (var iii = 0; iii < str.length; iii++) {
    bytes[iii] = str.charCodeAt(iii);
  }
  return bytes;
}

function convertArrayBufferToHexaDecimal(buffer) {
  var data_view = new DataView(buffer);
  var iii, len, hex = '', c;
  for(iii = 0, len = data_view.byteLength; iii < len; iii += 1) {
    c = data_view.getUint8(iii).toString(16);
    if(c.length < 2) {
      c = '0' + c;
    }
    hex += c;
  }
  return hex;
}

function hashIt() {
  // 先检查 Web Crypto API 是否可用
  if (!window.crypto || !crypto.subtle) {
    alert("当前环境不支持文件哈希计算，请使用HTTPS协议访问或更换浏览器");
    return;
  }

  var nBytes = 0, 
      oFiles = document.getElementById("documentIn").files, 
      nFiles = oFiles.length;

  for (var nFileId = 0; nFileId < nFiles; nFileId++) {
    var file = oFiles[nFileId];
    var reader = new FileReader();
    
    reader.onload = function(e) {
      // 使用 e.target.result 避免闭包变量覆盖问题
      var text = e.target.result;
      var buffer = convertStringToArrayBufferView(text);
      
      crypto.subtle.digest({name: "SHA-256"}, buffer)
        .then(function(result){
          var hashValue = convertArrayBufferToHexaDecimal(result);
          $("#documentHash").val(hashValue);
          console.log("计算出的哈希值:", hashValue);
        })
        .catch(function(err){
          console.error("哈希计算失败:", err);
          alert("文件哈希计算出错，请检查文件后重试");
        });
    };

    // 处理文件读取失败的情况
    reader.onerror = function(err) {
      console.error("文件读取失败:", err);
      alert("文件读取出错，请检查文件是否损坏");
    };

    reader.readAsText(file);
    nBytes += file.size;
  }
}