Membuat CAPTCHA menggunakan HTML, JavaScript dan PHP

Penulis: Muhammad Fairuzabadi
Email: fairuz@upy.ac.id
Google Schooler: Muhammad Fairuzabadi

Apa itu captcha

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) adalah fiitur keamanan web yang digunakan untuk membedakan antara manusia dan bot komputer. Tujuan dari CAPTCHA adalah untuk mencegah robot atau program komputer otomatis yang dikendalikan oleh orang jahat (seperti spammer atau penjahat siber) untuk melakukan tindakan yang merugikan pada situs web, seperti mengirimkan spam, melakukan serangan DDoS, atau mencoba meretas sistem.

Penggunaan CAPTCHA dapat membantu mencegah serangan DDoS pada tingkat tertentu. CAPTCHA adalah tes otomatis yang dirancang untuk membedakan antara manusia dan bot, sehingga hanya pengguna manusia yang diizinkan untuk mengakses website atau sumber daya tertentu. Penggunaan CAPTCHA dapat membantu melindungi website dari serangan DDoS yang dilakukan oleh bot atau program otomatis.

Dalam konteks DDoS, CAPTCHA dapat membantu dengan cara memperlambat serangan DDoS. Serangan DDoS biasanya memanfaatkan banyak komputer atau perangkat untuk mengirimkan permintaan data secara bersamaan ke server website. Dengan menerapkan CAPTCHA, server akan meminta pengguna untuk menyelesaikan tes sebelum mengakses website atau sumber daya tertentu. Hal ini dapat membuat serangan DDoS menjadi lebih sulit dilakukan karena bot atau program otomatis tidak dapat menyelesaikan tes CAPTCHA.

Namun, perlu diingat bahwa penggunaan CAPTCHA juga memiliki kelemahan. CAPTCHA dapat mempersulit akses bagi pengguna yang sah, seperti orang dengan gangguan penglihatan atau orang yang menggunakan perangkat bantu. Selain itu, CAPTCHA dapat diatasi dengan teknologi yang semakin canggih, seperti pemecahan CAPTCHA dengan kecerdasan buatan.

Dalam praktiknya, penggunaan CAPTCHA sebaiknya digunakan sebagai bagian dari strategi keamanan yang lebih komprehensif untuk melindungi website dari serangan DDoS. Strategi tersebut meliputi penggunaan firewall, proteksi DDoS, dan pengawasan jaringan secara teratur untuk mengidentifikasi lalu lintas jaringan yang mencurigakan.

CAPTCHA biasanya berbentuk gambar atau teks acak yang dihasilkan secara otomatis, dan pengguna diminta untuk memasukkan teks atau angka yang terbaca dari gambar tersebut. Karena program komputer biasanya tidak dapat membaca gambar dengan akurasi yang sama seperti manusia, CAPTCHA dapat membantu memastikan bahwa hanya manusia yang dapat melakukan tindakan tertentu pada situs web.

CAPTCHA menggunakan HTML, JavaScript dan PHP

Berikut ini adalah contoh kode HTML dan JavaScript untuk membuat CAPTCHA sederhana menggunakan gambar dan input teks:

<!DOCTYPE html>
<html>
<head>
	<title>Contoh CAPTCHA sederhana</title>
	<script>
		// Fungsi untuk membuat CAPTCHA acak
		function generateCaptcha() {
			// Daftar karakter yang mungkin
			var chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
			
			// Membuat string acak dengan 6 karakter
			var captcha = "";
			for (var i = 0; i < 6; i++) {
				captcha += chars.charAt(Math.floor(Math.random() * chars.length));
			}
			
			// Menampilkan gambar CAPTCHA
			document.getElementById("captchaImg").setAttribute("src", "captcha.php?captcha=" + captcha);
			
			// Menyimpan nilai CAPTCHA ke dalam variabel global
			window.captchaValue = captcha;
		}
		
		// Fungsi untuk memeriksa nilai input dengan nilai CAPTCHA
		function checkCaptcha() {
			// Memeriksa nilai input dengan nilai CAPTCHA
			if (document.getElementById("captchaInput").value == window.captchaValue) {
				alert("CAPTCHA benar!");
			} else {
				alert("CAPTCHA salah! Silakan coba lagi.");
				generateCaptcha();
			}
		}
	</script>
