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

2025-07-14 19:10| 來源: 網(wǎng)絡(luò)整理| 查看: 265

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

目次zxcvbnとは

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

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

zxcvbnのインストール

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

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

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

GitHub – dropbox/zxcvbn: Low-Budget Password Strength Estimation

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

CDNを使う

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

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

zxcvbn – Libraries – cdnjs – The #1 free and open source CDN built to make life easier for developer… npm, Bowerでインストールする

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

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

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

PR

無料で利用できるプログラミング學(xué)習(xí)サービスをお探しならば Code Lesson

はいかがでしょうか。プロのエンジニアが監(jiān)修した學(xué)習(xí)ロードマップで効率的に學(xué)習(xí)、AIに質(zhì)問、最後にクイズで理解度をチェックできます。 zxcvbnの使い方パスワードの強度を判定する手順

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

//パスワードの入力値を取得 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); //パスワードに対するフィードバック（改善案）

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

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が返す情報

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

result.password判定対象のパスワード文字列。result.guessesパスワードを解読するために必要な試行回數(shù)。result.guesses_log10試行回數(shù)の桁數(shù)。result.crack_times_secondsいくつかのシナリオに基づいたクラック時間の推測（秒）。以下のキーを持つ。online_throttling_100_per_hour #オンライン攻撃でパスワード認(rèn)証に回數(shù)制限が有る場合。online_no_throttling_10_per_second #オンライン攻撃でパスワード認(rèn)証に回數(shù)制限が無い場合。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の整數(shù)で表す。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を使用してパスワードをバリデーションし、結(jié)果に応じたメッセージを表示する例です。

Password: 送信

//フォームの要素を変數(shù)に入れておく 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 = ''; } });

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

実際に試してみようパスワード強度メーターを表示する

以下は、zxcvbnを使用してパスワード強度メーターを?qū)g裝する例です。

Password: .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; } //フォームの要素を変數(shù)に入れておく 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; } });

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

実際に試してみよう

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

さいごに

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

でわでわ

PR

無料で利用できるプログラミング學(xué)習(xí)サービスをお探しならば Code Lesson

はいかがでしょうか。プロのエンジニアが監(jiān)修した學(xué)習(xí)ロードマップで効率的に學(xué)習(xí)、AIに質(zhì)問、最後にクイズで理解度をチェックできます。

【本文地址】

公司簡介

聯(lián)系我們

今日新聞

推薦新聞

專題文章

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

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