Как использовать Sha256 в файле (двоичном файле, таком как изображения) в javascript?

Я пытаюсь сделать Sha256 для файла в Javascript. Я использовал FileReader(HTML5) для чтения файла. Я использую функцию readAsBinaryString в FileReader для передачи файла изображений. Затем в функции FileReader.onload я передаю evt.target.result методу SHA256 в API CryptoJs. Я могу успешно получить хеш-значение, но оно неверно. Когда я передаю текстовый файл, он работает нормально, но не файл изображения.

Код (должна быть возможность скопировать приведенный ниже код в файл HTML и запустить его в Firefox - нажмите кнопку «весь файл»):

<style>
  #byte_content {
    margin: 5px 0;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #byte_range { margin-top: 5px; }
</style>

<input type="file" id="files" name="file" /> Read bytes: 
<span class="readBytesButtons">
  <button data-startbyte="0" data-endbyte="4">1-5</button>
  <button data-startbyte="5" data-endbyte="14">6-15</button>
  <button data-startbyte="6" data-endbyte="7">7-8</button>
  <button>entire file</button>
</span>
<div id="byte_range"></div><BR>
<div id="byte_content"></div><BR>
<div id="crypto_sha256"></div>

<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/sha256.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/components/enc-base64-min.js"></script>
<script>

  var sha256;

  function readBlob(opt_startByte, opt_stopByte) {

    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }

    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        document.getElementById('byte_content').textContent = evt.target.result;
        document.getElementById('byte_range').textContent = 
            ['Read bytes: ', start + 1, ' - ', stop + 1,
             ' of ', file.size, ' byte file'].join('');

        //**UPDATED SOLUTION: Since its binary data, the message needs to be converted from string to bytes using Latin1**
            sha256.update(CryptoJS.enc.Latin1.parse(evt.target.result));

        var hash = sha256.finalize();

        document.getElementById('crypto_sha256').textContent = ['SHA-256: ', hash].join('');
      }
    };

    var blob = file.slice(start, stop + 1);
    reader.readAsBinaryString(blob);
  }

  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      var startByte = evt.target.getAttribute('data-startbyte');
      var endByte = evt.target.getAttribute('data-endbyte');

      sha256 = CryptoJS.algo.SHA256.create();

      readBlob(startByte, endByte);
    }
  }, false);
</script>

Примеры выходных данных:

  1. Тестирование "текстового" файла:

    • SHA256 generated by Javascript:
      78cb5e86455dc8e3bc20fe17e0213a938281216d57b31f8307f5bca67c37bb09
    • SHA256, сгенерированный cygwin в том же файле:
      $ sha256sum Phillips.txt 78cb5e86455dc8e3bc20fe17e0213a938281216d57b31f8307f5bca67c37bb09 *SomeTestFile.txt
  2. Тестирование «двоичного» файла (pdf):

    • SHA256 generated by Javascript:
      57f93c1d20a8ad8ade984a1d9756c1a40600bd8a7527601945c4e0b5e042c605
    • SHA256, сгенерированный cygwin в том же файле:
      $ sha256sum Smoke\ Detector\ Brochure.pdf 57f93c1d20a8ad8ade984a1d9756c1a40600bd8a7527601945c4e0b5e042c605 *Smoke Detector Brochure.pdf

person user422930    schedule 20.12.2012    source источник
comment
Почему вы считаете, что это неправильно?   -  person Hunter McMillen    schedule 21.12.2012
comment
Распечатайте файл на экране FileReader.onload и сравните его с оригиналом. Это то же самое?   -  person Tyron    schedule 21.12.2012
comment
Я запустил sha256 для одного и того же файла в cygwin (sha256sum) и в java (MessageDigest.getInstance (SHA-256)). Cygwin и java дали мне один и тот же хэш sha256.   -  person user422930    schedule 21.12.2012
comment
Я прочитал файл в объекте FileReader, а затем использовал (e.target.result) для отображения файла на экране, и, похоже, он работал нормально.   -  person user422930    schedule 21.12.2012
comment
Должен ли я использовать readAsArrayBuffer для чтения в файле? Если да, то какой ArrayBufferView'er мне использовать? для бинарных файлов?   -  person user422930    schedule 22.12.2012
comment
Джефф Мотт, владелец CryptoJS, смог помочь мне решить проблему. Вот решение и объяснение Джеффа: проблемы с крипто-js   -  person user422930    schedule 24.12.2012
comment
Я обновил решение в коде выше.   -  person user422930    schedule 24.12.2012
comment
@ user422930 Вы обновили свой вопрос, чтобы он больше не был вопросом? Если да, то было бы лучше ответить на ваш вопрос вместо этого.   -  person stackprotector    schedule 28.08.2020


Ответы (2)


Я знаю, что этот вопрос довольно старый, но я решил, что все равно поделюсь тем, что знаю.

Вы можете сделать это проще, выполнив то, что я обсуждаю в этом ответе https://stackoverflow.com/a/17848266/2226207

По сути, вы можете включить компоненты/lib-typedarrays-min.js, а затем сделать следующее в коде.

var reader = new FileReader();

// If we use onloadend, we need to check the readyState.
reader.onloadend = function(evt) {
  if (evt.target.readyState == FileReader.DONE) { // DONE == 2

    var wordArray = CryptoJS.lib.WordArray.create(e.target.result);
    var hash = CryptoJS.SHA256(wordArray);
  }
};

var blob = file.slice(start, stop + 1);
reader.readAsArrayBuffer(blob);

Я не тестировал вышеуказанное решение, но оно должно работать нормально.

person Trey    schedule 25.07.2013

Вот простое решение: https://code.google.com/p/crypto-js/issues/detail?id=62

Когда вы передаете строку хэшеру, она преобразуется в байты с использованием UTF-8. Это делается для того, чтобы иностранные символы не обрезались. Поскольку вы работаете с двоичными данными, вам нужно преобразовать строку в байты, используя Latin1.

sha256.update(CryptoJS.enc.Latin1.parse(evt.target.result));
person phani    schedule 22.04.2015