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

Question

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

这是我想要做的:

1. 我得到一个文件,通过读取为arraybuffer将其拆分为块
2. 然后,我将arraybuffer解析为字符串

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

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

这一切都适用于文本文件.使用代码散列非文本文件(image/.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>

您可以使用我的其他答案中的技术扩展此代码,以便在不冻结浏览器的情况下散列任意大小的文件.