JavaScriptでより安全な乱数を生成できる「crypto.getRandomValues()」関数を使う方法を覚えよう

JavaScript上では関数で使用したり、セキュリティを高める都合上乱数が必要になるケースが多々あります。

その他にも一定の確率で処理を分けたいケースもあります。

そんな時に便利なのが「乱数」です。

JavaScriptでは、「乱数」を簡単に実行できる関数が用意されています。

一般的なのは「Math.random()」だと思いますが、実はよりセキュリティー関連向けの乱数の生成のために「crypto.getRandomValues()」が用意されています。

補足

ただし、crypto.getRandomValues()Math.random()より処理が圧倒的に重いので、速さを必要としないページ(ログイン画面とか新規登録画面)以外では使用しないことをお勧めします。

crypto.getRandomValues()の使い方

構文

関数(メソッド)意味返り値
crypto.getRandomValues(型付配列)乱数の配列を返す指定した配列
乱数の配列を返すメソッド

デモコード

使い方はセキュリティ認証に限りますので、やり方は決まりきっています。

下記の様に使います。(使い回し可)

Output
Pug
.container.my-5
  button#button.mb-4 Button
  div#number
 
SCSS
#button {
	--background-color: #fff;
  --color: #576574;
	--transition: all .3s;
	margin-bottom: 10px;
  background-color: var(--background-color);
  padding: 10px;
  color: var(--color);
	border: 1px solid #576574;
  cursor: pointer;
  width: 120px;
	transition:  var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}
JavaScript
const number = document.getElementById('number');

// ボタンをクリックしたら予め用意していたonClickAction()関数を実行する
document.querySelector('#button').addEventListener('click', onClickAction);

/** ボタンをクリックすると、乱数を書き換え */
function onClickAction() {
  // 32ビット符号なしの配列を10個取得してそれぞれ配列に格納後、それぞれの配列に乱数を上書き
  const randomValueArray = crypto.getRandomValues( new Uint32Array(10) );
	//16ビット符号なし
	//const randomValueArray = crypto.getRandomValues( new Uint32Array(10) );
	//64ビット符号なし
	//const randomValueArray = crypto.getRandomValues( new Uint32Array(10) );
	 //取得した配列を全てつなげて1つの文字列に変換する
	const randomValue = randomValueArray.join('');
	number.innerHTML = randomValue;
}

JavaScriptのサンプルコードの中で、ビット数を変更したり、元になる配列の数を変更することで、不可逆的な値を取得することができます。

ここまでやると、ハッカーにパスワードを解読されません。というか自分もできません。

インストラクター
コメント

コメントを残す