CAPTCHA’lar, web sitesi güvenliğinin ayrılmaz bir parçasıdır. İnsanlar her gün çevrimiçi olarak milyonlarca CAPTCHA testi tamamlıyor.
CAPTCHA doğrulamasını web sitenize uygulamadıysanız, bu sizin için büyük bir sorun oluşturabilir ve sizi spam gönderenler için bir hedef haline getirebilir.
CAPTCHA’lar ve bunları HTML, CSS ve JavaScript ile kolayca nasıl uygulayabileceğiniz hakkında bilmeniz gereken her şey burada.
CAPTCHA Nedir?
CAPTCHA, “Bilgisayarları ve İnsanları Ayırmak için Tamamen Otomatik 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 icat edildi. Web sitelerinin, kullanıcının insan olup olmadığını belirlemek için kullandığı bir tür meydan okuma-yanıt testidir.
CAPTCHA’lar, botlar için gerçekleştirmesi zor ancak insanlar için nispeten kolay olan zorluklar sağlayarak web sitelerine güvenlik ekler. Örneğin, bir arabanın tüm görüntülerini birden çok görüntüden belirlemek botlar için zor ama insan gözü için yeterince basit.
CAPTCHA fikri, Turing Testinden kaynaklanmaktadır. Turing Testi, bir makinenin insan gibi düşünüp düşünemeyeceğini test etmek için kullanılan bir yöntemdir. CAPTCHA testini bir “ters Turing Testi” olarak düşünebilirsiniz, çünkü bir insanı bilgisayar olmadığını kanıtlamaya zorlar.
Web Siteniz Neden CAPTCHA Doğrulamasına İhtiyaç Duyuyor?
CAPTCHA’lar, botların spam ve diğer zararlı içerikli 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 yararlanmasının nedenlerinden bazıları şunlardır:
CAPTCHA’lar, bilgisayar korsanlarının ve botların sahte hesaplar oluşturarak kayıt sistemlerine spam göndermesini önlemeye yardımcı olur. Önlenmezlerse, bu hesapları hain amaçlar için kullanabilirler.
CAPTCHA’lar, bilgisayar korsanlarının binlerce parola kullanarak oturum açmaya çalıştıkları web sitenizden kaba kuvvet oturum açma saldırılarını yasaklayabilir.
CAPTCHA’lar, yanlış yorumlar sağlayarak botların inceleme bölümüne spam göndermesini engelleyebilir.
CAPTCHA’lar, bazı kişiler yeniden satış 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 şüpheli yorumlar ve zararlı web sitelerine bağlantılar içeren blogları spam göndermesini engelleyebilir.
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 temel 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 buton CAPTCHA’yı yenilemek için kullanılır.
<span id=”output”> </span> : Bu öğe, girilen metne göre çıktıyı görüntülemek için 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 . Bağlantı etiketini head’in içine ve script etiketini body’nin sonuna eklemelisiniz .
Pek çok HTML etiketi ve niteliği vardır ve bunların hepsini hatırlamak bunaltıcı olabilir. HTML etiketleri ve nitelikleri hakkında hızlı bir bilgi tazeleme almak için her zaman bir HTML kopya sayfasına başvurabilirsiniz.
Bu kodu web sitenizdeki mevcut formlarla da entegre edebilirsiniz.
CSS CAPTCHA Kodu
HTML öğelerini stillendirmek için CSS’yi (Basamaklı Stil Sayfaları) kullanabilirsiniz. CAPTCHA doğrulama formuna stil vermek 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. CSS box-shadow özelliğini kullanarak form kapsayıcısına zarif bir görünüm de 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 göz atmak isterseniz, bu CAPTCHA-Doğrulayıcı Projesinin GitHub deposunu kopyalayabilirsiniz. Depoyu klonladıktan sonra HTML dosyasını açın ve aşağıdaki çıktıyı göreceksiniz:
CAPTCHA Doğrulayıcı formu
Giriş kutusuna doğru CAPTCHA kodunu girdiğinizde, aşağıdaki çıktıyı gösterecektir:
CAPTCHA Doğrulayıcı, doğru CAPTCHA’yı oluşturur
Giriş kutusuna yanlış bir CAPTCHA kodu girdiğinizde, aşağıdaki çıktıyı görüntüler:
CAPTCHA Doğrulayıcı formu Hatalı CAPTCHA
CAPTCHA’lar ile Web Sitenizi Güvenli Hale Getirin
Geçmişte birçok kuruluş ve işletme, web sitelerinde CAPTCHA formlarının olmaması nedeniyle veri ihlalleri, spam saldırıları vb. 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 tamamen aynı şey değiller. Bazen CAPTCHA’lar birçok kullanıcı için sinir bozucu ve anlaşılması zor gelebilir. Yine de, neden zor hale getirildiklerinin önemli bir nedeni var.