Ελέγξτε την ισχύ κωδικού πρόσβασης με JavaScript και κανονικές εκφράσεις

Ελέγξτε την ισχύ κωδικού πρόσβασης με JavaScript και κανονικές εκφράσεις

Έκανα κάποια έρευνα σχετικά με την εύρεση ενός καλού παραδείγματος ενός ελεγκτή αντοχής κωδικού πρόσβασης που χρησιμοποιεί το JavaScript Κανονικές εκφράσεις (Regex). Στην εφαρμογή στην εργασία μου, κάνουμε μια ανάρτηση για να επαληθεύσουμε την ισχύ του κωδικού πρόσβασης και είναι πολύ ενοχλητικό για τους χρήστες μας.

Τι είναι το Regex;

Μια κανονική έκφραση είναι μια ακολουθία χαρακτήρων που καθορίζουν ένα μοτίβο αναζήτησης. Συνήθως, τέτοια μοτίβα χρησιμοποιούνται από αλγόριθμους αναζήτησης συμβολοσειρών βρίσκω 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. Αυτό θα επέτρεπε σε οποιονδήποτε με εργαλεία ανάπτυξης προγράμματος περιήγησης να παρακάμψει το σενάριο και να χρησιμοποιήσει όποιον κωδικό πρόσβασης θέλει. Πρέπει ΠΑΝΤΑ να χρησιμοποιείτε έναν έλεγχο από την πλευρά του διακομιστή για να επικυρώσετε την ισχύ του κωδικού πρόσβασης πριν τον αποθηκεύσετε στην πλατφόρμα σας.

32 Σχόλια

  1. 1
  2. 2

    ΣΑΣ ΕΥΧΑΡΙΣΤΩ! ΣΑΣ ΕΥΧΑΡΙΣΤΩ! ΣΑΣ ΕΥΧΑΡΙΣΤΩ! Ξεγελάω για 2 εβδομάδες με καταραμένο κωδικό ισχύος κωδικού πρόσβασης από άλλους ιστότοπους και βγάζω τα μαλλιά μου. Η δική σας είναι σύντομη, λειτουργεί όπως ακριβώς θέλω και το καλύτερο απ 'όλα, είναι εύκολο να τροποποιηθεί ένας αρχάριος javascript! Ήθελα να καταγράψω την ετυμηγορία ισχύος και να μην αφήσω τη φόρμα ανάρτησης να ενημερώσει πραγματικά τον κωδικό πρόσβασης του χρήστη, εκτός εάν πληρούσε το τεστ ισχύος. Ο κωδικός των άλλων ήταν πολύ περίπλοκος ή δεν λειτούργησε σωστά ή κάτι άλλο. Σε αγαπώ! XXXXX

  3. 4

    Δόξα τω Θεώ για άτομα που μπορούν να γράψουν σωστά ένα κομμάτι κώδικα.
    Είχε την ίδια εμπειρία με τον Janis.

    Αυτό λειτουργεί έξω από το κουτί, το οποίο είναι ιδανικό για άτομα σαν κι εμένα που δεν μπορούν να κωδικοποιήσουν javascript!

  4. 5
  5. 6

    Γεια, πρώτα απ 'όλα ευχαριστώ για τις προσπάθειές σας, προσπάθησα να το χρησιμοποιήσω με το Asp.net αλλά δεν λειτούργησα, χρησιμοποιώ

    αντί για ετικέτα, και δεν λειτούργησε, προτάσεις ;!

  6. 7

    To Nisreen: ο κώδικας στο επισημασμένο πλαίσιο δεν λειτουργεί με cut'n'paste. Το μοναδικό απόσπασμα είναι χαλασμένο. Ωστόσο, ο κωδικός του συνδέσμου επίδειξης είναι εντάξει.

  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

    Σε ευχαριστώ που μοιράστηκες. Έχετε μερικούς σπασμένους συνδέσμους σε αυτήν τη σελίδα. FYI.

  18. 19

    μπορεί κάποιος να πει, γιατί δεν λειτούργησε δικό μου ..

    Αντιγράφω όλο τον κώδικα και τον επικολλάω στο σημειωματάριο ++, αλλά δεν λειτουργεί καθόλου;
    Σε παρακαλώ βοήθησέ με..

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

    Αυτός ο τύπος «ανιχνευτή δύναμης» οδηγεί τους ανθρώπους σε μια πολύ επικίνδυνη πορεία. Εκτιμά την ποικιλομορφία χαρακτήρων στο μήκος της φράσης πρόσβασης, οδηγώντας της να βαθμολογεί συντομότερους, πιο διαφορετικούς κωδικούς πρόσβασης τόσο ισχυρότερους από τους μεγαλύτερους, λιγότερο διαφορετικούς κωδικούς πρόσβασης. Αυτό είναι μια πλάνη που θα κάνει τους χρήστες σας σε μπελάδες αν αντιμετωπίσουν ποτέ σοβαρή απειλή εισβολής.

    • 25

      Δεν διαφωνώ, Ιορδανία! Το παράδειγμα απλώς παρουσιάστηκε ως παράδειγμα του σεναρίου. Η πρότασή μου για τα άτομα είναι να χρησιμοποιήσουν ένα εργαλείο διαχείρισης κωδικού πρόσβασης για να δημιουργήσουν ανεξάρτητες φράσεις πρόσβασης για κάθε ιστότοπο που είναι μοναδικός σε αυτόν. Ευχαριστώ!

  24. 26
  25. 27
  26. 28

    πραγματικά εκτιμώ ότι έχω αναζητήσει αυτό πολλές φορές, αλλά τέλος πήρα την ανάρτησή σας και πραγματικά έμεινα έκπληκτος. ΣΑΣ ΕΥΧΑΡΙΣΤΩ

  27. 29
  28. 31

    Σας εκτιμώ που μοιράζεστε! Ψάχνω να ενισχύσω τη δύναμη του κωδικού πρόσβασης στον ιστότοπό μας και αυτό λειτούργησε όπως ήθελα. Σε ευχαριστώ πάρα πολύ!

Ποια είναι η γνώμη σας;

Αυτός ο ιστότοπος χρησιμοποιεί το Akismet για να μειώσει το spam. Μάθετε πώς επεξεργάζονται τα δεδομένα των σχολίων σας.