Πώς να χρησιμοποιήσετε το Javascript για Captcha Εφαρμογή και Πρόληψη Spam

Κατανόηση του CAPTCHA και του ρόλου του στην πρόληψη των σπαμ

CAPTCHA (Πλήρης Αυτοματοποιημένη δοκιμή Τούρινγκ για να πει στους υπολογιστές και τους ανθρώπους Apart) έχει γίνει ένα ουσιαστικό εργαλείο για την προστασία των μορφών web από την αυτοματοποιημένη κατάχρηση. Τα spambots και κακόβουλα σενάρια συχνά στοχεύουν φόρμες επαφής, σελίδες σύνδεσης, και να σχολιάσει τις ενότητες για να υποβάλουν ανεπιθύμητο περιεχόμενο ή επιθέσεις εκτόξευσης.

Με την ευρεία υιοθέτηση της JavaScript, οι προγραμματιστές μπορούν τώρα να δημιουργήσουν διαδραστικές προκλήσεις ⁇ όπως προβλήματα μαθηματικών, παζλ εικόνας, ή drag-and-drop εργασίες ⁇ που είναι τόσο πιο φιλικό προς το χρήστη και πιο δύσκολο για τα bot να παρακάμψουν. Αυτό το άρθρο διερευνά πώς να εφαρμόσει CAPTCHA χρησιμοποιώντας βανίλια JavaScript, ενσωματώνουν πρόσθετες τεχνικές πρόληψης spam, και αποφασίζουν πότε να χρησιμοποιήσουν υπηρεσίες τρίτων όπως το reCAPTCHA.

Κατασκευή ενός JavaScript CAPTCHA από το Scratch

Δημιουργία ενός προσαρμοσμένου CAPTCHA με JavaScript σας δίνει πλήρη έλεγχο πάνω στην εμπειρία χρήστη και τη λογική ασφάλειας. Παρακάτω καλύπτουμε τρεις κοινές προσεγγίσεις: μαθηματικά προβλήματα, sliders, και ταυτοποίηση εικόνας. Κάθε μέθοδος μπορεί να εφαρμοστεί με απλά HTML, CSS, και JavaScript, και αργότερα ενσωματώνεται σε μια ροή επικύρωσης από τον διακομιστή πλευρά.

Μέθοδος 1: Μαθηματικό πρόβλημα CAPTCHA

Το απλούστερο CAPTCHA παρουσιάζει μια τυχαία αριθμητική λειτουργία που οι χρήστες πρέπει να λύσουν. Αυτό λειτουργεί καλά για μορφές χαμηλού κινδύνου αλλά δεν είναι ασφαλές έναντι προηγμένων bot που μπορούν να αναλύσουν HTML ή να χρησιμοποιήσουν οπτική αναγνώριση χαρακτήρων (OCR) σε απλούς αριθμούς.

HTML δομή

<form id="contactForm">
 <div id="captchaContainer">
 <p id="captchaQuestion">Loading...</p>
 <input type="number" id="captchaAnswer" placeholder="Your answer" required />
 </div>
 <button type="submit">Submit</button>
</form>

JavaScript λογική

let captchaAnswer = 0;

function generateMathCaptcha() {
 const num1 = Math.floor(Math.random() * 20) + 1;
 const num2 = Math.floor(Math.random() * 10) + 1;
 const operator = ['+', '-', '*'][Math.floor(Math.random() * 3)];
 let expression = `${num1} ${operator} ${num2}`;
 captchaAnswer = eval(expression);
 document.getElementById('captchaQuestion').textContent = `What is ${expression}?`;
}

document.getElementById('contactForm').addEventListener('submit', (e) => {
 e.preventDefault();
 const userAnswer = parseInt(document.getElementById('captchaAnswer').value, 10);
 if (userAnswer === captchaAnswer) {
 // Proceed with form submission
 console.log('CAPTCHA passed');
 } else {
 alert('Incorrect answer. Please try again.');
 generateMathCaptcha();
 document.getElementById('captchaAnswer').value = '';
 }
});

window.addEventListener('load', generateMathCaptcha);

Περιορισμοί: Τα Μαθηματικά CAPTCHAs είναι ευάλωτα στα bots που εκτελούν JavaScript και υπολογίζουν την απάντηση. Για να βελτιώσετε την ασφάλεια, συνδυάστε τα με την επικύρωση από πλευράς διακομιστή (που έχει συζητηθεί αργότερα) και σκεφτείτε την παρεμπόδιση της πρόκλησης που δημιουργείται με τρόπο που καθιστά δυσκολότερο για τα σενάρια να αποσπάσουν τη σωστή απάντηση.

Μέθοδος 2: Σλάιντερ CAPTCHA

Οι προκλήσεις Slider απαιτούν από το χρήστη να σύρει ένα κουμπί κατά μήκος ενός κομματιού σε μια συγκεκριμένη θέση. Αυτή η τεχνική βασίζεται στην ανίχνευση ανθρώπινων κινήσεων και το συγχρονισμό του ποντικιού, καθιστώντας δυσκολότερο για απλά bot να μιμηθούν. Ωστόσο, τα προηγμένα bot μπορούν να προσομοιώσουν γεγονότα drag.

