Erstellen Sie ein CAPTCHA-Validierungsformular mit HTML, CSS und JavaScript
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, Nicholas J. Hopper und John Langford geprägt. 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:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="center">
<h1 id="captchaHeading">Captcha Validator Using HTML, CSS and JavaScript</h1>
<div id="captchaBackground">
<span id="captcha">captcha text</span>
<input id="textBox" type="text" name="text">
<div id="buttons">
<input id="submitButton" type="submit">
<button id="refreshButton" type="submit">Refresh</button>
</div>
<span id="output"></span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>Dieser Code besteht hauptsächlich aus 7 Elementen:
- <h1 id = "captchaHeading"> <h1> : Mit diesem Element wird die Überschrift des CAPTCHA-Formulars angezeigt.
- <span id = "captcha"> </ span> : Mit diesem Element wird der CAPTCHA-Text angezeigt.
- <input id = "textBox" type = "text" name = "text"> – Mit diesem Element wird ein Eingabefeld zum Eingeben des CAPTCHA erstellt.
- <input id = "submitButton" type = "submit"> : Diese Schaltfläche sendet das Formular und prüft, ob CAPTCHA und der eingegebene Text identisch sind oder nicht.
- <button id = "refreshButton" type = "submit"> </ button> : Mit dieser Schaltfläche wird das CAPTCHA aktualisiert.
- <span id = "output"> </ span> : Mit diesem Element wird die Ausgabe gemäß dem eingegebenen Text angezeigt.
- <div class = "center"> </ div> : Dies ist das übergeordnete Element, das alle anderen Elemente enthält.
CSS- und JavaScript-Dateien sind über die Elemente <link rel = "stylesheet" type = "text / css" href = "styles.css"> und <script src = "script.js"> </ script> mit dieser HTML-Seite verknüpft beziehungsweise. Sie müssen das Link- Tag in das Head- Tag und das Script- Tag am Ende des Körpers einfügen .
Sie können diesen Code auch in vorhandene Formulare Ihrer Website integrieren.
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');
body {
background-color: #232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
height: 200px;
width: 250px;
background-color: #2d3748;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#captchaHeading {
color: white;
}
#captcha {
margin-bottom: 1em;
font-size: 30px;
letter-spacing: 3px;
color: #08e5ff;
}
.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;
}Fügen Sie nach Ihren Wünschen CSS-Eigenschaften zu diesem Code hinzu oder entfernen Sie sie. Mit der CSS-Box-Shadow-Eigenschaft können Sie dem Formularcontainer auch ein elegantes Aussehen verleihen.
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() is used to select an element from the document using its ID
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 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)]);
}
captchaText.innerHTML = emptyArr.join('');
// 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 === captchaText.innerHTML) {
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 === captchaText.innerHTML) {
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)]);
}
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 das GitHub-Repository dieses CAPTCHA-Validator-Projekts klonen. 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, weil sie keine CAPTCHA-Formulare auf ihren Websites haben. 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.