ブラウザでローカルファイルのチェックサムを算出する方法

デモ

Checksum with JavaScript in browser

このデモではユーザーが選択したローカルファイルのチェックサムを md5, sha1, sha256, sha512 ハッシュ関数を使って計算して hex, binary, base64 エンコーディングして表示している。

動作確認環境

• Win7 IE11
• Win7 Chrome 44
• Win7 Firefox 40.0.3
• Mac OSX Chrome 44
• Mac OSX Safari 8.0.8
• Mac OSX Firefox 40.0.3
• Android Chrome 44
• iOS 8.4.1 Safari

使ったパッケージ

webpackやbrowserifyといったバンドラーがビルトインとして用意しているcryptoとbufferモジュール¹を使う。これらのパッケージはwebpack/browserifyともに内部的に同じパッケージに依存しているが、バージョンが違うため若干挙動が異なる。

webpack/webpack at v1.12.0

• webpack/node-libs-browser at v0.5.2
  • feross/buffer at v3.4.3
  • crypto-browserify/crypto-browserify at v3.2.8

substack/node-browserify at 11.0.1

• feross/buffer at v3.4.3
• crypto-browserify/crypto-browserify at v3.9.14

コード

この書き方をするとバージョンによる挙動の違いがない。

var crypto = require('crypto')
var $input = document.querySelector('input[type=file]')
var algorithm = 'md5'
var encoding = 'base64'

$input.addEventListener('change', function () {
  var file = $input.files[0]
  if (file == null) return

  var r = new FileReader()
  r.onerror = function (err) {
    console.error(err)
  }
  r.onload = function () {
    var buf = new Buffer(r.result)
    var hash = crypto.createHash(algorithm)
    hash.update(buf)
    console.log(hash.digest(encoding))
  }
  r.readAsArrayBuffer(file)
}, false)

1. FileReader#readAsArrayBuffer() でファイル内容を ArrayBuffer として読む。
2. 得られた ArrayBuffer を Buffer でラップする。
3. crypto.createHash() で Hash インスタンスを作る。
4. Hash#update() に Buffer インスタンスを渡しハッシュの内容を更新する。
5. Hash#digest() で目的のエンコーディングの結果を得る。

---

1. nodeのコアモジュールをブラウザ用に書き換えたモジュール ↩