Heutzutage sind CAPTCHAs ein wesentlicher Bestandteil der Website-Sicherheit. Millionen von CAPTCHA-Tests werden täglich online durchgeführt.

Wenn Sie die CAPTCHA-Validierung nicht auf Ihrer Website implementiert haben, kann dies ein großes Problem für Sie darstellen und Sie als Ziel für Spammer einrichten.

Hier finden Sie alles, was Sie über CAPTCHAs wissen müssen und wie Sie sie mithilfe von HTML, CSS und JavaScript einfach auf Ihrer Website implementieren können.

Was ist CAPTCHA?

CAPTCHA steht für "Vollständig automatisierter öffentlicher Turing-Test, um Computer und Menschen auseinander zu halten." Dieser Begriff wurde 2003 von Luis von Ahn, Manuel Blum und Nicholas J. geprägt. Hopper und John Langford. Es ist eine Art Challenge-Response-Test, mit dem festgestellt wird, ob der Benutzer ein Mensch ist oder nicht.

CAPTCHAs erhöhen die Sicherheit von Websites, indem sie Herausforderungen bieten, die für Bots schwierig, für Menschen jedoch relativ einfach sind. Zum Beispiel ist es für Bots schwierig, alle Bilder eines Autos aus mehreren Bildern zu identifizieren, für menschliche Augen jedoch einfach genug.

Die Idee von CAPTCHA stammt aus dem Turing-Test. Ein Turing-Test ist eine Methode, um zu testen, ob eine Maschine wie ein Mensch denken kann oder nicht. Interessanterweise kann ein CAPTCHA-Test als "Reverse Turing Test" bezeichnet werden, da in diesem Fall der Computer den Test erstellt, der den Menschen herausfordert.

Warum benötigt Ihre Website eine CAPTCHA-Validierung?

CAPTCHAs werden hauptsächlich verwendet, um zu verhindern, dass Bots automatisch Formulare mit Spam und anderen schädlichen Inhalten senden. Sogar Unternehmen wie Google verwenden es, um zu verhindern, dass ihr System Spam-Angriffe ausführt. Hier sind einige der Gründe, warum Ihre Website von der CAPTCHA-Validierung profitieren kann:

• CAPTCHAs verhindern, dass Hacker und Bots die Registrierungssysteme spammen, indem sie gefälschte Konten erstellen. Wenn sie nicht verhindert werden, können sie diese Konten für schändliche Zwecke verwenden.
• CAPTCHAs können Brute-Force-Anmeldeangriffe von Ihrer Website aus verbieten, mit denen Hacker versuchen, sich mit Tausenden von Passwörtern anzumelden.
• CAPTCHAs können Bots daran hindern, den Überprüfungsbereich zu spammen, indem sie falsche Kommentare abgeben.
• CAPTCHAs helfen bei der Verhinderung der Ticketinflation, da einige Leute eine große Anzahl von Tickets für den Wiederverkauf kaufen. CAPTCHA kann sogar falsche Registrierungen für kostenlose Veranstaltungen verhindern.
• CAPTCHAs können Cyber-Gauner daran hindern, Blogs mit zwielichtigen Kommentaren und Links zu schädlichen Websites zu spammen.

Es gibt viele weitere Gründe, die die Integration der CAPTCHA-Validierung in Ihre Website unterstützen. Sie können dies mit dem folgenden Code tun.

HTML CAPTCHA Code

HTML oder HyperText Markup Language beschreibt die Struktur einer Webseite. Verwenden Sie den folgenden HTML-Code, um Ihr CAPTCHA-Validierungsformular zu strukturieren:

Captcha Validator Mit HTML, CSS und JavaScript



Captcha-Text




Aktualisierung

Dieser Code besteht hauptsächlich aus 7 Elementen:

• : Mit diesem Element wird die Überschrift des CAPTCHA-Formulars angezeigt.
• : Mit diesem Element wird der CAPTCHA-Text angezeigt.
• - Mit diesem Element wird ein Eingabefeld zum Eingeben des CAPTCHA erstellt.
• : Diese Schaltfläche sendet das Formular und prüft, ob CAPTCHA und der eingegebene Text identisch sind oder nicht.
• : Mit dieser Schaltfläche wird das CAPTCHA aktualisiert.
• : Mit diesem Element wird die Ausgabe gemäß dem eingegebenen Text angezeigt.
• : Dies ist das übergeordnete Element, das alle anderen Elemente enthält.

CSS- und JavaScript-Dateien sind über das mit dieser HTML-Seite verknüpft und Elemente jeweils. Sie müssen das hinzufügen Verknüpfung Tag in der Kopf Tag und Skript Tag am Ende des Körper.

Sie können diesen Code auch in vorhandene Formulare Ihrer Website integrieren.

Verbunden: Das HTML Essentials-Spickzettel: Tags, Attribute und mehr

CSS CAPTCHA Code

