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

Question

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

这是我正在尝试做的事情：

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

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

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

这一切都适用于文本文件。使用散列非文本文件（图像/.wmv 文件）的代码时出现问题。我在另一个博客中看到 CryptoJS 作者要求使用 Latin1 格式而不是 UTF-8 发送字节，这就是我遇到的问题。

不确定，如何从 javascript 中的数组缓冲区使用 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>

您可以使用中的技术扩展此代码，以便在不冻结浏览器的情况下散列任意大小的文件。

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

How to read a binary file with FileReader in order to hash it with SHA-256 in CryptoJS?

javascript

utf-8

character-encoding

cryptojs

latin1