Βασική εφαρμογή

<div id="sliderCaptcha">
 <div id="sliderTrack">
 <div id="sliderThumb">→</div>
 </div>
 <p id="sliderStatus">Slide to verify</p>
</div>

Προσθέστε ακροατές εκδηλώσεων για , , και [[LFT:5]] (ή ισοδύναμα αφής). Παρακολουθήστε την αντιστάθμιση του αντίχειρα και συγκρίνετε με τη θέση στόχου. Ένα κοινό κόλπο είναι να ορίσετε τυχαία τη θέση στόχου σε κάθε σελίδα φορτίο και στη συνέχεια να επικυρώσετε τόσο την τελική θέση όσο και το μοτίβο κίνησης.

Σημείωση ασφάλειας: Επειδή τα bot μπορούν να ενεργοποιήσουν προγραμματικά τα γεγονότα του ποντικιού, τα slider CAPTCHAs θα πρέπει να συνδυάζονται με ελέγχους από την πλευρά του διακομιστή που καταγράφουν την ταχύτητα κίνησης, τη συνολική διάρκεια και την τελική θέση.

Μέθοδος 3: Επιλογή εικόνας CAPTCHA

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

Απλοποιημένο παράδειγμα:

<div id="imageGrid">
 <img src="cat.jpg" class="captcha-image" data-kind="animal">
 <img src="car.jpg" class="captcha-image" data-kind="vehicle">
 <img src="dog.jpg" class="captcha-image" data-kind="animal">
 <img src="tree.jpg" class="captcha-image" data-kind="plant">
</div>
<p>Select all images that show an animal.</p>

Η JavaScript θα συλλέξει επιλεγμένες εικόνες και θα επαληθεύσει τις ιδιότητες τους [[LFT:7] στην υποβολή. Για να αποτραπεί η ανάγνωση των bot απλά από την HTML, οι τιμές ιδιοτήτων θα πρέπει να κρυπτογραφηθούν ή να δημιουργηθούν δυναμικά από τον εξυπηρετητή.

Ενίσχυση της ασφάλειας με πρόσθετες τεχνικές

Δεν πελάτη-side CAPTCHA είναι αλάνθαστο? bots μπορεί να αντιστραφεί-μηχανικός JavaScript, να τρέξει ακέφαλους περιηγητές, ή να χρησιμοποιήσει προηγμένη AI. Ως εκ τούτου, συνδυάζουν το frontend σας CAPTCHA με αυτές τις server-side και client-side βελτιώσεις.

Πεδία μελιού

Τα γλυκά είναι κρυμμένα πεδία μορφής που οι άνθρωποι δεν θα δουν ή να γεμίσουν, αλλά τα bots συχνά αυτοολοκληρώνονται. Προσθέστε ένα πεδίο με στυλ όπως [[LFT:8]] ή [[LFT:9]]. Στον εξυπηρετητή, απορρίψτε τις υποβολές όπου η γλάστρα δεν είναι κενή.

<input type="text" name="website" style="display:none" autocomplete="off">

Επικύρωση βάσει χρόνου

Οι Bots μπορούν να υποβάλουν φόρμες σε χιλιοστά του δευτερολέπτου, ενώ οι άνθρωποι χρειάζονται αρκετά δευτερόλεπτα για να διαβάσουν και να ανταποκριθούν. Καταγράψτε το χρόνο δημιουργίας της φόρμας χρησιμοποιώντας JavaScript ([[LFT:11]]]) και στείλτε το μαζί με την υποβολή. Στον εξυπηρετητή, απορρίψτε τις υποβολές που φθάνουν γρηγορότερα από ένα λογικό όριο (π.χ., 2 δευτερόλεπτα για μια απλή φόρμα, 5 δευτερόλεπτα για CAPTCHA).

const FORM_GENERATED = Date.now();
// On submit:
const submissionTime = Date.now() - FORM_GENERATED;
// Include in form data and validate server-side

Υποχρεωτική επικύρωσης από εξυπηρετητή- Side

Ποτέ μην εμπιστεύεστε μόνο την επικύρωση από την πλευρά του πελάτη. Πάντα να δοκιμάζετε την απάντηση CAPTCHA στον διακομιστή. Αν δημιουργήσατε την πρόκληση από την πλευρά του πελάτη, πρέπει επίσης να στείλετε τις παραμέτρους πρόκλησης (π.χ. τους αριθμούς και τον χειριστή) στον διακομιστή και να επαναπροσδιορίστε την αναμενόμενη απάντηση. Καλύτερα όμως, να δημιουργήσετε την πρόκληση στον διακομιστή, να την στείλετε στον πελάτη, και να επικυρώσετε τον διακομιστή απόκρισης. Αυτό εμποδίζει έναν κακόβουλο χρήστη να αλλάξει τη JavaScript για να περάσει πάντα το CAPTCHA.

Παράδειγμα ροής πλευρά διακομιστή για ένα μαθηματικό CAPTCHA:

