javascript中所有文件類型的正確MD5哈希

Question

在此處使用此庫：https://github.com/blueimp/JavaScript-MD5 我正在嘗試使用javascript在MD5中正確哈希文件。

到目前爲止，我得到正確的哈希值的文本文件，但如果我試圖散列圖像文件，我得到一個不正確的散列。

這可能是由於JavaScript FileReader如何讀取較大的圖像文件。我試過readAsBinaryString（），readAsArrayBuffer（）和readAsText（），它們都沒有提供正確的哈希與給定的庫。

我應該如何讀取文件以提供所有文件類型的正確散列，是否有更適合的庫適用於所有我應該使用的文件類型？

HTML：

<input id="file-to-hash" type=file> 
<button onclick="hashFile()">Hash</button> 

的Javascript：

function hashFile() { 

var file = document.getElementById('file-to-hash').files[0]; 

var reader = new FileReader(); 
reader.readAsArrayBuffer(file); 
reader.onload = readSuccess; 
} 

function readSuccess(evt){ 
fileContents = evt.target.result; 
var hash = md5(fileContents); 
} 

Answer 1

有現在SubtleCrypto API及其subtle.digest方法。

您將無法從此API獲取MD5哈希，因爲MD5 is not considered secure anymore。

但是你可以用其他更安全的算法（如SHA）獲得散列值。

function getHash(buffer, algo = "SHA-256") { 
 
    return crypto.subtle.digest(algo, buffer) 
 
    .then(hash => { 
 
     // here hash is an arrayBuffer, so we'll convert it to its hex version 
 
     let result = ''; 
 
     const view = new DataView(hash); 
 
     for (let i = 0; i < hash.byteLength; i += 4) { 
 
     result += ('00000000' + view.getUint32(i).toString(16)).slice(-8); 
 
     } 
 
     return result; 
 
    }); 
 
} 
 

 
f.onchange = e => { 
 
    const fR = new FileReader(); 
 
    fR.onload = e => getHash(fR.result) 
 
    .then(hash => console.log(hash)) 
 
// Chrome only accept it from an secure origin 
 
    .catch(e => { 
 
     if (e.code === 9) { 
 
     console.log(`Be sure to be on the https page : 
 
https://stackoverflow.com/questions/44036218/`) 
 
     } else { 
 
     console.log(e.message) 
 
     } 
 
    }) 
 
    fR.readAsArrayBuffer(f.files[0]); 
 
}

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