Σήμερα τα CAPTCHA αποτελούν αναπόσπαστο μέρος της ασφάλειας του ιστότοπου. Εκατομμύρια δοκιμές CAPTCHA ολοκληρώνονται διαδικτυακά κάθε μέρα.

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

Εδώ είναι όλα όσα πρέπει να γνωρίζετε για τα CAPTCHA και πώς μπορείτε να τα εφαρμόσετε εύκολα στον ιστότοπό σας χρησιμοποιώντας HTML, CSS και JavaScript.

Τι είναι το CAPTCHA;

Το CAPTCHA σημαίνει "Πλήρως αυτοματοποιημένη δημόσια δοκιμή Turing για να πει στους υπολογιστές και τους ανθρώπους εκτός." Αυτός ο όρος επινοήθηκε το 2003 από τους Luis von Ahn, Manuel Blum, Nicholas J. Χόπερ και Τζον Λάνγκφορντ. Είναι ένας τύπος δοκιμής απόκρισης πρόκλησης που χρησιμοποιείται για να προσδιοριστεί εάν ο χρήστης είναι άνθρωπος ή όχι.

Οι CAPTCHA προσθέτουν ασφάλεια στους ιστότοπους παρέχοντας προκλήσεις που είναι δύσκολο για την εκτέλεση ρομπότ αλλά σχετικά εύκολο για τον άνθρωπο. Για παράδειγμα, ο εντοπισμός όλων των εικόνων ενός αυτοκινήτου από ένα σύνολο πολλαπλών εικόνων είναι δύσκολο για τα ρομπότ, αλλά αρκετά απλό για τα ανθρώπινα μάτια.

Η ιδέα του CAPTCHA προέρχεται από το Turing Test. Το Turing Test είναι μια μέθοδος για να ελέγξετε εάν μια μηχανή μπορεί να σκέφτεται σαν άνθρωπος ή όχι. Είναι ενδιαφέρον ότι μια δοκιμή CAPTCHA μπορεί να ονομαστεί "αντίστροφη δοκιμή Turing", καθώς σε αυτήν την περίπτωση, ο υπολογιστής δημιουργεί τη δοκιμή που προκαλεί τον άνθρωπο.

Γιατί ο ιστότοπός σας χρειάζεται επικύρωση CAPTCHA;

Τα CAPTCHA χρησιμοποιούνται κυρίως για να αποτρέψουν την αυτόματη υποβολή φορμών από bots με ανεπιθύμητο περιεχόμενο και άλλο επιβλαβές περιεχόμενο. Ακόμη και εταιρείες όπως η Google το χρησιμοποιούν για να αποτρέψουν το σύστημα τους από ανεπιθύμητες επιθέσεις. Ακολουθούν ορισμένοι από τους λόγους για τους οποίους ο ιστότοπός σας επωφελείται από την επικύρωση CAPTCHA:

• Τα CAPTCHA συμβάλλουν στην αποτροπή ανεπιθύμητων ανεπιθύμητων μηνυμάτων από hackers και bots στα συστήματα εγγραφής δημιουργώντας ψεύτικους λογαριασμούς. Εάν δεν αποτρέπονται, μπορούν να χρησιμοποιήσουν αυτούς τους λογαριασμούς για κακόβουλους σκοπούς.
• Οι CAPTCHAs μπορούν να απαγορεύσουν τις βίαιες επιθέσεις από τον ιστότοπό σας, τις οποίες χρησιμοποιούν οι hackers για να προσπαθήσουν να συνδεθούν χρησιμοποιώντας χιλιάδες κωδικούς πρόσβασης.
• Τα CAPTCHAs μπορούν να περιορίσουν την αποστολή ανεπιθύμητων μηνυμάτων από το bots στην ενότητα αξιολόγησης παρέχοντας ψευδή σχόλια.
• Η CAPTCHA βοηθά στην πρόληψη του πληθωρισμού των εισιτηρίων καθώς μερικοί άνθρωποι αγοράζουν μεγάλο αριθμό εισιτηρίων για μεταπώληση. Το CAPTCHA μπορεί ακόμη και να αποτρέψει ψευδείς εγγραφές σε δωρεάν συμβάντα.
• Οι CAPTCHA μπορούν να περιορίσουν τους απατεώνες στον κυβερνοχώρο από την αποστολή ανεπιθύμητων μηνυμάτων σε ιστολόγια με άσχημα σχόλια και συνδέσμους σε επιβλαβείς ιστότοπους.

Υπάρχουν πολλοί ακόμη λόγοι που υποστηρίζουν την ενσωμάτωση της επικύρωσης CAPTCHA στον ιστότοπό σας. Μπορείτε να το κάνετε με τον ακόλουθο κωδικό.

Κωδικός HTML CAPTCHA

Το HTML, ή το HyperText Markup Language, περιγράφει τη δομή μιας ιστοσελίδας. Χρησιμοποιήστε τον ακόλουθο κώδικα HTML για να δημιουργήσετε τη φόρμα επικύρωσης CAPTCHA:

