勉強したことのメモ

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

  関連記事

横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法

横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユー ...

Push.jsを用いてプッシュ通知を実装&Web Audio APIで通知音も鳴らす方法

プッシュ通知(デスクトップ通知)を実装してみたい。また、通知の際は分かりやすいよ ...

ブラウザ開発者ツールの起動を検出しソースコード変更やリダイレクト設定できる「console-ban」ライブラリの利用方法

他サイトのソースコードを拝見するため開発者ツールを開こうとすると、偶に「デバッガ ...

表示範囲を自由に変更可能な折れ線グラフが表示できるJSライブラリ amCharts の使用方法

どこかのサイトを閲覧していた際に、恐らくはJavaScriptのライブラリで描写 ...

JavaScriptにて数値の書式設定と操作を行える「Numerical.js」ライブラリの利用方法

以前JavaScriptで数値のカンマ区切り化とカンマ区切りの解除を行う方法をメ ...