JavaScriptと正規表現でパスワードの強度を確認する

JavaScriptと正規表現でパスワードの強度を確認する

を使用するパスワード強度チェッカーの良い例を見つけるためにいくつかの調査を行っていました JavaScriptを 正規表現 (正規表現)。 私の職場のアプリケーションでは、パスワードの強度を確認するためにポストバックを行っていますが、これはユーザーにとって非常に不便です。

正規表現とは何ですか?

正規表現は、検索パターンを定義する一連の文字です。 通常、このようなパターンは、文字列検索アルゴリズムによって使用されます。 find or 見つけて交換する 文字列に対する操作、または入力検証用。 

この記事は、正規表現を教えるためのものではありません。 正規表現を使用できると、テキスト内のパターンを検索する際の開発が完全に簡素化されることを知っておいてください。 また、ほとんどの開発言語では正規表現の使用が最適化されていることに注意することも重要です。したがって、文字列を段階的に解析および検索するのではなく、Regexは通常サーバー側とクライアント側の両方ではるかに高速です。

見つける前にかなりウェブを検索しました 長さ、文字、記号の組み合わせを探すいくつかの優れた正規表現の例です。 ただし、コードは私の好みには少し過剰で、.NET用に調整されていました。 そこで、コードを簡略化してJavaScriptに入れました。 これにより、クライアントのブラウザでパスワードの強度をリアルタイムで検証してからポストバックします…そして、パスワードの強度に関するフィードバックをユーザーに提供します。

パスワードを入力

キーボードをストロークするたびに、パスワードが正規表現に対してテストされ、その下のスパンでユーザーにフィードバックが提供されます。




パスワードをうつ

これがコードです

  正規表現 コードの長さを最小限に抑えるという素晴らしい仕事をしてください。

  • より多くのキャラクター –長さが8文字未満の場合。
  • 弱い –長さが10文字未満で、記号、大文字、テキストの組み合わせが含まれていない場合。
  • ミディアム –長さが10文字以上で、記号、大文字、テキストの組み合わせがある場合。
  • 強い長さが14文字以上で、記号、大文字、テキストの組み合わせがある場合。

<script language="javascript">
    function passwordChanged() {
        var strength = document.getElementById('strength');
        var strongRegex = new RegExp("^(?=.{14,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
        var mediumRegex = new RegExp("^(?=.{10,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
        var enoughRegex = new RegExp("(?=.{8,}).*", "g");
        var pwd = document.getElementById("password");
        if (pwd.value.length == 0) {
            strength.innerHTML = 'Type Password';
        } else if (false == enoughRegex.test(pwd.value)) {
            strength.innerHTML = 'More Characters';
        } else if (strongRegex.test(pwd.value)) {
            strength.innerHTML = '<span style="color:green">Strong!</span>';
        } else if (mediumRegex.test(pwd.value)) {
            strength.innerHTML = '<span style="color:orange">Medium!</span>';
        } else {
            strength.innerHTML = '<span style="color:red">Weak!</span>';
        }
    }
</script>
<input name="password" id="password" type="text" size="15" maxlength="100" onkeyup="return passwordChanged();" />
<span id="strength">Type Password</span>

パスワードリクエストの強化

Javascript内のパスワード構成を検証するだけではないことが重要です。 これにより、ブラウザ開発ツールを持っている人なら誰でも、スクリプトをバイパスして、好きなパスワードを使用できるようになります。 プラットフォームに保存する前に、常にサーバー側のチェックを利用してパスワードの強度を検証する必要があります。

34のコメント

  1. 1
  2. 2

    ありがとうございました! ありがとうございました! ありがとうございました! 私は2週間、他のWebサイトからのパスワード強度コードをだまして、髪の毛を抜いてきました。 あなたのものは短く、私が望むように機能し、そして何よりも、JavaScriptの初心者が簡単に変更できます! 強度テストを満たさない限り、強度の判定をキャプチャし、フォームの投稿でユーザーのパスワードを実際に更新しないようにしたかったのです。 他の人のコードは複雑すぎたり、正しく機能しなかったりしました。 わたしは、あなたを愛しています! XXXXX

  3. 4

    実際にコードを正しく書くことができる人に感謝します。
    ジャニスと同じ経験をした。

    これは箱から出してすぐに機能し、JavaScriptをコーディングできない私のような人々に最適です!

  4. 5
  5. 6

    こんにちは、まず最初に私たちの努力に感謝します、私はこれをAsp.netで使用しようとしましたが、機能しませんでした、私は使用しています

    タグの代わりに、それは機能しませんでした、何か提案はありますか?!

  6. 7

    Nisreenへ:強調表示されたボックスのコードは、カットアンドペーストでは機能しません。 一重引用符がめちゃくちゃです。 ただし、デモリンクのコードは問題ありません。

  7. 8

    ねえ、私はあなたのスクリプトが好きです! オランダ語に翻訳して、こちらのフォーラムに投稿しました!

  8. 9
  9. 10
  10. 11

    「P @ s $ w0rD」は力強く表示されますが、辞書攻撃でかなり早くクラックされます…
    このような機能をプロフェッショナルソリューションに展開するには、このアルゴリズムを辞書チェックと組み合わせることが重要だと思います。

  11. 12
  12. 13

    この小さなコードのおかげで、訪問者がパスワードを入力したときにパスワードの強度をテストするために使用できるようになりました。

  13. 14
  14. 15
  15. 16
  16. 17

    とてもシンプルで幻想的な表現。 テスターとしての私は、この表現からTCを導き出しました。

  17. 18

    共有してくれてありがとう。 このページにはいくつかの壊れたリンクがあります。 ご参考までに。

  18. 19

    誰かが、なぜそれが私のものではなかったのかを知ることができます。

    すべてのコードをコピーしてnotepad ++に貼り付けましたが、まったく機能しませんか?
    私を助けてください..

  19. 20
  20. 21
  21. 22
  22. 23
  23. 24

    このタイプの「ストレングスチェッカー」は、人々を非常に危険な道へと導きます。 パスフレーズの長さよりも文字の多様性を重視するため、短くて多様性のあるパスワードは、長くて多様性の少ないパスワードよりも強力であると評価されます。 これは、ユーザーが深刻なハッキングの脅威に直面した場合にユーザーを困らせる誤謬です。

    • 25

      私は同意しません、ジョーダン! この例は、スクリプトの例として単純に出されたものです。 私が推奨するのは、パスワード管理ツールを使用して、そのサイトに固有のサイト用に独立したパスフレーズを作成することです。 ありがとう!

  24. 26
  25. 27
  26. 28

    何度も検索されて本当にありがとうございますが、最後にあなたの投稿を受け取り、本当に驚いています。 ありがとうございました

  27. 29
  28. 31

    共有していただきありがとうございます! 私たちのウェブサイトでパスワードの強度を強化することを探していましたが、これは私が望むように機能しました。 どうもありがとうございます!

  29. 33

    あなたはライブセーバーです! 私は文字列を左右中央で解析していて、もっと良い方法があると思い、正規表現を使用してコードを見つけました。 私のサイトのためにそれをいじくり回すことができました…あなたはこれがどれほど助けになったのか分かりません。 ダグラス、どうもありがとう!

どう思いますか?

このサイトはAkismetを使用して迷惑メールを減らします。 コメントの処理方法を学ぶ.