Captcha Validator Χρησιμοποιώντας HTML, CSS και JavaScript



κείμενο captcha




Φρεσκάρω

Αυτός ο κωδικός αποτελείται κυρίως από 7 στοιχεία:

• : Αυτό το στοιχείο χρησιμοποιείται για την εμφάνιση της επικεφαλίδας της φόρμας CAPTCHA.
• : Αυτό το στοιχείο χρησιμοποιείται για την εμφάνιση του κειμένου CAPTCHA.
• - Αυτό το στοιχείο χρησιμοποιείται για τη δημιουργία ενός πλαισίου εισαγωγής για την πληκτρολόγηση του CAPTCHA.
• : Αυτό το κουμπί υποβάλλει τη φόρμα και ελέγχει αν το CAPTCHA και το πληκτρολογημένο κείμενο είναι ίδιο ή όχι.
• : Αυτό το κουμπί χρησιμοποιείται για την ανανέωση του CAPTCHA.
• : Αυτό το στοιχείο χρησιμοποιείται για την εμφάνιση της εξόδου σύμφωνα με το εισαγόμενο κείμενο.
• : Αυτό είναι το γονικό στοιχείο που περιέχει όλα τα άλλα στοιχεία.

Τα αρχεία CSS και JavaScript συνδέονται με αυτήν τη σελίδα HTML μέσω του και στοιχεία αντίστοιχα. Πρέπει να προσθέσετε το Σύνδεσμος ετικέτα μέσα στο κεφάλι ετικέτα και γραφή ετικέτα στο τέλος του σώμα.

Μπορείτε επίσης να ενσωματώσετε αυτόν τον κώδικα με τις υπάρχουσες φόρμες του ιστότοπού σας.

Σχετιζομαι με: Το HTML Cheat Sheet Essentials: Ετικέτες, χαρακτηριστικά και άλλα

Κωδικός CSS CAPTCHA

Το CSS, ή Cascading Style Sheets, χρησιμοποιείται για το στυλ στοιχείων HTML. Χρησιμοποιήστε τον ακόλουθο κώδικα CSS για το στυλ των παραπάνω στοιχείων HTML:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
σώμα {
χρώμα φόντου: # 232331;
font-family: 'Roboto', sans-serif;
}
#captchaΕπιστροφή {
ύψος: 200px;
πλάτος: 250 εικονοστοιχεία;
χρώμα φόντου: # 2d3748;
οθόνη: flex;
Στοιχεία ευθυγράμμισης: κέντρο;
justify-content: κέντρο;
flex-direction: στήλη;
}
#captchaΕξέταση {
άσπρο χρώμα;
}
#captcha {
margin-bottom: 1em;
μέγεθος γραμματοσειράς: 30px;
διαχωρισμός γραμμάτων: 3px;
χρώμα: # 08e5ff;
}
. κέντρο {
οθόνη: flex;
flex-direction: στήλη;
Στοιχεία ευθυγράμμισης: κέντρο;
}
#κουμπί υποβολής {
margin-top: 2εμ;
margin-bottom: 2em;
χρώμα φόντου: # 08e5ff;
περίγραμμα: 0px;
γραμματοσειρά: έντονο;
}
#refreshButton {
χρώμα φόντου: # 08e5ff;
περίγραμμα: 0px;
γραμματοσειρά: έντονο;
}
#πλαίσιο κειμένου {
ύψος: 25px;
}
.λάθος κωδικός {
χρώμα: # FF0000;
}
.correctCaptcha {
χρώμα: # 7FFF00;
}

Προσθέστε ή καταργήστε ιδιότητες CSS από αυτόν τον κωδικό σύμφωνα με τις προτιμήσεις σας. Μπορείτε επίσης να δώσετε μια κομψή εμφάνιση στο κοντέινερ φόρμας χρησιμοποιώντας το Ιδιότητα box-shadow CSS.

Κωδικός CAPTCHA JavaScript

JavaScript χρησιμοποιείται για την προσθήκη λειτουργικότητας σε μια κατά τα άλλα στατική ιστοσελίδα. Χρησιμοποιήστε τον ακόλουθο κώδικα για να προσθέσετε πλήρη λειτουργικότητα στη φόρμα επικύρωσης CAPTCHA:

