Parallels Desktop 25%OFFクーポンありますCheck!

zxcvbnでパスワードの強度判定 クソパスワードにダメ出しを!

zxcvbnの使い方

おはこんばんちわ。パスワードの強度を判定したい。そんなあなたにおすすめなのが、JavaScriptライブラリのzxcvbnです。今回は、zxcvbnの使い方や実装例について紹介していきます。

目次

zxcvbnとは

zxcvbnは、JavaScriptで書かれたパスワードの強度を判定するためのライブラリです。このライブラリはオンラインストレージで有名なDropboxが開発しました。

zxcvbnの名前の由来は、キーボードの左下のキー配列ですね。qwertyはクワーティと読みますが、zxcvbnはなんと読むのでしょうか。ChatGPT氏に聞いてみたら「ゼックスクバン」だと自信満々で教えてくれましたが、ググってみてもそれらしい情報は見当たりませんでした。

zxcvbnのインストール

zxcvbnをインストールするには、以下の3つの方法があります。

  • GitHubからダウンロードする
  • CDNを使う
  • パッケージ管理ツール(npm, Bower)を使う

GitHubからダウンロードする

GitHubからダウンロードするには、下記のページへ行って、緑色のボタンの「Code > Download ZIP」をクリックします。

ダウンロードしたZIPファイルを展開して、任意の場所に配置してください。そして、HTMLファイルで以下のように読み込みます。記述場所は<head>...</head>内だったり、</body>の直前だったり、お好きなところへどうぞ。

<script src="./zxcvbn-master/dist/zxcvbn.js"></script>

CDNを使う

CDNを使用する場合、以下のコードをHTMLファイルに追加することで、zxcvbnを使用できるようになります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.2/zxcvbn.js" integrity="sha512-TZlMGFY9xKj38t/5m2FzJ+RM/aD5alMHDe26p0mYUMoCF5G7ibfHUQILq0qQPV3wlsnCwL+TPRNK4vIWGLOkUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

最新のバージョンは、下記のページに取りに行ってください。

npm, Bowerでインストールする

npmBowerのようなパッケージ管理ツールを使ってインストールすることもできます。

#npmでzxcvbnをインストールする場合
npm install zxcvbn

#Bowerでzxcvbnをインストールする場合
bower install zxcvbn

以下のようなコードをHTMLファイルに追加することで、zxcvbnを使用できるようになります。下記はnpmでインストールした場合の例です。

<script src="./node_modules/zxcvbn/dist/zxcvbn.js"></script>

zxcvbnの使い方

パスワードの強度を判定する手順

zxcvbnを使って、ユーザが入力したパスワードの強度を判定する流れは下記のとおりです。

<!-- HTMLフォーム -->
<form>
  <input type="password" name="password" id="password-input" />
</form>

<!-- JavaScript -->
<script>
  //パスワードの入力値を取得
  const password = document.querySelector('#password-input').value;
  //パスワードの強度を判定
  const result = zxcvbn(password);
  //zxcvbnの出力
  console.log(result.score); //パスワードの強度を0~4のスコアで表す(4が最も強い)
  console.log(result.feedback.warning); //パスワードに対するフィードバック(警告)
  console.log(result.feedback.suggestions); //パスワードに対するフィードバック(改善案)
</script>

上記のように、zxcvbn()にパスワード文字列を渡すだけで、強度を判定してくれます。簡単ですね。また、第二引数として追加辞書を渡すこともできます。追加辞書は配列で次のように渡します。

zxcvbn(password, ['string1', 'string2', ...])

追加辞書には、愚かなユーザがパスワードに含めてしまいそうな文字列を入れます。例えば、ユーザ名、メールアドレス、電話番号、誕生日などです。

追加辞書を指定する場合としない場合でどんな違いがあるか見てみましょう。

//追加辞書を指定しない場合
const password = 'masawo_pw01';

const result = zxcvbn(password);
console.log(result.score);

/*出力
4
*/
//追加辞書を指定する場合
const userid = 'masawo';
const password = 'masawo_pw01';

const result = zxcvbn(password, [userid]);
console.log(result.score);

/*出力
2
*/

このように、追加辞書を指定すると、ユーザIDを含むパスワードの評価は下がりました。追加辞書をうまく活用しましょう。

zxcvbnが返す情報

上記のコードで、変数resultに入っている情報は実はもっとたくさんあります。

