Obecnie CAPTCHA są integralną częścią bezpieczeństwa witryn internetowych. Codziennie przeprowadzane są online miliony testów CAPTCHA.

Jeśli nie zaimplementowałeś walidacji CAPTCHA w swojej witrynie, może to spowodować duży problem, ustawiając Cię jako cel dla spamerów.

Oto wszystko, co musisz wiedzieć o CAPTCHA i o tym, jak łatwo możesz je wdrożyć w swojej witrynie za pomocą HTML, CSS i JavaScript.

Co to jest CAPTCHA?

CAPTCHA to skrót od „Całkowicie zautomatyzowany publiczny test Turinga, aby rozdzielić komputery i ludzie”. Termin ten został ukuty w 2003 roku przez Luisa von Ahn, Manuela Bluma, Nicholasa J. Hopper i John Langford. Jest to rodzaj testu wyzwanie-odpowiedź, który służy do określenia, czy użytkownik jest człowiekiem, czy nie.

CAPTCHA zwiększają bezpieczeństwo witryn internetowych, zapewniając wyzwania, które są trudne do wykonania dla botów, ale stosunkowo łatwe dla ludzi. Na przykład zidentyfikowanie wszystkich obrazów samochodu z zestawu wielu obrazów jest trudne dla robotów, ale jest wystarczająco proste dla ludzkich oczu.

Idea CAPTCHA wywodzi się z testu Turinga. Test Turinga to metoda sprawdzania, czy maszyna może myśleć jak człowiek, czy nie. Co ciekawe, test CAPTCHA można nazwać „odwrotnym testem Turinga”, ponieważ w tym przypadku komputer tworzy test, który stanowi wyzwanie dla ludzi.

Dlaczego Twoja witryna wymaga weryfikacji CAPTCHA?

CAPTCHA są używane głównie do zapobiegania automatycznemu przesyłaniu przez boty formularzy ze spamem i innymi szkodliwymi treściami. Nawet firmy takie jak Google używają go, aby chronić swój system przed atakami spamowymi. Oto kilka powodów, dla których Twoja witryna może skorzystać na walidacji CAPTCHA:

• CAPTCHA pomagają powstrzymać hakerów i boty przed spamowaniem systemów rejestracji poprzez tworzenie fałszywych kont. Jeśli nie zostanie im to powstrzymane, mogą używać tych kont do nikczemnych celów.
• CAPTCHA mogą zabronić ataków brutalnego logowania z Twojej witryny, których hakerzy używają do logowania się przy użyciu tysięcy haseł.
• CAPTCHA mogą uniemożliwić botom spamowanie sekcji recenzji poprzez podawanie fałszywych komentarzy.
• CAPTCHA pomagają zapobiegać inflacji biletów, ponieważ niektórzy kupują dużą liczbę biletów w celu ich odsprzedaży. CAPTCHA może nawet zapobiec fałszywym rejestracjom na bezpłatne wydarzenia.
• CAPTCHA mogą uniemożliwić oszustom spamowanie blogów z podejrzanymi komentarzami i linkami do szkodliwych stron internetowych.

Istnieje wiele innych powodów, dla których warto zintegrować walidację CAPTCHA z Twoją witryną. Możesz to zrobić za pomocą następującego kodu.

Kod HTML CAPTCHA

HTML, lub HyperText Markup Language, opisuje strukturę strony internetowej. Użyj następującego kodu HTML, aby ustrukturyzować formularz walidacyjny CAPTCHA:

Walidator Captcha z wykorzystaniem HTML, CSS i JavaScript



tekst captcha




Odświeżać

Ten kod składa się głównie z 7 elementów:

• : Ten element służy do wyświetlania nagłówka formularza CAPTCHA.
• : Ten element służy do wyświetlania tekstu CAPTCHA.
• - Ten element służy do tworzenia pola wprowadzania danych do wpisania CAPTCHA.
• : Ten przycisk przesyła formularz i sprawdza, czy CAPTCHA i wpisany tekst są takie same, czy nie.
• : Ten przycisk służy do odświeżania CAPTCHA.
• : Ten element służy do wyświetlania danych wyjściowych zgodnie z wprowadzonym tekstem.
• : To jest element nadrzędny, który zawiera wszystkie inne elementy.

Pliki CSS i JavaScript są połączone z tą stroną HTML poprzez rozszerzenie i elementy odpowiednio. Musisz dodać połączyć tag wewnątrz głowa tag i scenariusz tag na końcu ciało.

Możesz również zintegrować ten kod z istniejącymi formularzami swojej witryny.

Związane z: Ściągawka z podstaw HTML: tagi, atrybuty i nie tylko

Kod CSS CAPTCHA

CSS, czyli Cascading Style Sheets, służy do stylizowania elementów HTML. Użyj następującego kodu CSS, aby stylizować powyższe elementy HTML:

@import url (' https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
background-color: # 232331;
rodzina czcionek: „Roboto”, bezszeryfowa;
}
#captchaBackground {
wysokość: 200px;
szerokość: 250px;
background-color: # 2d3748;
wyświetlacz: elastyczny;
align-items: center;
justify-content: center;
flex-direction: kolumna;
}
#captchaHeading {
kolor biały;
}
#captcha {
margin-bottom: 1em;
rozmiar czcionki: 30px;
odstępy między literami: 3 piksele;
kolor: # 08e5ff;
}
.środek {
wyświetlacz: elastyczny;
flex-direction: kolumna;
align-items: center;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
background-color: # 08e5ff;
border: 0px;
font-weight: pogrubienie;
}
#refreshButton {
background-color: # 08e5ff;
border: 0px;
font-weight: pogrubienie;
}
#pole tekstowe {
wysokość: 25px;
}
.kod weryfikacyjny nieprawdiłowy {
kolor: # FF0000;
}
.correctCaptcha {
kolor: # 7FFF00;
}

Dodaj lub usuń właściwości CSS z tego kodu zgodnie z własnymi preferencjami. Możesz również nadać elegancki wygląd kontenerowi formularza za pomocą Właściwość CSS box-shadow.

Kod JavaScript CAPTCHA

JavaScript służy do dodawania funkcjonalności do statycznej strony internetowej. Użyj poniższego kodu, aby dodać pełną funkcjonalność do formularza weryfikacji CAPTCHA:

// document.querySelector () służy do wybrania elementu z dokumentu za pomocą jego identyfikatora
let captchaText = document.querySelector ('# captcha');
let userText = document.querySelector ('# textBox');
let submitButton = document.querySelector ('# submitButton');
let output = document.querySelector ('# wyjście');
let refreshButton = document.querySelector ('# refreshButton');
// alphaNums zawiera znaki, za pomocą których chcesz utworzyć CAPTCHA
niech 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 = [];
// Ta pętla generuje losowy ciąg 7 znaków przy użyciu alphaNums
// Dalej ten ciąg jest wyświetlany jako CAPTCHA
dla (niech i = 1; i <= 7; i ++) {
emptyArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join ('');
// Ten detektor zdarzeń jest stymulowany za każdym razem, gdy użytkownik naciśnie przycisk „Enter”
// „Dobrze!” lub komunikat „Niepoprawne, spróbuj ponownie”
// wyświetlane po sprawdzeniu wprowadzonego tekstu za pomocą CAPTCHA
userText.addEventListener ('keyup', function (e) {
// Wartość kodu klucza przycisku „Enter” to 13
if (e.keyCode 13) {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Dobrze!";
} else {
output.classList.add ("invalidCaptcha");
output.innerHTML = "Niepoprawnie, spróbuj ponownie";
}
}
});
// Ten detektor zdarzeń jest stymulowany za każdym razem, gdy użytkownik kliknie przycisk „Prześlij”
// „Dobrze!” lub komunikat „Niepoprawne, spróbuj ponownie”
// wyświetlane po sprawdzeniu wprowadzonego tekstu za pomocą CAPTCHA
submitButton.addEventListener ('click', function () {
if (userText.value captchaText.innerHTML) {
output.classList.add ("correctCaptcha");
output.innerHTML = "Dobrze!";
} else {
output.classList.add ("invalidCaptcha");
output.innerHTML = "Niepoprawnie, spróbuj ponownie";
}
});
// Ten detektor zdarzeń jest stymulowany za każdym razem, gdy użytkownik naciśnie przycisk „Odśwież”
// Nowy losowy CAPTCHA jest generowany i wyświetlany po kliknięciu przez użytkownika przycisku „Odśwież”
refreshButton.addEventListener ('click', function () {
userText.value = "";
let refreshArr = [];
dla (niech j = 1; j <= 7; j ++) {
refreshArr.push (alphaNums [Math.floor (Math.random () * alphaNums.length)]);
}
captchaText.innerHTML = refreshArr.join ('');
output.innerHTML = "";
});

Teraz masz w pełni funkcjonalny formularz walidacji CAPTCHA! Jeśli chcesz zobaczyć cały kod, możesz sklonować plik Repozytorium GitHub tego projektu CAPTCHA-Validator. Po sklonowaniu repozytorium uruchom plik HTML, a otrzymasz następujące dane wyjściowe:

Po wprowadzeniu prawidłowego kodu CAPTCHA w polu wprowadzania danych zostanie wyświetlony następujący wynik:

Po wprowadzeniu nieprawidłowego kodu CAPTCHA w polu wejściowym zostanie wyświetlony następujący wynik:

Zabezpiecz swoją witrynę za pomocą CAPTCHA

W przeszłości wiele organizacji i firm poniosło ciężkie straty, takie jak naruszenia danych, ataki spamowe itp. w wyniku braku formularzy CAPTCHA na swoich stronach internetowych. Zdecydowanie zalecamy dodanie CAPTCHA do swojej witryny, ponieważ dodaje ona warstwę bezpieczeństwa, aby chronić witrynę przed cyberprzestępcami.

Firma Google uruchomiła również bezpłatną usługę „reCAPTCHA”, która pomaga w ochronie witryn internetowych przed spamem i nadużyciami. CAPTCHA i reCAPTCHA wydają się podobne, ale nie są tym samym. Czasami CAPTCHA są frustrujące i trudne do zrozumienia dla wielu użytkowników. Chociaż istnieje ważny powód, dla którego są trudne.

Jak działają CAPTCHA i dlaczego są takie trudne?

CAPTCHA i reCAPTCHA zapobiegają spamowi. Jak oni pracują? I dlaczego uważasz, że CAPTCHA są tak trudne do rozwiązania?

Czytaj dalej

O autorze