CAPTCHA doğrulaması ile web sitelerinizi güvenli hale getirin.
CAPTCHA’lar, web sitesi güvenliğinin ayrılmaz bir parçasıdır. İnsanlar her gün çevrimiçi olarak milyonlarca CAPTCHA testini tamamlıyor.
Web sitenize CAPTCHA doğrulaması uygulamadıysanız, bu sizin için büyük bir sorun yaratabilir ve sizi spam gönderenler için bir hedef haline getirebilir.
CAPTCHA’lar ve bunları HTML, CSS ve JavaScript ile nasıl kolayca uygulayabileceğiniz hakkında bilmeniz gereken her şey burada.
CAPTCHA Nedir?
CAPTCHA, “Bilgisayarları ve İnsanları Ayırmak için Tamamen Otomatikleştirilmiş Genel Turing testi” anlamına gelir. Bu terim 2003 yılında Luis von Ahn, Manuel Blum, Nicholas J. Hopper ve John Langford tarafından yapılmıştır. Web sitelerinin, kullanıcının insan olup olmadığını belirlemek için kullandığı bir tür sorgulama-yanıt testidir.
CAPTCHA’lar, botların gerçekleştirmesi zor, ancak insanlar için nispeten kolay zorluklar sağlayarak web sitelerine güvenlik katar. Örneğin, bir arabanın tüm görüntülerini bir dizi çoklu görüntüden tanımlamak, botlar için zor, ancak insan gözü için yeterince basittir.
CAPTCHA fikri Turing Testinden kaynaklanmaktadır. Turing Testi, bir makinenin insan gibi düşünüp düşünemeyeceğini test eden bir yöntemdir. CAPTCHA testini bir “ters Turing Testi” olarak düşünebilirsiniz, çünkü bir insanı bilgisayar olmadığını kanıtlamaya zorlar.
Web Sitenizin Neden CAPTCHA Doğrulamasına İhtiyacı Var?
CAPTCHA’lar, botların spam ve diğer zararlı içeriğe sahip formları otomatik olarak göndermesini önlemek için kullanılır. Google gibi şirketler bile sistemlerini spam saldırılarından korumak için kullanıyor. Web sitenizin CAPTCHA doğrulamasından faydalanmasının nedenlerinden bazıları şunlardır:
- CAPTCHA’lar, sahte hesaplar oluşturarak bilgisayar korsanlarının ve botların kayıt sistemlerine spam göndermesini önlemeye yardımcı olur. Engellenmezse, bu hesapları hain amaçlarla kullanabilirler.
- CAPTCHA’lar, bilgisayar korsanlarının binlerce parola kullanarak oturum açmayı denemek için kullandığı web sitenizden kaba kuvvetle oturum açma saldırılarını yasaklayabilir.
- CAPTCHA’lar, yanlış yorumlar sağlayarak botların inceleme bölümüne spam göndermesini kısıtlayabilir.
- CAPTCHA’lar, bazı insanlar yeniden satmak için çok sayıda bilet satın aldığından, bilet enflasyonunun önlenmesine yardımcı olur. CAPTCHA’lar, ücretsiz etkinliklere yapılan yanlış kayıtları bile önleyebilir.
- CAPTCHA’lar, siber dolandırıcıların bloglara tehlikeli yorumlar ve zararlı web sitelerine bağlantılar içeren spam göndermelerini kısıtlayabilir.
CAPTCHA doğrulamasını web sitenize entegre etmeyi destekleyen daha birçok neden vardır. Aşağıdaki kod ile yapabilirsiniz.
Bu projenin canlı versiyonuna göz atmak isterseniz, bu demoya göz atabilirsiniz .
HTML CAPTCHA Kodu
Bu projede, bir HTML formuna CAPTCHA ekleyeceksiniz. HTML’ye CAPTCHA eklemek için aşağıdaki kodu kullanın:
<!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>
Bu kod esas olarak 7 öğeden oluşur:
<h1 id=”captchaHeading”> <h1> : Bu öğe, CAPTCHA formunun başlığını görüntülemek için kullanılır.
<canvas id=”captcha”> </canvas> : Bu öğe, CAPTCHA metnini görüntülemek için kullanılır.
<input id=”textBox” type=”text” name=”text”> – Bu öğe, CAPTCHA’yı yazmak için bir giriş kutusu oluşturmak için kullanılır.
<input id=”submitButton” type=”submit”> : Bu düğme formu gönderir ve CAPTCHA ile yazılan metnin aynı olup olmadığını kontrol eder.
<button id=”refreshButton” type=”submit”> </button> : Bu düğme CAPTCHA’yı yenilemek için kullanılır.
<span id=”output”> </span> : Girilen metne göre çıktıyı görüntülemek için bu eleman kullanılır.
<div class=”center”> </div> : Bu, diğer tüm öğeleri içeren ana öğedir.
Bu HTML sayfası, sırasıyla bağlantı ve komut dosyası öğeleri aracılığıyla CSS ve JavaScript dosyalarına bağlanır . Link etiketini head içine ve script etiketini body bölümünün sonuna eklemelisiniz .
Birçok HTML etiketi ve özelliği vardır ve hepsini hatırlamak çok zor olabilir. HTML etiketleri ve nitelikleri hakkında hızlı bir bilgi tazelemek için her zaman bir HTML hile sayfasına başvurabilirsiniz.
Bu kodu web sitenizdeki mevcut formlarla da entegre edebilirsiniz.
CSS CAPTCHA Kodu
HTML öğelerine stil vermek için CSS—Cascading Style Sheets—kullanabilirsiniz. CAPTCHA doğrulama formunun stilini belirlemek için aşağıdaki CSS kodunu kullanın:
@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;
}
Tercihinize göre bu koddan CSS özellikleri ekleyin veya kaldırın. Ayrıca CSS box-shadow özelliğini kullanarak form kabına zarif bir görünüm verebilirsiniz .
JavaScript CAPTCHA Kodu
Bir web sayfasına işlevsellik eklemek için JavaScript’i kullanabilirsiniz . CAPTCHA doğrulama formuna eksiksiz işlevsellik eklemek için aşağıdaki kodu kullanın:
// 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 = “”;
});
Artık tamamen işlevsel bir CAPTCHA doğrulama formunuz var. Kodun tamamına bir göz atmak isterseniz, bu CAPTCHA-Validator Projesinin GitHub deposunu klonlayabilirsiniz. Depoyu klonladıktan sonra HTML dosyasını açın ve aşağıdaki çıktıyı göreceksiniz:
CAPTCHA’larla Web Sitenizi Güvende Tutun
Geçmişte birçok kurum ve işletme, web sitelerinde CAPTCHA formlarının bulunmaması nedeniyle veri ihlalleri, spam saldırıları vb. gibi ağır kayıplara uğradı. Web sitesini siber suçlulardan korumak için bir güvenlik katmanı eklediğinden, web sitenize CAPTCHA eklemeniz önemle tavsiye edilir.
Google ayrıca web sitelerini spam ve kötüye kullanımdan korumaya yardımcı olan “reCAPTCHA” adlı ücretsiz bir hizmet başlattı. CAPTCHA ve reCAPTCHA benzer görünüyor, ancak tam olarak aynı şey değiller. Bazen CAPTCHA’lar birçok kullanıcı için sinir bozucu ve anlaşılması zor geliyor. Yine de, neden zorlaştırıldıklarına dair önemli bir sebep var.