ブラウザでピュアJavaScriptだけでハッシュを生成

外部ライブラリを使わずにピュアJavaScriptだけでブラウザ上でハッシュを生成する方法です。 これを実現するには、ブラウザ上で暗号化操作をするのに便利なCrypto.subtleというAPIを使います。(NOTE: この暗号APIは現時点 (2019/06/10) ではまだ Experimental (実験的) です。今後動作が変更される可能性があります。)

目次

• ブラウザでピュアJavaScriptだけでハッシュを生成
• ハッシュ化実験コード
• 対応ハッシュアルゴリズム
• 参考

ハッシュ化実験コード

以下の実験コードでは、"あいうえお"という文字列データをSHA-256ハッシュ化し出力しています。digest()がハッシュ化を行う関数でそのままだと生のArrayBufferを返しますので、hexString()という自作関数でArrayBufferをhex文字列化しています。(ブラウザで動作します):

// check the API support:
if (!crypto || !crypto.subtle) {
  throw Error("crypto.subtle is not supported."); // ブラウザ未対応
}

/*
 "SHA-1" (but don't use this in cryptographic applications)
 "SHA-256"
 "SHA-384"
 "SHA-512"
*/
const algo = "SHA-256";

// input data:
const str = "あいうえお";

// generate hash!
crypto.subtle.digest(algo, new TextEncoder().encode(str)).then(x => {
  console.log(`"${str}" => ${algo} (ArrayBuffer):`, x); // ArrayBuffer
  const hex = hexString(x); // convert to hex string.
  console.log(`"${str}" => ${algo} (Hex):`, hex);
});

/** array buffer to hex string */
function hexString(buffer) {
  const byteArray = new Uint8Array(buffer);
  const hexCodes = [...byteArray].map(value => {
    const hexCode = value.toString(16);
    const paddedHexCode = hexCode.padStart(2, '0');
    return paddedHexCode;
  });
  return hexCodes.join('');
}

実行結果
して 上記実験コードの実行結果(コンソールログ):

"あいうえお" => SHA-256 (ArrayBuffer): ArrayBuffer(32)
"あいうえお" => SHA-256 (Hex): fdb481ea956fdb654afcc327cff9b626966b2abdabc3f3e6dbcb1667a888ed9a

対応ハッシュアルゴリズム

現時点では下記のハッシュアルゴリズムに対応しています。digest()関数の第一引数に与えるパラメータです:

• "SHA-1"(既に脆弱なのでプロダクションでは使ってはいけない！)
• "SHA-256"
• "SHA-384"
• "SHA-512"

参考

• SubtleCrypto.digest() - Web APIs | MDN