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年以降のブラウザなら問題ないっぽい
- いずれにせよ、パスワードで使える文字の一覧は関数とは別のところに持っておくと良い
といったところでしょうか。
