如何使用 FileReader 读取二进制文件以便在 CryptoJS 中使用 SHA-256 对其进行哈希处理？

Question

如何使用 javascript 将 UTF-8 字符串转换为 Latin1 编码的字符串？

这是我想要做的：

1. 我得到一个文件，通过读取为 arraybuffer 将其分成块
2. 然后，我将数组缓冲区解析为字符串

3. 并使用以下代码将其传递给cryptoJS进行哈希计算：

   cryptosha256 = CryptoJS.algo.SHA256.create();
   cryptosha256.update(text);
   hash = cryptosha256.finalize();
   

这一切都适用于文本文件。使用代码对非文本文件（图像/.wmv 文件）进行哈希处理时遇到问题。我在另一个博客中看到，CryptoJS 作者要求使用 Latin1 格式而不是 UTF-8 发送字节，这就是我卡住的地方。

不确定，如何使用 javascript 中的 arraybuffer 的 Latin1 格式生成字节（或字符串）？

$('#btnHash').click(function () {
    var fr = new FileReader(), 
        file = document.getElementById("fileName").files[0];
    fr.onload = function (e) {
        calcHash(e.target.result, file);
    };
    fr.readAsArrayBuffer(file);
});
function calcHash(dataArray, file) {
    cryptosha256 = CryptoJS.algo.SHA256.create();
    text = CryptoJS.enc.Latin1.parse(dataArray);
    cryptosha256.update(text);
    hash = cryptosha256.finalize();
}

Answer 1

CryptoJS 不理解 ArrayBuffer 是什么，如果你使用像 Latin1 或 UTF-8 这样的文本编码，你将不可避免地丢失一些字节。并非每个可能的字节值在其中一种文本编码中都有有效的编码。

您必须将 ArrayBuffer 转换为 CryptoJS 的内部 WordArray，它将字节保存为单词数组（32 位整数）。我们可以将 ArrayBuffer 视为一个无符号 8 位整数数组，并将它们组合在一起构建 WordArray（参见arrayBufferToWordArray）。

下面的代码展示了一个完整的例子：

function arrayBufferToWordArray(ab) {
  var i8a = new Uint8Array(ab);
  var a = [];
  for (var i = 0; i < i8a.length; i += 4) {
    a.push(i8a[i] << 24 | i8a[i + 1] << 16 | i8a[i + 2] << 8 | i8a[i + 3]);
  }
  return CryptoJS.lib.WordArray.create(a, i8a.length);
}

function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  // Loop through the FileList and render image files as thumbnails.
  for (var i = 0, f; f = files[i]; i++) {
    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onloadend = (function(theFile) {
      return function(e) {
        var arrayBuffer = e.target.result;

        var hash = CryptoJS.SHA256(arrayBufferToWordArray(arrayBuffer));
        var elem = document.getElementById("hashValue");
        elem.value = hash;
      };

    })(f);
    reader.onerror = function(e) {
      console.error(e);
    };

    // Read in the image file as a data URL.
    reader.readAsArrayBuffer(f);
  }
}

document.getElementById('upload').addEventListener('change', handleFileSelect, false);

<script src="https://cdn.rawgit.com/CryptoStore/crypto-js/3.1.2/build/rollups/sha256.js"></script>
<form method="post" enctype="multipart/form-data">
  Select image to upload:
  <input type="file" name="upload" id="upload">
  <input type="text" name="hashValue" id="hashValue">
</form>

您可以使用my other answer 中的技术扩展此代码，以便在不冻结浏览器的情况下对任意大小的文件进行哈希处理。