// document.querySelector () χρησιμοποιείται για την επιλογή ενός στοιχείου από το έγγραφο χρησιμοποιώντας το αναγνωριστικό του
let captchaText = document.querySelector ('# captcha');
Αφήστε το userText = document.querySelector ('# textBox');
αφήστε submButton = document.querySelector ('# submButton');
let output = document.querySelector ('# έξοδος');
let refreshButton = document.querySelector ('# refreshButton');
Το // alphaNums περιέχει τους χαρακτήρες με τους οποίους θέλετε να δημιουργήσετε το CAPTCHA
let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L "," M "," N "," O "," P "," Q "," R "," S "," T "," U "," V "," W "," X ", "Y", "Z", "a", "b", "c", 'd', 'e', ​​'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p ',' q ',' r ',' s ',' t ',' u ',' v ',' w ',' x ',' y ',' z ',' 0 ',' 1 ', "2", "3", "4", "5", "6", "7", "8", '9'];
αφήστε κενόArr = [];
// Αυτός ο βρόχος δημιουργεί μια τυχαία συμβολοσειρά 7 χαρακτήρων χρησιμοποιώντας alphaNums
// Περαιτέρω, αυτή η συμβολοσειρά εμφανίζεται ως CAPTCHA
για (let i = 1; i <= 7; εγώ ++) {
blankArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = blankArr.join ('');
// Αυτός ο ακροατής συμβάντων ενεργοποιείται κάθε φορά που ο χρήστης πατά το κουμπί "Enter"
// "Σωστός!" ή "Λανθασμένο, δοκιμάστε ξανά" το μήνυμα είναι
// εμφανίζεται μετά την επικύρωση του κειμένου εισαγωγής με το CAPTCHA
userText.addEventListener ('keyup', συνάρτηση (ε) {
// Η τιμή του βασικού κωδικού του κουμπιού "Enter" είναι 13
εάν (e.keyCode 13) {
εάν (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Σωστό!";
} αλλιώς {
output.classList.add ("SalahCaptcha");
output.innerHTML = "Λανθασμένο, δοκιμάστε ξανά";
}
}
});
// Αυτός ο ακροατής συμβάντων ενεργοποιείται κάθε φορά που ο χρήστης κάνει κλικ στο κουμπί "Υποβολή"
// "Σωστός!" ή "Λανθασμένο, δοκιμάστε ξανά" το μήνυμα είναι
// εμφανίζεται μετά την επικύρωση του κειμένου εισαγωγής με το CAPTCHA
submButton.addEventListener ('κλικ', συνάρτηση () {
εάν (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Σωστό!";
} αλλιώς {
output.classList.add ("SalahCaptcha");
output.innerHTML = "Λανθασμένο, δοκιμάστε ξανά";
}
});
// Αυτός ο ακροατής συμβάντων ενεργοποιείται κάθε φορά που ο χρήστης πατά το κουμπί "Ανανέωση"
// Δημιουργείται και εμφανίζεται ένα νέο τυχαίο CAPTCHA αφού ο χρήστης κάνει κλικ στο κουμπί "Ανανέωση"
refreshButton.addEventListener ('κλικ', συνάρτηση () {
userText.value = "";
ας ανανεώσουμεArr = [];
για (ας j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
έξοδος.innerHTML = "";
});

Τώρα έχετε μια πλήρως λειτουργική φόρμα επικύρωσης CAPTCHA! Εάν θέλετε να ρίξετε μια ματιά στον πλήρη κώδικα, μπορείτε να κλωνοποιήσετε το GitHub αποθετήριο αυτού του CAPTCHA-Validator Project. Αφού κλωνοποιήσετε το αποθετήριο, εκτελέστε το αρχείο HTML και θα λάβετε την ακόλουθη έξοδο:

Όταν εισαγάγετε τον σωστό κωδικό CAPTCHA στο πλαίσιο εισαγωγής, θα εμφανιστεί η ακόλουθη έξοδος:

Όταν εισαγάγετε εσφαλμένο κωδικό CAPTCHA στο πλαίσιο εισαγωγής, θα εμφανιστεί η ακόλουθη έξοδος:

Κάντε τον ιστότοπό σας ασφαλή με CAPTCHA

Στο παρελθόν, πολλοί οργανισμοί και επιχειρήσεις έχουν υποστεί μεγάλες απώλειες όπως παραβιάσεις δεδομένων, επιθέσεις ανεπιθύμητων μηνυμάτων κ.λπ. ως αποτέλεσμα της μη ύπαρξης εντύπων CAPTCHA στους ιστότοπούς τους. Συνιστάται ανεπιφύλακτα να προσθέσετε το CAPTCHA στον ιστότοπό σας, καθώς προσθέτει ένα επίπεδο ασφαλείας για να αποτρέψει τον ιστότοπο από εγκληματίες στον κυβερνοχώρο.

Η Google ξεκίνησε επίσης μια δωρεάν υπηρεσία που ονομάζεται "reCAPTCHA" που βοηθά στην προστασία των ιστότοπων από ανεπιθύμητα μηνύματα και κατάχρηση. Τα CAPTCHA και reCAPTCHA φαίνονται παρόμοια, αλλά δεν είναι το ίδιο πράγμα. Μερικές φορές τα CAPTCHA αισθάνονται απογοητευτικά και δύσκολα κατανοητά για πολλούς χρήστες. Αν και, υπάρχει ένας σημαντικός λόγος για τον οποίο είναι δύσκολο.

Πώς λειτουργούν τα CAPTCHA και γιατί είναι τόσο δύσκολα;

Τα CAPTCHA και reCAPTCHA αποτρέπουν ανεπιθύμητα μηνύματα. Πώς λειτουργούν; Και γιατί θεωρείτε ότι το CAPTCHA είναι τόσο δύσκολο να επιλυθεί;

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα