Home-theater-designers
Σήμερα οι CAPTCHA αποτελούν αναπόσπαστο μέρος της ασφάλειας ιστότοπων. Εκατομμύρια δοκιμές CAPTCHA ολοκληρώνονται διαδικτυακά κάθε μέρα.
Εάν δεν έχετε εφαρμόσει την επικύρωση CAPTCHA στον ιστότοπό σας, θα μπορούσε να δημιουργήσει ένα μεγάλο πρόβλημα για εσάς, ορίζοντάς σας ως στόχο για τους ανεπιθύμητους χρήστες.
Ακολουθούν όλα όσα πρέπει να γνωρίζετε για τα CAPTCHA και πώς μπορείτε εύκολα να τα εφαρμόσετε στον ιστότοπό σας χρησιμοποιώντας HTML, CSS και JavaScript.
Τι είναι το CAPTCHA;
Το CAPTCHA σημαίνει «Πλήρως αυτοματοποιημένη δοκιμή δημόσιου Turing για να πείτε στους υπολογιστές και τους ανθρώπους εκτός». Αυτός ο όρος επινοήθηκε το 2003 από τους Luis von Ahn, Manuel Blum, Nicholas J. Hopper και John Langford. Είναι ένας τύπος δοκιμής πρόκλησης-απόκρισης που χρησιμοποιείται για να καθοριστεί αν ο χρήστης είναι άνθρωπος ή όχι.
Τα CAPTCHA προσθέτουν ασφάλεια στους ιστότοπους παρέχοντας προκλήσεις που είναι δύσκολο να εκτελεστούν από τα bot αλλά σχετικά εύκολο για τους ανθρώπους. Για παράδειγμα, η αναγνώριση όλων των εικόνων ενός αυτοκινήτου από ένα σύνολο πολλαπλών εικόνων είναι δύσκολη για τα bots αλλά αρκετά απλή για τα ανθρώπινα μάτια.
Η ιδέα του CAPTCHA προέρχεται από το Turing Test. Το Turing Test είναι μια μέθοδος για να ελέγξετε αν μια μηχανή μπορεί να σκέφτεται σαν άνθρωπος ή όχι. Είναι ενδιαφέρον ότι μια δοκιμή CAPTCHA μπορεί να ονομαστεί 'αντίστροφη δοκιμή Turing', καθώς σε αυτήν την περίπτωση, ο υπολογιστής δημιουργεί τη δοκιμή που προκαλεί τους ανθρώπους.
Γιατί ο ιστότοπός σας χρειάζεται επικύρωση CAPTCHA;
Τα CAPTCHA χρησιμοποιούνται κυρίως για να αποτρέψουν τα bots να υποβάλλουν αυτόματα φόρμες με ανεπιθύμητο περιεχόμενο και άλλο επιβλαβές περιεχόμενο. Ακόμη και εταιρείες όπως η Google το χρησιμοποιούν για να αποτρέψουν το σύστημα τους από επιθέσεις ανεπιθύμητων μηνυμάτων. Ακολουθούν μερικοί από τους λόγους για τους οποίους ο ιστότοπός σας επωφελείται από την επικύρωση CAPTCHA:
- Τα CAPTCHA βοηθούν στην αποτροπή χάκερ και ρομπότ από την ανεπιθύμητη αλληλογραφία των συστημάτων εγγραφής δημιουργώντας ψεύτικους λογαριασμούς. Εάν δεν προληφθούν, μπορούν να χρησιμοποιήσουν αυτούς τους λογαριασμούς για κακούργους σκοπούς.
- Οι CAPTCHA μπορούν να απαγορεύσουν επιθέσεις βίαιης σύνδεσης από τον ιστότοπό σας, τις οποίες χρησιμοποιούν οι χάκερ για να προσπαθήσουν να συνδεθούν χρησιμοποιώντας χιλιάδες κωδικούς πρόσβασης.
- Οι CAPTCHA μπορούν να περιορίσουν τα bots από το να κάνουν ανεπιθύμητη αλληλογραφία στην ενότητα κριτικής, παρέχοντας ψευδή σχόλια.
- Το CAPTCHA βοηθά στην πρόληψη του πληθωρισμού εισιτηρίων καθώς ορισμένοι αγοράζουν μεγάλο αριθμό εισιτηρίων για μεταπώληση. Το CAPTCHA μπορεί ακόμη και να αποτρέψει ψευδείς εγγραφές σε δωρεάν συμβάντα.
- Οι CAPTCHA μπορούν να περιορίσουν τους απατεώνες στον κυβερνοχώρο από ανεπιθύμητα ιστολόγια με ακατάλληλα σχόλια και συνδέσμους σε επιβλαβείς ιστότοπους.
Υπάρχουν πολλοί περισσότεροι λόγοι που υποστηρίζουν την ενσωμάτωση της επικύρωσης CAPTCHA στον ιστότοπό σας. Μπορείτε να το κάνετε με τον ακόλουθο κώδικα.
πώς να διαγράψετε την επαγγελματική σελίδα του facebook
Κωδικός HTML CAPTCHA
Η HTML ή η γλώσσα σήμανσης υπερκειμένου, περιγράφει τη δομή μιας ιστοσελίδας. Χρησιμοποιήστε τον ακόλουθο κώδικα HTML για τη δομή της φόρμας επικύρωσης CAPTCHA:
captcha text
Refresh
Αυτός ο κώδικας αποτελείται κυρίως από 7 στοιχεία:
-
: Αυτό το στοιχείο χρησιμοποιείται για την εμφάνιση της επικεφαλίδας της φόρμας CAPTCHA. - : Αυτό το στοιχείο χρησιμοποιείται για την εμφάνιση του κειμένου CAPTCHA.
- - Αυτό το στοιχείο χρησιμοποιείται για τη δημιουργία ενός πλαισίου εισαγωγής για πληκτρολόγηση του CAPTCHA.
- : Αυτό το κουμπί υποβάλλει τη φόρμα και ελέγχει αν το CAPTCHA και το πληκτρολογημένο κείμενο είναι ίδια ή όχι.
- : Αυτό το κουμπί χρησιμοποιείται για την ανανέωση του CAPTCHA.
- : Αυτό το στοιχείο χρησιμοποιείται για την εμφάνιση της εξόδου σύμφωνα με το εισαγόμενο κείμενο.
- : Αυτό είναι το γονικό στοιχείο που περιέχει όλα τα άλλα στοιχεία.
Τα αρχεία CSS και JavaScript συνδέονται με αυτήν τη σελίδα HTML μέσω του και στοιχεία αντίστοιχα. Πρέπει να προσθέσετε το Σύνδεσμος ετικέτα μέσα στο κεφάλι ετικέτα και γραφή ετικέτα στο τέλος του σώμα Το
Μπορείτε επίσης να ενσωματώσετε αυτόν τον κώδικα με υπάρχουσες φόρμες του ιστότοπού σας.
Σχετίζεται με: Το HTML Essentials Cheat Sheet: Ετικέτες, χαρακτηριστικά και άλλα
Κωδικός CSS CAPTCHA
Το CSS, ή Cascading Style Sheets, χρησιμοποιείται για τη διαμόρφωση στοιχείων HTML. Χρησιμοποιήστε τον ακόλουθο κώδικα CSS για να διαμορφώσετε τα παραπάνω στοιχεία HTML:
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
background-color: #232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
height: 220px;
width: 250px;
background-color: #2d3748;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#captchaHeading {
color: white;
}
#captcha {
height: 80%;
width: 80%;
font-size: 30px;
letter-spacing: 3px;
margin: auto;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#refreshButton {
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#textBox {
height: 25px;
}
.incorrectCaptcha {
color: #FF0000;
}
.correctCaptcha {
color: #7FFF00;
}Προσθέστε ή καταργήστε τις ιδιότητες CSS από αυτόν τον κωδικό σύμφωνα με τις προτιμήσεις σας. Μπορείτε επίσης να δώσετε μια κομψή εμφάνιση στο δοχείο φόρμας χρησιμοποιώντας το Ιδιότητα πλαίσιο σκιάς CSS Το
Κώδικας JavaScript CAPTCHA
JavaScript χρησιμοποιείται για την προσθήκη λειτουργικότητας σε μια κατά τα άλλα στατική ιστοσελίδα. Χρησιμοποιήστε τον ακόλουθο κώδικα για να προσθέσετε πλήρη λειτουργικότητα στη φόρμα επικύρωσης CAPTCHA:
// document.querySelector() is used to select an element from the document using its ID
let captchaText = document.querySelector('#captcha');
var ctx = captchaText.getContext('2d');
ctx.font = '30px Roboto';
ctx.fillStyle = '#08e5ff';
let userText = document.querySelector('#textBox');
let submitButton = document.querySelector('#submitButton');
let output = document.querySelector('#output');
let refreshButton = document.querySelector('#refreshButton');
// alphaNums contains the characters with which you want to create the 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'];
let emptyArr = [];
// This loop generates a random string of 7 characters using alphaNums
// Further this string is displayed as a CAPTCHA
for (let i = 1; i <= 7; i++) {
emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
var c = emptyArr.join('');
ctx.fillText(emptyArr.join(''),captchaText.width/4, captchaText.height/2);
// This event listener is stimulated whenever the user press the 'Enter' button
// 'Correct!' or 'Incorrect, please try again' message is
// displayed after validating the input text with CAPTCHA
userText.addEventListener('keyup', function(e) {
// Key Code Value of 'Enter' Button is 13
if (e.keyCode === 13) {
if (userText.value === c) {
output.classList.add('correctCaptcha');
output.innerHTML = 'Correct!';
} else {
output.classList.add('incorrectCaptcha');
output.innerHTML = 'Incorrect, please try again';
}
}
});
// This event listener is stimulated whenever the user clicks the 'Submit' button
// 'Correct!' or 'Incorrect, please try again' message is
// displayed after validating the input text with CAPTCHA
submitButton.addEventListener('click', function() {
if (userText.value === c) {
output.classList.add('correctCaptcha');
output.innerHTML = 'Correct!';
} else {
output.classList.add('incorrectCaptcha');
output.innerHTML = 'Incorrect, please try again';
}
});
// This event listener is stimulated whenever the user press the 'Refresh' button
// A new random CAPTCHA is generated and displayed after the user clicks the 'Refresh' button
refreshButton.addEventListener('click', function() {
userText.value = '';
let refreshArr = [];
for (let j = 1; j <= 7; j++) {
refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
ctx.clearRect(0, 0, captchaText.width, captchaText.height);
c = refreshArr.join('');
ctx.fillText(refreshArr.join(''),captchaText.width/4, captchaText.height/2);
output.innerHTML = '';
});
Τώρα έχετε μια πλήρως λειτουργική φόρμα επικύρωσης CAPTCHA! Εάν θέλετε να ρίξετε μια ματιά στον πλήρη κώδικα, μπορείτε να κλωνοποιήσετε το Αποθετήριο GitHub αυτού του έργου CAPTCHA-Validator Το Μετά την κλωνοποίηση του αποθετηρίου, εκτελέστε το αρχείο HTML και θα λάβετε την ακόλουθη έξοδο:
πώς να επανεκκινήσετε ένα macbook air
Όταν εισάγετε τον σωστό κωδικό CAPTCHA στο πλαίσιο εισαγωγής, θα εμφανιστεί η ακόλουθη έξοδος:
Όταν εισάγετε οποιονδήποτε λανθασμένο κωδικό CAPTCHA στο πλαίσιο εισαγωγής, θα εμφανιστεί η ακόλουθη έξοδος:
Κάντε τον ιστότοπό σας ασφαλή με CAPTCHA
Στο παρελθόν, πολλοί οργανισμοί και επιχειρήσεις έχουν υποστεί μεγάλες απώλειες, όπως παραβίαση δεδομένων, επιθέσεις ανεπιθύμητων μηνυμάτων κ.λπ., ως αποτέλεσμα της μη ύπαρξης φορμών CAPTCHA στους ιστότοπούς τους. Συνιστάται ιδιαίτερα να προσθέσετε το CAPTCHA στον ιστότοπό σας, καθώς προσθέτει ένα επίπεδο ασφαλείας για να αποτρέψετε τον ιστότοπο από εγκληματίες στον κυβερνοχώρο.
Η Google ξεκίνησε επίσης μια δωρεάν υπηρεσία που ονομάζεται 'reCAPTCHA' που βοηθά στην προστασία των ιστότοπων από ανεπιθύμητα μηνύματα και κατάχρηση. Τα CAPTCHA και reCAPTCHA μοιάζουν παρόμοια, αλλά δεν είναι το ίδιο πράγμα. Μερικές φορές τα CAPTCHA αισθάνονται απογοητευτικά και δύσκολα κατανοητά για πολλούς χρήστες. Αν και, υπάρχει ένας σημαντικός λόγος για τον λόγο που είναι δύσκολο.
Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Πώς λειτουργούν τα CAPTCHA και γιατί είναι τόσο δύσκολα;Οι CAPTCHA και οι reCAPTCHA αποτρέπουν τα ανεπιθύμητα μηνύματα. Πώς λειτουργούν; Και γιατί θεωρείτε ότι το CAPTCHA είναι τόσο δύσκολο να λυθεί;
Διαβάστε Επόμενο Σχετικά θέματα- Προγραμματισμός
- HTML
- JavaScript
- CSS
Ο Yuvraj είναι προπτυχιακός φοιτητής Πληροφορικής στο Πανεπιστήμιο του Δελχί, Ινδία. Είναι παθιασμένος με το Full Stack Web Development. Όταν δεν γράφει, εξερευνά το βάθος διαφορετικών τεχνολογιών.
Περισσότερα από τον Yuvraj ChandraΕγγραφείτε στο newsletter μας
Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!
Κάντε κλικ εδώ για εγγραφή