CryptJSを使う方法もあるが、今回はブラウザの標準のAPIのみで行う方法を紹介。
同様の方法でSHA256,SHA384,SHA512のハッシュも計算できる。
ポイント
- FileReaderはローカルファイルでも読みだし完了(onload)を待つ
- ファイルがバイナリの場合も想定してreadAsBinaryString()で読み出しておくと無難
- crypto.subtle.digest()は非同期で実行されるのでawaitなどで値を取得
- ArrayBuffer型でハッシュ計算結果が返ってくるのでHex表記など好みの形に成型する必要がある
<html>
<body>
<input id="inputfile" type=file />
<script>
async function digestMessage(algo, message) {
const msgUint8 = (new TextEncoder()).encode(message);// encode as (utf-8) Uint8Array
const hashBuffer = await crypto.subtle.digest(algo, msgUint8);// hash the message
const hashArray = Array.from(new Uint8Array(hashBuffer));// convert buffer to byte array
const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');// convert bytes to hex string
return hashHex;
}
document.querySelector('#inputfile').addEventListener('change', async function(ev){
if(!ev.target.files){
return;
}
if(!ev.target.files[0]){
return ;
}
const file = ev.target.files[0];
var reader = new FileReader();
reader.onload = async function(ev) {
if (ev.target.readyState != FileReader.DONE) {
return;
}
const bytes = ev.target.result;
const hashHex = await digestMessage('SHA-1', bytes);
alert(hashHex);
};
reader.readAsBinaryString(file);
});
</script>
</body>
</html>
参考
https://developer.mozilla.org/ja/docs/Web/API/SubtleCrypto/digest
https://developer.mozilla.org/ja/docs/Web/API/FileReader