JavaScriptでパスワードを自動生成するサンプル

パスワード関連の記事が続きましたので、ついでにJavaScriptでパスワードを生成する方法について記事にしたいと思います。

パスワードに限らず、ユーザー識別のために一時的なIDを生成したりするときにも使えると思います。

JavaScriptでパスワードを自動生成する例

サンプルコード

let password_base = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
function genPassword(length = 20)
{
	let password = '';
	for (let i = 0; i < length; i++) {
		password += password_base.charAt(Math.floor(Math.random() * password_base.length));
	}
	return password;
}

解説

見たまんまですが、パスワードで使える文字列をグローバル変数(password_base)に設定しておき、あとは文字数(length変数)分だけランダムに文字を抽出して繋げているだけですね。

乱数の偏りについて

Math.random関数はブラウザによって実装方法が微妙に異なり、かつては「線形合同法」という、実装が簡単で高速ではあるものの、乱数に偏りがあるアルゴリズムを採用しているブラウザが大半でした。

そのため、別のアルゴリズム(有名どころではメルセンヌツイスターあたり)を使ったJavaScriptライブラリなどがあるため、こちらを紹介しようかとも思ったのですが………

今あらためて調べてみたら、どうも2016年あたりから、Chrome/FireFox/Edgeなどの主要ブラウザは軒並みMath.random関数の仕様を変更したそうでして。XorShift128というアルゴリズムを採用しているそうです。

このXorShift128だと高速な上に乱数の偏りもないとか。それならわざわざJavaScriptライブラリを使う必要もないよね、ってことで上の例に落ち着きました。

パスワード生成ルールを選べるようにした例

上記のJavaScript例だけだと寂しい気がしたので、パスワードの生成ルール(数字、大文字、小文字、記号)を選べるようにした例も作ってみました。以下にHTMLも含めた全体を掲載します。

サンプルコード

<html><body>
<script>
let password_numeric = '1234567890';
let password_uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
let password_lowercase = 'abcdefghijklmnopqrstuvwxyz';
let password_symbol = '!"#$%&()=~|@[];:+-*<>?_>.,\'';

function genPassword(length = 20)
{
	let password = '';
	let password_base = '';
	//生成ルールの確認
	if (document.getElementById('rule_numeric').checked) password_base += password_numeric;
	if (document.getElementById('rule_uppercase').checked) password_base += password_uppercase;
	if (document.getElementById('rule_lowercase').checked) password_base += password_lowercase;
	if (document.getElementById('rule_symbol').checked) password_base += password_symbol;
	for (let i = 0; i < length; i++) {
		password += password_base.charAt(Math.floor(Math.random() * password_base.length));
	}
	return password;
}
function setPassword(id)
{
	let rule_length = document.getElementById('rule_length').value;
	document.getElementById(id).value = genPassword(rule_length);
}
</script>

<form>
<fieldset>
<legend>パスワード生成ルール</legend>
<input type="checkbox" id="rule_numeric" checked>数字
<input type="checkbox" id="rule_uppercase" checked>英大文字
<input type="checkbox" id="rule_lowercase" checked>英小文字
<input type="checkbox" id="rule_symbol" checked>記号<br>
長さ<input type="number" id="rule_length">
</fieldset>
<p>
<input type="button" onclick="setPassword('passwd');" value="パスワード生成">
<input type="text" id="passwd">
</p>
</form>

</body></html>

実行例

下記の[パスワード生成]ボタンをクリックすると自動的に20桁のパスワードが生成されます。

パスワード生成ルール 数字 英大文字 英小文字 記号
長さ

クリックするたびに違うパスワードが生成されるのが確認できると思います。

まとめ

  • JavaScriptでパスワードを自動生成をするにはMath.randomを使う
  • 昔はMath.randomに乱数の偏りがあったが2016年以降のブラウザなら問題ないっぽい
  • いずれにせよ、パスワードで使える文字の一覧は関数とは別のところに持っておくと良い

といったところでしょうか。

adsbygoogle

フォロー

『JavaScriptでパスワードを自動生成するサンプル』へのコメント

  1. 名前:horikiri 投稿日:2020/02/21(金) 00:36:06 ID:064f4c446 返信

    初めまして
    こちらのソースを改良して多様なパスワードの生成に使用したいと思い
    作業していましたが、つまずいたので質問させてください。
    パスワードのlengthが現在20となっていますが、ここを変数にして
    パスワード生成ルールに数字入力欄を追加して、そこに入力された数字を
    lengthとして扱いたいです。
    例えば、15と入力してパスワード生成ボタンをクリックするとlength15の
    パスワードが生成されるようにしたいのですがうまく行きません。

  2. 名前:とっちら 投稿日:2020/02/21(金) 15:35:00 ID:f9a2d55c8 返信

    サンプルコードのパスワード生成ルールに「長さ」を追加しておきましたのでご参照ください。