Erstellen Sie ein CAPTCHA-Validierungsformular mit HTML, CSS und JavaScript

Erstellen Sie ein CAPTCHA-Validierungsformular mit HTML, CSS und JavaScript

CAPTCHAs sind heutzutage ein wesentlicher Bestandteil der Website-Sicherheit. Jeden Tag werden Millionen von CAPTCHA-Tests online durchgeführt.





Wenn Sie keine CAPTCHA-Validierung auf Ihrer Website implementiert haben, könnte dies ein großes Problem für Sie darstellen und Sie als Ziel für Spammer aufstellen.



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





Was ist CAPTCHA?

CAPTCHA steht für 'Completely Automated Public Turing Test to Tell Computers and Humans Apart'. 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, der verwendet wird, um festzustellen, 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, aber für das menschliche Auge 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 „umgekehrter 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 ihr System vor Spam-Angriffen zu schützen. Hier sind einige der Gründe, warum Ihre Website von der CAPTCHA-Validierung profitieren kann:



  • CAPTCHAs helfen, Hacker und Bots daran zu hindern, die Registrierungssysteme zu 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-Log-in-Angriffe von Ihrer Website verbieten, mit denen Hacker versuchen, sich mit Tausenden von Passwörtern anzumelden.
  • CAPTCHAs können Bots daran hindern, den Bewertungsbereich zu spammen, indem sie falsche Kommentare abgeben.
  • CAPTCHAs helfen dabei, eine Ticketinflation zu verhindern, da einige Leute eine große Anzahl von Tickets für den Weiterverkauf kaufen. CAPTCHA kann sogar Fehlanmeldungen zu kostenlosen Events 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.

So kopieren Sie eine Playlist auf Spotify

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 text



Refresh






Dieser Code besteht hauptsächlich aus 7 Elementen:

  • : Dieses Element wird verwendet, um die Überschrift des CAPTCHA-Formulars anzuzeigen.

  • : Dieses Element wird verwendet, um den CAPTCHA-Text anzuzeigen.
  • - Dieses Element wird verwendet, um ein Eingabefeld zum Eingeben des CAPTCHA zu erstellen.
  • : Diese Schaltfläche sendet das Formular und überprüft, ob das CAPTCHA und der eingegebene Text übereinstimmen oder nicht.
  • : Diese Schaltfläche wird verwendet, um das CAPTCHA zu aktualisieren.
  • : Dieses Element wird verwendet, um die Ausgabe gemäß dem eingegebenen Text anzuzeigen.
  • : Dies ist das übergeordnete Element, das alle anderen Elemente enthält.

CSS- und JavaScript-Dateien sind mit dieser HTML-Seite über das und Elemente bzw. Sie müssen die hinzufügen Verknüpfung tag in der Kopf tag und Skript Tag am Ende des Karosserie .

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

Verwandt: Der HTML-Essentials-Spickzettel: Tags, Attribute und mehr



CSS-CAPTCHA-Code

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

@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;
}

Fügen Sie diesem Code nach Belieben CSS-Eigenschaften hinzu oder entfernen Sie sie. Sie können dem Formularcontainer auch ein elegantes Aussehen verleihen, indem Sie die 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() 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 = '';
});

Jetzt haben Sie ein voll funktionsfähiges CAPTCHA-Validierungsformular! Wenn Sie sich den kompletten Code ansehen möchten, können Sie ihn 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:

Kannst du den Bildschirm auf Discord Mobile teilen?

Wenn Sie den richtigen CAPTCHA-Code in das Eingabefeld eingeben, wird 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 Datenschutzverletzungen, Spam-Angriffe usw. erlitten, weil sie keine CAPTCHA-Formulare auf ihren Websites hatten. Es wird dringend empfohlen, CAPTCHA zu Ihrer Website hinzuzufügen, da es eine Sicherheitsebene hinzufügt, um die Website vor Cyberkriminellen zu schützen.

Google hat außerdem einen kostenlosen Dienst namens „reCAPTCHA“ eingeführt, der dabei hilft, Websites vor Spam und Missbrauch zu schützen. CAPTCHA und reCAPTCHA scheinen ähnlich zu sein, sind aber nicht ganz dasselbe. Manchmal sind CAPTCHAs für viele Benutzer frustrierend und schwer zu verstehen. Es gibt jedoch einen wichtigen Grund, warum sie so schwierig sind.

Teilen Teilen Tweet Email 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 Verwandte Themen
  • Programmierung
  • HTML
  • JavaScript
  • CSS
Über den Autor Yuvraj Chandra(60 veröffentlichte Artikel)

Yuvraj studiert Informatik an der University of Delhi, Indien. Seine Leidenschaft gilt der Full-Stack-Webentwicklung. Wenn er nicht gerade schreibt, erforscht er die Tiefe verschiedener Technologien.

Mehr von Yuvraj Chandra

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um zu abonnieren