勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

パスワードの強度を判定できる「zxcvbn」ライブラリの使用方法

  JavaScript

アカウントを作成するようなページで偶にパスワードの強度を判定してメーターで表示されるようなケースがある。具体的には半角アルファベットのみだと強度が足りず、数値や記号、大文字を組み合わせると強度が足りるようなもの。これを再現してみたく調べたところ「zxcvbn」というライブラリが良さそう。以下に実装方法をメモ。

 

サンプル

https://taitan916.info/sample/zxcvbn/

テキストボックスに文字を入力すると直下のバーに変動がある筈。

 

zxcvbn

GitHub

https://github.com/dropbox/zxcvbn

CDN

CDNで使う場合は以下を記述する。

<script src="https://cdn.jsdelivr.net/npm/zxcvbn@4.4.2/dist/zxcvbn.min.js"></script>

異なるバージョンを利用したい場合は以下から探す。

https://www.jsdelivr.com/package/npm/zxcvbn

 

実装方法

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>パスワードの強度を判定できる「zxcvbn」ライブラリの使用方法サンプル</title>
</head>
<body>

    <style>
    form{
        max-width: 500px;

        #pass{
            width: 100%;
            margin-bottom: 10px;
        }

        .bar_container{
            position: relative;
            width: 100%;
            height: 20px;
            background-color: #ddd;
            border-radius: 4px;

            .bar{
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                background-color: #ddd;
                border-radius: 4px;
            }
            .bar-0{
                width: 5%;
                background-color: #f00;
            }
            .bar-1{
                width: 25%;
                background-color: #ff8c00;
            }
            .bar-2{
                width: 50%;
                background-color: #ff0;
            }
            .bar-3{
                width: 75%;
                background-color: #0f0;
            }
            .bar-4{
                width: 100%;
                background-color: #0bF;
            }
        }
    }
    </style>

    <form>
        <input type="text" name="pass" id="pass" placeholder="パスワードを入力してください。">
        <div>
            パスワード強度
        </div>
        <div class="bar_container">
            <div class="bar"></div>
        </div>
    </form>

    <script src="https://cdn.jsdelivr.net/npm/zxcvbn@4.4.2/dist/zxcvbn.min.js"></script>
    <script>
    document.querySelector(`#pass`).addEventListener(`input`, function() {
        const result = zxcvbn(this.value);
        document.querySelector(`.bar`).className = `bar-${result.score} bar`;
    });
    </script>
</body>
</html>

解説等

resultに結果が入っており「result.score」を元に判定している。スコアは0から4まであり数値が高いとパスワード強度も高くなる。

尚、score以外にも色々返ってきており例えばresult.feedbackをconsole.logで見てみると以下のようなフィードバックが表示される。

Object { warning: "Straight rows of keys are easy to guess", suggestions: (2) […] }
​suggestions: Array [ "Add another word or two. Uncommon words are better.", "Use a longer keyboard pattern with more turns" ]
warning: "Straight rows of keys are easy to guess"

 

所感

「半角英数字・大文字アルファベット・記号を含む〇文字以上」等、しっかりとルールを決める場合はJavaScriptでバリデート処理する必要がありそうだけど、特にルールは無く簡易的で良いので強度測定を入れたいようなケースだと本ライブラリで対応できそう。

 - JavaScript

  関連記事

JavaScriptにてテキストボックスにサジェスト機能を実装できる「autoComplete.js」の利用方法

以前にjQuery UIでテキストボックスにサジェスト(入力補助)機能を実装する ...

JavaScriptで画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法

大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...

JavaScriptにて時間や長さの単位を変換及び計算できる「mathjs」ライブラリの利用方法

JavaScriptにて時間の単位を「分->時」に、長さの単位を「mm-& ...

バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法

あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無 ...

JavaScriptのライブラリ「crypto-js」を使用して暗号化・復号化・ハッシュ化する方法

JavaScriptにてCookie等にデータを保存する際に暗号化したものを保存 ...