CSS oder Cascading Style Sheets wird zum Formatieren von HTML-Elementen verwendet. Verwenden Sie den folgenden CSS-Code, um die obigen HTML-Elemente zu formatieren:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
Körper {
Hintergrundfarbe: # 232331;
Schriftfamilie: 'Roboto', serifenlos;
}
#captchaBackground {
Höhe: 200px;
Breite: 250px;
Hintergrundfarbe: # 2d3748;
Anzeige: flex;
Ausrichtungselemente: Mitte;
Rechtfertigungsinhalt: Mitte;
Flex-Richtung: Säule;
}
#captchaHeading {
Farbe weiß;
}
#captcha {
Rand unten: 1em;
Schriftgröße: 30px;
Buchstabenabstand: 3px;
Farbe: # 08e5ff;
}
.Center {
Anzeige: flex;
Flex-Richtung: Säule;
Ausrichtungselemente: Mitte;
}
#submitButton {
Rand oben: 2em;
Rand unten: 2em;
Hintergrundfarbe: # 08e5ff;
Rand: 0px;
Schriftdicke: fett;
}
#refreshButton {
Hintergrundfarbe: # 08e5ff;
Rand: 0px;
Schriftdicke: fett;
}
#Textfeld {
Höhe: 25px;
}
.Falsches Captcha {
Farbe: # FF0000;
}
.correctCaptcha {
Farbe: # 7FFF00;
}

Fügen Sie nach Ihren Wünschen CSS-Eigenschaften zu diesem Code hinzu oder entfernen Sie sie. Mit dem können Sie dem Formularcontainer auch ein elegantes Aussehen verleihen CSS-Box-Shadow-Eigenschaft.

JavaScript CAPTCHA Code

JavaScript wird verwendet, um einer ansonsten statischen Webseite Funktionen hinzuzufügen. Verwenden Sie den folgenden Code, um dem CAPTCHA-Validierungsformular vollständige Funktionen hinzuzufügen:

// document.querySelector () wird verwendet, um ein Element aus dem Dokument anhand seiner ID auszuwählen
let captchaText = document.querySelector ('# captcha');
let userText = document.querySelector ('# textBox');
let submitButton = document.querySelector ('# submitButton');
let output = document.querySelector ('# output');
let refreshButton = document.querySelector ('# refreshButton');
// alphaNums enthält die Zeichen, mit denen Sie das CAPTCHA erstellen möchten
Lassen Sie 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 = [];
// Diese Schleife generiert mit alphaNums eine zufällige Zeichenfolge mit 7 Zeichen
// Außerdem wird diese Zeichenfolge als CAPTCHA angezeigt
für (sei i = 1; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Dieser Ereignis-Listener wird immer dann stimuliert, wenn der Benutzer die Eingabetaste drückt
// "Richtig!" oder die Meldung "Falsch, bitte versuchen Sie es erneut" lautet
// wird angezeigt, nachdem der Eingabetext mit CAPTCHA überprüft wurde
userText.addEventListener ('keyup', Funktion (e) {
// Schlüsselcode Wert der "Enter" -Taste ist 13
if (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("korrektCaptcha");
output.innerHTML = "Richtig!";
} else {
output.classList.add ("unknownCaptcha");
output.innerHTML = "Falsch, bitte versuchen Sie es erneut";
}
}
});
// Dieser Ereignis-Listener wird immer dann stimuliert, wenn der Benutzer auf die Schaltfläche "Senden" klickt
// "Richtig!" oder die Meldung "Falsch, bitte versuchen Sie es erneut" lautet
// wird angezeigt, nachdem der Eingabetext mit CAPTCHA überprüft wurde
submitButton.addEventListener ('click', function () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("korrektCaptcha");
output.innerHTML = "Richtig!";
} else {
output.classList.add ("unknownCaptcha");
output.innerHTML = "Falsch, bitte versuchen Sie es erneut";
}
});
// Dieser Ereignis-Listener wird immer dann stimuliert, wenn der Benutzer die Schaltfläche "Aktualisieren" drückt
// Ein neues zufälliges CAPTCHA wird generiert und angezeigt, nachdem der Benutzer auf die Schaltfläche "Aktualisieren" geklickt hat
refreshButton.addEventListener ('click', function () {
userText.value = "";
let refreshArr = [];
für (sei j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Jetzt haben Sie ein voll funktionsfähiges CAPTCHA-Validierungsformular! Wenn Sie sich den vollständigen Code ansehen möchten, können Sie den Code klonen GitHub-Repository dieses CAPTCHA-Validator-Projekts. Führen Sie nach dem Klonen des Repositorys die HTML-Datei aus, und Sie erhalten die folgende Ausgabe:

Wenn Sie den richtigen CAPTCHA-Code in das Eingabefeld eingeben, wird die folgende Ausgabe angezeigt:

Wenn Sie einen falschen CAPTCHA-Code in das Eingabefeld eingeben, wird die folgende Ausgabe angezeigt:

Machen Sie Ihre Website mit CAPTCHAs sicher

In der Vergangenheit haben viele Organisationen und Unternehmen schwere Verluste wie Datenverletzungen, Spam-Angriffe usw. erlitten. als Ergebnis davon, dass CAPTCHA-Formulare nicht auf ihren Websites vorhanden sind. Es wird dringend empfohlen, CAPTCHA zu Ihrer Website hinzuzufügen, da es eine Sicherheitsschicht hinzufügt, um zu verhindern, dass die Website Cyberkriminelle werden.

Google hat außerdem einen kostenlosen Dienst namens "reCAPTCHA" gestartet, mit dem Websites vor Spam und Missbrauch geschützt werden können. CAPTCHA und reCAPTCHA scheinen ähnlich zu sein, aber sie sind nicht ganz dasselbe. Manchmal fühlen sich CAPTCHAs für viele Benutzer frustrierend und schwer zu verstehen. Es gibt jedoch einen wichtigen Grund, warum sie schwierig sind.

Wie funktionieren CAPTCHAs und warum sind sie so schwierig?

CAPTCHAs und reCAPTCHAs verhindern Spam. Wie arbeiten Sie? Und warum finden Sie CAPTCHAs so schwer zu lösen?

Weiter lesen

Über den Autor