Tworzenie formularza walidacji CAPTCHA przy użyciu HTML, CSS i JavaScript
CAPTCHA są integralną częścią bezpieczeństwa stron internetowych. Każdego dnia ludzie wypełniają miliony testów CAPTCHA online.
W przypadku, gdy nie wdrożyłeś weryfikacji CAPTCHA w swojej witrynie, istnieje wyraźna możliwość, że może to narazić Cię na poważne luki w zabezpieczeniach i uczynić Twój zakład podatnym na złośliwe ataki przeprowadzane przez podmioty spamujące.
Oto kompleksowy przegląd CAPTCHA, w tym informacje na temat ich implementacji przy użyciu HTML, CSS i JavaScript. Ta wiedza dostarczy ci wszystkich niezbędnych szczegółów do włączenia funkcji CAPTCHA do twoich aplikacji internetowych.
Co to jest CAPTCHA?
CAPTCHA, skrót od “Completely Automated Public Turing Test to Tell Computers and Humans Apart”, został po raz pierwszy wprowadzony przez Luisa von Ahna, Manuela Bluma, Nicholasa J. Hoppera i Johna Langforda jako sposób na odróżnienie ludzi od komputerów na stronach internetowych za pomocą formatu wyzwanie-odpowiedź.
Mechanizmy CAPTCHA zwiększają bezpieczeństwo stron internetowych poprzez stawianie wyzwań, które okazują się uciążliwe dla zautomatyzowanych botów internetowych, a jednocześnie możliwe do opanowania przez wnikliwych ludzkich użytkowników. Przykładowo, rozróżnienie pomiędzy szeregiem przedstawionych pojazdów mieści się w granicach ludzkich możliwości, a jednocześnie stanowi przeszkodę zbyt trudną do pokonania dla robotów.
Koncepcja CAPTCHA wywodzi się z testu Turinga, który został opracowany jako sposób określenia, czy sztuczna inteligencja może wykazywać inteligentne zachowanie nieodróżnialne od ludzkiego. Zasadniczo CAPTCHA służy jako “odwrotny test Turinga”, wymagając od użytkowników, którzy są uważani za ludzi, wykazania się zdolnościami poznawczymi i odróżnienia się od zautomatyzowanych podmiotów próbujących uzyskać nieautoryzowany dostęp za pomocą zwodniczych środków.
Dlaczego twoja strona potrzebuje walidacji CAPTCHA
CAPTCHA odgrywa istotną rolę w ochronie stron internetowych przed złośliwymi działaniami, takimi jak spamowanie, przesyłanie szkodliwych treści za pośrednictwem formularzy i niektóre rodzaje prób włamań poprzez wdrożenie dodatkowej warstwy zabezpieczeń, która odróżnia ludzkich użytkowników od automatycznych botów.
Pomimo tego, że jest to firma zaawansowana technologicznie, nawet Google wykorzystuje CAPTCHA jako środek ochrony swoich systemów przed niechcianymi atakami spamowymi.
Kod HTML CAPTCHA
Kod źródłowy wykorzystany w tym przedsięwzięciu został przesłany do repozytorium GitHub, które zezwala na jego bezpłatne wykorzystanie zgodnie z warunkami licencji MIT. Zainteresowani mogą zapoznać się z przykładem działania, sprawdzając dostarczoną demonstrację.
W tym projekcie włączymy mechanizm CAPTCHA do istniejącego formularza HTML, wykorzystując dostarczony fragment kodu w następujący sposób:
<!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">
<canvas id="captcha">captcha text</canvas>
<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>
Kod ten składa się głównie z siedmiu elementów:
Powyższy kod HTML reprezentuje captcha, która służy do weryfikacji, czy użytkownik jest rzeczywiście człowiekiem, a nie zautomatyzowanym botem. Element zawiera znacznik title o identyfikatorze “captchaHeading”, który służy jako nagłówek formularza captcha.
Wspomniany kod HTML zawiera tag , który jest wykorzystywany do wyświetlania obrazu na stronie internetowej. Dodatkowo istnieją dwa elementy o identyfikatorach “top” i “bottom”, a także kolejny bez żadnego identyfikatora, który służy jako kontener dla tekstu CAPTCHA. Ten ostatni jest wyświetlany za pomocą elementu canvas o ID “captcha”.
Dostarczony fragment kodu wydaje się być fragmentem HTML, który zawiera proste pole wprowadzania tekstu, oznaczone jako “Text”, z powiązanym identyfikatorem “textBox”. Cel tego pola wejściowego jest niejasny bez dodatkowego kontekstu lub informacji o jego zamierzonym użyciu w ramach większej strony internetowej lub aplikacji.
Element wejściowy o identyfikatorze “submitButton” to przycisk przesyłania, który po kliknięciu przetwarza dane formularza i sprawdza, czy wprowadzony kod CAPTCHA jest zgodny z kodem wyświetlanym na stronie, a także sprawdza wszelkie literówki w odpowiedzi użytkownika.
Wspomniany element zawiera przycisk o identyfikatorze “refreshButton”, który jest typu “submit”. Kliknięcie tego przycisku powoduje odświeżenie CAPTCHA.
Wspomniany fragment kodu zawiera element HTML span, który służy jako atrakcyjny wizualnie kontener do wyświetlania treści. Wyświetlana treść jest generowana dynamicznie na podstawie walidacji danych wejściowych dostarczanych przez użytkowników poprzez implementację systemu CAPTCHA.
Wspomniany komponent służy jako jednostka nadrzędna obejmująca różne elementy podrzędne w swoich granicach, działając jako kontener dla wspomnianych komponentów.
Wyżej wymieniony szablon CAPTCHA HTML zawiera funkcję linkowania poprzez wykorzystanie elementów i , przy czym pierwszy z nich znajduje się w sekcji , a drugi znajduje się na końcu sekcji dokumentu.
Poruszanie się po szerokiej gamie znaczników HTML i odpowiadających im atrybutów może okazać się wyzwaniem dla niektórych osób. Na szczęście istnieje łatwo dostępny zasób znany jako ściągawka HTML, który zawiera zwięzłe podsumowanie podstawowych elementów HTML.To przydatne narzędzie służy jako cenny punkt odniesienia dla tych, którzy szukają szybkiego przeglądu składni HTML.
Włączenie tego skryptu jest możliwe poprzez włączenie go do projektu stron internetowych, co pozwala na płynną integrację z istniejącymi już formularzami.
Kod CSS CAPTCHA
Wykorzystaj CSS, czyli kaskadowe arkusze stylów, aby zastosować właściwości stylistyczne do elementów HTML. Powstały kod CSS może być wykorzystany do upiększenia wyglądu formularza weryfikacyjnego CAPTCHA:
@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;
}
.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;
}
Możesz poprawić wygląd kontenera formularza, stosując właściwość CSS box-shadow , która dodaje stylowy efekt cienia wokół elementu. Dodatkowo, możesz modyfikować inne właściwości CSS zgodnie ze swoimi preferencjami, aby jeszcze bardziej udoskonalić wygląd formularza.
Walidacja CAPTCHA za pomocą JavaScript
Aby nadać stronie internetowej dodatkowe możliwości, konieczne jest zastosowanie JavaScript. Aby rozpocząć, należy pobrać wymagane elementy, takie jak płótno i pole wprowadzania tekstu za pomocą metody document.getElementById(). Umożliwi to skuteczny dostęp do tych komponentów i manipulowanie nimi.
let captchaText = document.getElementById('captcha');
var ctx = captchaText.getContext("2d");
ctx.font = "30px Roboto";
ctx.fillStyle = "#08e5ff";
let userText = document.getElementById('textBox');
let submitButton = document.getElementById('submitButton');
let output = document.getElementById('output');
let refreshButton = document.getElementById('refreshButton');
W tym przypadku wykorzystujemy document.getElementById() w celu zidentyfikowania i wyodrębnienia konkretnego elementu w dokumencie na podstawie jego unikalnego identyfikatora znanego jako “ID”.
Aby utworzyć wyzwanie CAPTCHA, należy wybrać sekwencję dowolnych znaków. Istnieje kilka metod wykonania tego zadania, w tym przechowywanie zbioru możliwych znaków w tablicy jako punktu wyjścia do wyboru.
var captchaStr = "";
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'];
Oto przykład tego, jak można zaimplementować funkcję generowania CAPTCHA w JavaScript przy użyciu kombinacji HTML5 Canvas i metody Math.random():javascriptfunction generateCaptcha() {// Utwórz element canvas dla captcha imagevar canvas = document.createElement(“canvas”);canvas.width = 200;canvas.height = 80;// Get context for canvasvar ctx = canvas.getContext(“2d”);// Randomly set color for background and textvar bgColor = “#” \+ Math.floor(Math.random() * 16777215).toString(16);var txtColor = “#” \+ Math.floor(Math
Zaczynamy od skonstruowania zupełnie nowej tablicy złożonej z dowolnych znaków z alphaNums . Będziemy iterować przez ten proces z góry określoną liczbę razy - w tym przypadku siedem iteracji. W każdym przejściu wprowadzamy świeżo wybrany znak z alphaNums do rosnącej tablicy. Na koniec stosujemy metodę fillText() , aby nanieść całą kolekcję na nasze płótno jako pojedynczą całość.
function generate_captcha() {
let emptyArr = [];
for (let i = 1; i <= 7; i\\+\\+) {
emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
captchaStr = emptyArr.join('');
ctx.clearRect(0, 0, captchaText.width, captchaText.height);
ctx.fillText(captchaStr, captchaText.width/4, captchaText.height/2);
output.innerHTML = "";
}
generate_captcha();
Należy pamiętać, że ta konkretna funkcja usuwa powierzchnię rysowania i przywraca wszystkie dane wyjściowe, z których oba odgrywają kluczową rolę w odmładzaniu wyświetlania tekstu CAPTCHA.
Proces walidacji danych wejściowych użytkownika polega na porównaniu ich z oryginalnym ciągiem CAPTCHA. Aby to osiągnąć, można utworzyć dedykowaną funkcję, która wykonuje porównanie i zwraca wartość logiczną wskazującą, czy wprowadzony kod jest zgodny z oczekiwanym. Zapewni to prawidłowe uwierzytelnianie przed zezwoleniem na dostęp do poufnych danych lub funkcji w witrynie.
function check_captcha() {
if (userText.value === captchaStr) {
output.className = "correctCaptcha";
output.innerHTML = "Correct!";
} else {
output.className = "incorrectCaptcha";
output.innerHTML = "Incorrect, please try again!";
}
}
Wskaż, że kod powinien zostać wykonany po naciśnięciu klawisza “Enter” lub kliknięciu przycisku “Prześlij”, dodając detektor zdarzeń odpowiednio dla zdarzeń “keydown” i “click” w odpowiednich elementach, takich jak pola formularzy lub przyciski, z odpowiednimi funkcjami do obsługi logiki przesyłania danych formularza w celu aktualizacji arkusza kalkulacyjnego.
userText.addEventListener('keyup', function(e) {
if (e.key === 'Enter') {
check_captcha();
}
});
submitButton.addEventListener('click', check_captcha);
Aby rozwiązać problem captchy generowanej tylko raz i niedostępnej po odświeżeniu strony lub zmianie adresu url, musimy zaimplementować mechanizm odświeżania captchy przy każdym żądaniu. Aby to osiągnąć, wystarczy powiązać zdarzenie “submit” przycisku generowania captcha z wywołaniem funkcji generate_captcha() w znaczniku skryptu, który go zawiera. Zapewni to, że nowa captcha będzie generowana przy każdym przesłaniu formularza lub zmianie adresu URL, zachowując w ten sposób niezbędne środki bezpieczeństwa, zapewniając jednocześnie płynne wrażenia użytkownika.
refreshButton.addEventListener('click', generate_captcha);
Dane wyjściowe projektu CAPTCHA Validator
Rzeczywiście, po pomyślnym odtworzeniu formularza CAPTCHA Validation Form na własnym serwerze lub w środowisku lokalnym, będziesz mógł zobaczyć oczekiwane dane wyjściowe wyświetlane na stronie internetowej, potwierdzające, że funkcjonalność captcha jest prawidłowo zintegrowana z bazą kodu. Służy to jako wskazówka, że implementacja została przeprowadzona poprawnie i działa skutecznie w zamierzonym celu.
Po wprowadzeniu prawidłowego kodu weryfikacyjnego CAPTCHA w wyznaczonym polu wejściowym, zostanie w nim wyświetlona odpowiednia odpowiedź, jak wyszczególniono poniżej:
Po przesłaniu nieprawidłowej odpowiedzi na proces weryfikacji CAPTCHA za pośrednictwem podanego pola wprowadzania, system wygeneruje następującą informację zwrotną:
Zabezpiecz swoją witrynę za pomocą CAPTCHA
W poprzednich przypadkach wiele instytucji i przedsiębiorstw doświadczyło poważnych niepowodzeń, takich jak naruszenia danych i ataki spamowe z powodu braku funkcji CAPTCHA na ich platformach internetowych. Zdecydowanie zaleca się wdrożenie CAPTCHA w celu zapewnienia dodatkowej warstwy ochrony przed złośliwymi działaniami cybernetycznymi ukierunkowanymi na systemy internetowe.
Google wprowadziło bezpłatną ofertę znaną jako “reCAPTCHA”, która służy do ochrony stron internetowych przed spamem i nieuczciwymi działaniami. Chociaż CAPTCHA i reCAPTCHA mogą wydawać się analogiczne, mają pewne różnice. W niektórych przypadkach CAPTCHA mogą okazać się irytujące i trudne do zrozumienia dla wielu użytkowników końcowych. Należy jednak pamiętać, że trudności te są celowo włączone ze względu na ich krytyczną funkcję w weryfikacji autentyczności użytkownika.