result.password判定対象のパスワード文字列。
result.guessesパスワードを解読するために必要な試行回数。
result.guesses_log10試行回数の桁数。
result.crack_times_secondsいくつかのシナリオに基づいたクラック時間の推測(秒)。以下のキーを持つ。
online_throttling_100_per_hour #オンライン攻撃でパスワード認証に回数制限が有る場合。
online_no_throttling_10_per_second #オンライン攻撃でパスワード認証に回数制限が無い場合。
offline_slow_hashing_1e4_per_second #オフライン攻撃で、bcrypt、scrypt、PBKDF2等を使ってハッシュ化している場合。
offline_fast_hashing_1e10_per_second #オフライン攻撃で、SHA-1、SHA-256またはMD5等を使ってハッシュ化している場合。
result.crack_times_displayresult.crack_times_secondsと同じキーを持つ、より分かりやすい文字列の値。
「less than a second」「3 hours」「centuries」など。
result.scoreパスワードの強度を0-4の整数で表す。
0 #弱い (guesses < 10^3)
1 #やや弱い (guesses < 10^6)
2 #普通 (guesses < 10^8)
3 #強い (guesses < 10^10)
4 #とても強い (guesses >= 10^10)
result.feedback.warningパスワードについての警告。例えば「this is a top-10 common password」など。空文字列の場合もある。
result.feedback.suggestionsパスワードを強化するための改善案。例えば「Add another word or two」など。空文字列の場合もある。
result.sequence測定に用いたパターンのリスト。
result.calc_time測定にかかった時間(ミリ秒)。

zxcvbnの実装例

バリデーションメッセージを表示する

以下は、zxcvbnを使用してパスワードをバリデーションし、結果に応じたメッセージを表示する例です。

<!-- HTMLフォーム -->
<form>
  <label>
    Password:
    <input type="password" name="password" id="password-input" />
  </label>
  <button type="submit">送信</button>
  <p id="feedback-message"></p>
</form>

<!-- JavaScript -->
<script>
  //フォームの要素を変数に入れておく
  const passwordInput = document.querySelector('#password-input');
  const feedbackMessage = document.querySelector('#feedback-message');
  const form = document.querySelector('form');

  //フォームが送信されるときにパスワードをチェックする
  form.addEventListener('submit', function (event) {
    event.preventDefault();
    const password = passwordInput.value;

    //zxcvbnによるパスワード強度チェック
    const result = zxcvbn(password);

    //バリデーションメッセージを表示する
    switch (result.score) {
      case 0:
        feedbackMessage.textContent = 'クソみたいなパスワードです';
        break;
      case 1:
        feedbackMessage.textContent = '使い物にならないパスワードです';
        break;
      case 2:
        feedbackMessage.textContent = 'つまらないパスワードです';
        break;
      case 3:
        feedbackMessage.textContent = 'まぁ合格のパスワードです';
        break;
      case 4:
        feedbackMessage.textContent = 'ファビュラスなパスワードです';
        break;
      default:
        feedbackMessage.textContent = '';
    }
  });
</script>

このコードでは、送信ボタンが押されると無名関数が実行されます。この関数はzxcvbnでパスワードをチェックして、スコアに応じてメッセージを表示します。

実際に試してみよう

パスワード強度メーターを表示する

以下は、zxcvbnを使用してパスワード強度メーターを実装する例です。

<!-- HTMLフォーム -->
<form>
  <label>
    Password:
    <input type="password" name="password" id="password-input" />
  </label>
  <div class="progress-bar-container">
    <div class="progress-bar" id="password-strength-meter"></div>
  </div>
</form>

<!-- CSS -->
<style>
  .progress-bar-container {
    position: relative;
    margin-top: 10px;
    width: 100%;
    height: 20px;
    background-color: #ddd;
    border-radius: 4px;
  }
  .progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #ddd;
    border-radius: 4px;
    transition: width 0.4s ease-in-out;
  }
  .strength-0 {
    width: 2%;
    background-color: red;
  }
  .strength-1 {
    width: 25%;
    background-color: orange;
  }
  .strength-2 {
    width: 50%;
    background-color: gold;
  }
  .strength-3 {
    width: 75%;
    background-color: yellowgreen;
  }
  .strength-4 {
    width: 100%;
    background-color: green;
  }
</style>

<!-- JavaScript -->
<script>
  //フォームの要素を変数に入れておく
  const passwordInput = document.querySelector('#password-input');
  const meter = document.querySelector('#password-strength-meter');

  //フォームの値が変更されたら、パスワードをチェックし、メーターのclassを書き換える
  passwordInput.addEventListener('input', function () {
    //zxcvbnによるパスワード強度チェックとスコアの取得
    const password = passwordInput.value;
    const strength = zxcvbn(password).score;

    //パスワードが入力されていないとき
    if (password.length === 0) {
      meter.className = '';
      //パスワードが入力されているとき
    } else {
      meter.className = 'progress-bar strength-' + strength;
    }
  });
</script>

このコードは、フォームの値が変更されると、zxcvbnによって入力値が評価され、スコアに応じて強度メーターのclass属性の値が変更されます。強度メーターは、CSSで指定したとおりにclassの値によって幅と色が変化します。

実際に試してみよう

なんか楽しくて、ずっと遊びたくなっちゃうよね。

さいごに

zxcvbnを使ってパスワードの強度を判定する方法を解説しました。この世からクソパスワードをなくす一助となれば幸いです。

でわでわ

プログラミング学習、お疲れさまです

プログラミングの独学に行き詰まっていませんか?誰かに相談したい、もっと効率よく学びたいなら、プログラミングスクールを検討してみてください。

zxcvbnの使い方

この記事が気に入ったら
いいね または フォローしてね!

シェアしてね

コメント

コメントする

目次