1. Ο εξυπηρετητής δημιουργεί δύο τυχαίους αριθμούς και χειριστή, αποθηκεύει την αναμενόμενη απάντηση στη συνεδρία (ή την κρυπτογραφεί).
2. Ο διακομιστής στέλνει την ερώτηση στον πελάτη.
3. Ο χρήστης υποβάλλει απάντηση.
4. Ο εξυπηρετητής ανακτά αποθηκευμένη απάντηση και συγκρίνει· αν ταιριάζει, φόρμα επεξεργασίας.

Εφαρμογή CAPTCHA με εξωτερικές υπηρεσίες

Για τις εγκαταστάσεις παραγωγής, εξετάστε τη χρήση καθιερωμένων υπηρεσιών CAPTCHA που προσφέρουν ισχυρή προστασία από τις αυτοματοποιημένες επιθέσεις, συμπεριλαμβανομένης της μηχανικής μάθησης βασισμένης στην αναγνώριση εικόνας. Δύο δημοφιλείς επιλογές είναι Google reCAPTCHA και hCaptcha[[LFT:3]]]. Παρέχουν τόσο δωρεάν βαθμίδες όσο και εύκολη ενσωμάτωση μέσω των βιβλιοθηκών JavaScript.

<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY"></script>
<script>
 document.getElementById('contactForm').addEventListener('submit', (e) => {
 e.preventDefault();
 grecaptcha.ready(() => {
 grecaptcha.execute('YOUR_SITE_KEY', {action: 'submit'}).then((token) => {
 // Append token to form and submit
 document.getElementById('recaptchaToken').value = token;
 document.getElementById('contactForm').submit();
 });
 });
 });
</script>

Για έναν ρεαλιστικό οδηγό ολοκλήρωσης, βλέπε Google reCAPTCHA τεκμηρίωση προγραμματιστή.

Βέλτιστες πρακτικές για την ενσωμάτωση του CAPTCHA

• Προσβασιμότητα: Εξασφαλίστε ότι υπάρχουν εναλλακτικές λύσεις CAPTCHA για χρήστες με αναπηρίες. Οι ακουστικές προκλήσεις ή ερωτήσεις που βασίζονται στο κείμενο και μπορούν να αντιμετωπιστούν από τους αναγνώστες οθόνης είναι απαραίτητες για τη συμμόρφωση με τις οδηγίες WCAG.
• Προοδευτική Ενίσχυση: Ξεκινήστε με μια απλή μορφή HTML, στη συνέχεια προσθέστε JavaScript για CAPTCHA. Αν η JavaScript είναι απενεργοποιημένη, επιστρέψτε σε μια εικόνα CAPTCHA που δημιουργήθηκε από server ή ένα απλό μαθηματικό ερώτημα που στάλθηκε μέσω ενός κρυφού πεδίου.
• Περιορισμός της ημερομηνίας: Ακόμα και με το CAPTCHA, εφαρμόζεται περιορισμός του ρυθμού στον εξυπηρετητή (π.χ., οριακές καταβολές ανά διεύθυνση IP ανά ώρα). Αυτό εμποδίζει έναν καθορισμένο επιτιθέμενο να σπάσει το CAPTCHA χειροκίνητα.
• Είσοδος και παρακολούθηση: Καταγραφή αποτυχιών CAPTCHA και ασυνήθιστες μορφές υποβολής.
• Obfuscatate JavaScript: Ελαχιστοποιήστε και αποσυνδέστε τη λογική CAPTCHA σας για να δυσκολεύσετε τα bot να κατανοήσουν τη γενιά πρόκλησης.
• Συνδυάστε πολλαπλές τεχνικές: Χρησιμοποιήστε μια προσέγγιση με στρώμα. Μια γλάστρα, ένας έλεγχος του χρόνου, μια κύλιση, και ένα διπλό έλεγχο πλευρά διακομιστή παρέχουν μαζί πολύ καλύτερη προστασία από οποιαδήποτε μέθοδο.

Συμπέρασμα

Από απλά μαθηματικά παζλ σε προκλήσεις slider, αυτές οι τεχνικές μπορούν να αποτρέψουν πολλές αυτοματοποιημένες επιθέσεις ⁇ ειδικά όταν συνδυάζονται με την επικύρωση από την πλευρά του διακομιστή, μελιτζάνες, και χρονικά βασισμένα σε ελέγχους. Για υψηλής κυκλοφορίας ή ευαίσθητες μορφές, σκεφτείτε την ενσωμάτωση μιας επαγγελματικής υπηρεσίας όπως reCAPTCHA ή hCaptcha για να επωφεληθούν από τις συνεχιζόμενες βελτιώσεις στην ανίχνευση bot.

Θυμηθείτε ότι η ασφάλεια είναι ένας αγώνας εξοπλισμών: καθώς βελτιώνονται οι μέθοδοι CAPTCHA, το ίδιο και τα bot. Τακτικά επανεξετάστε την εφαρμογή σας, παρακολουθείτε τα πρότυπα απειλής και ενημερώστε τις άμυνες σας ανάλογα. Με την προορατική, πολυεπίπεδη προσέγγιση, μπορείτε να κρατήσετε τις μορφές σας χωρίς spam χωρίς να θυσιάζετε την εμπειρία του χρήστη.