</head>
<body onload="generateCaptcha();">
	<h1>Contoh CAPTCHA sederhana</h1>
	<p>Silakan masukkan teks yang terlihat pada gambar di bawah ini:</p>
	<img id="captchaImg" alt="CAPTCHA" />
	<br />
	<input type="text" id="captchaInput" />
	<button onclick="checkCaptcha();">Submit</button>
</body>
</html>

Pada kode di atas, terdapat fungsi generateCaptcha() yang digunakan untuk membuat CAPTCHA acak dan menampilkan gambar CAPTCHA ke dalam elemen <img>. Kemudian, terdapat fungsi checkCaptcha() yang dipanggil saat pengguna menekan tombol “Submit” untuk memeriksa nilai input dengan nilai CAPTCHA yang disimpan dalam variabel global window.captchaValue.

Untuk membuat gambar CAPTCHA, kita perlu membuat file PHP dengan nama captcha.php yang akan digunakan sebagai sumber gambar. Berikut ini adalah kode PHP untuk membuat gambar CAPTCHA:

<?php
// Memulai sesi
session_start();

// Mengatur jenis konten menjadi image/png
header("Content-type: image/png");

// Membuat gambar PNG berukuran 120x30 piksel
$img = imagecreate(120, 30);

// Mengatur warna latar belakang (putih)
$bgColor = imagecolorallocate($img, 255, 255, 255);

// Mengatur warna teks (hitam)
$textColor = imagecolorallocate($img, 0, 0, 0);

// Mengambil nilai CAPTCHA dari parameter URL
$captcha = $_GET["captcha"];

// Menuliskan nilai CAPTCHA ke dalam gambar
imagestring($img, 5, 10, 8, $captcha, $textColor);

// Menyimpan nilai CAPTCHA ke dalam sesi
$_SESSION["captcha"] = $captcha;

// Menampilkan gambar ke dalam bentuk PNG
imagepng($img);

// Menghapus gambar dari memori
imagedestroy($img);
?>

Pada kode di atas, kita menggunakan fungsi imagecreate() untuk membuat gambar berukuran 120×30 piksel dengan warna latar belakang putih dan warna teks hitam. Kemudian, nilai CAPTCHA diambil dari parameter URL menggunakan $_GET["captcha"], dan nilai CAPTCHA dituliskan ke dalam gambar menggunakan fungsi imagestring(). Terakhir, nilai CAPTCHA disimpan ke dalam sesi $_SESSION["captcha"] untuk membandingkannya dengan nilai input di kemudian hari.

Berikut ini adalah tampilan dari contoh CAPTCHA sederhana yang telah kita buat menggunakan HTML dan JavaScript:

Pada tampilan di atas, pengguna diminta untuk memasukkan teks yang terlihat pada gambar CAPTCHA untuk memverifikasi bahwa mereka adalah manusia dan bukan bot. Setiap kali halaman dimuat, nilai CAPTCHA akan diubah secara acak untuk menghindari serangan brute-force. Jika nilai input yang dimasukkan oleh pengguna cocok dengan nilai CAPTCHA yang ditampilkan pada gambar, maka pesan “CAPTCHA benar!” akan muncul, dan sebaliknya jika nilai input tidak cocok, pesan “CAPTCHA salah! Silakan coba lagi.” akan muncul dan gambar CAPTCHA akan diubah.

1 komentar pada “Membuat CAPTCHA menggunakan HTML, JavaScript dan PHP

  1. Ping-balik: Fitur Keamanan Web | Fairuzelsaid

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *