Механизмы хеширования файла в JavaScript

Question

Я относительно новичок в JavaScript и хочу получить хэш файла и хотел бы лучше понять механизм и код, лежащий в основе процесса.

Итак, что мне нужно: Хэш MD5 или SHA-256 загруженного файла на мой сайт.

Мое понимание того, как это работает: Файл загружается с помощью тега HTML input типа 'file ', после чего он преобразуется в двоичную строку, которая, следовательно, хэшируется.

Что у меня есть до сих пор: Мне удалось получить хэш ввода типа' text', а также, каким-то образом, хэш загруженного файла, хотя хэш не совпадал с веб-сайтами, на которые я смотрел онлайн, поэтому я предполагаю, что он хэширует некоторые другие детали файла, а не двоичную строку.

Вопрос 1: Правильно ли я понимаю, как хэшируется файл?Имеется в виду, является ли двоичная строка хэшированной?

Вопрос 2: Как должен выглядеть мой код для загрузки файла, его хеширования и отображения вывода?

Заранее спасибо.

Answer 1

По сути, да, вот как это работает.
Но, чтобы создать такой хэш, вам не нужно выполнять преобразование, чтобы зацепить себя.Вместо этого позвольте SubtleCrypto API обработать его самому и просто передать ArrayBuffer вашего файла.

async function getHash(blob, algo = "SHA-256") {
  // convert your Blob to an ArrayBuffer
  // could also use a FileRedaer for this for browsers that don't support Response API
  const buf = await new Response(blob).arrayBuffer();
  const hash = await crypto.subtle.digest(algo, buf);
  let result = '';
  const view = new DataView(hash);
  for (let i = 0; i < hash.byteLength; i += 4) {
     result += view.getUint32(i).toString(16).padStart(2, '0');
  }
  return result;
}
inp.onchange = e => {
  getHash(inp.files[0]).then(console.log);
};

<input id="inp" type="file">