Amankan Form dengan Captcha! Gini Cara Buatnya

Share:
Hello Worlds! Beberapa waktu lalu, saya kan pernah pos gimana sih caranya biar website aman dari deface. Dan disana, saya menyebutkan bahwa celah yang biasanya rawan adalah bagian form. Nah, gimana sih caranya mengamankan form dari serangan orang usil?

Anda bisa meletakkan $_POST di dalam fungsi mysql_real_escape_string() sebagai pencegah dan pengaman. Selain itu, gunakan juga captcha untuk pengamanan ganda. Ngomong-ngomong, apa sih captcha itu? Mungkin secara sadar (karena tidak mungkin Anda berinternet ria dalam keadaan kejang) Anda sering menemui sebuah gambar yang memuat angka / campuran angka dan huruf dan disuruh memasukkannya pada suatu box. Itulah yang dinamakan captcha.

Captcha adalah suatu bentuk atau uji tantangan tanggapan yang digunakan dalam suatu sistem untuk memastikan bahwa jawaban tidak dihasilkan oleh suatu sistem komputer atau robot. Dengan menggunakan captcha, Anda sebagai pengelola web akan terhindar dari 2 marabahaya berikut ini :
  • Spam Input / Flood
Flood adalah proses penginputan data secara berulang-ulang. Pengguna tidak akan bisa melakukan double input data atau lebih, karena di input yang kedua kali captcha sudah beda dari inputan yang pertama.
  • Mencegah serangan brute force
Entah apa alasan dari poin ini. Yang jelas, banyak orang mengatakan mereka kesulitan mendeface website yang ada captcha-nya dengan menggunakan metode brute force. Saya sendiri sih belum membuktikan ya. Bisa dibuktikan sendiri-sendiri.

Untuk cara membuatnya gampang kok, tinggal masukkan telur, kocok hingga rata, buang ke sampah, buka perangkat komputer, dan mulai ngoding dengan langkah pertama membuat file captcha.php yang berisikan script seperti berikut ini.

<?php

session_start(); // mengaktifkan sesi
header("Content-type: image/png");

$_SESSION['captcha'] = " "; // inisialisasi sesi

$gambar = imagecreate(220, 69);

imagecolorallocate($gambar, 128, 128, 128); // background gambar

$shadowTulisan = imagecolorallocate($gambar, 255, 255, 255);
$warnaTulisan = imagecolorallocate($gambar, 0, 0, 0);

$font = "Yahoo.ttf";
$fontSize = 21;

for ($i = 0; $i <= 5; $i++) {
     $angka = rand(0, 9);
     $_SESSION['captcha'] .= $angka;
   
     $kemiringan = rand(-25, 25);
     imagettftext($gambar, $fontSize, $kemiringan, 8+25*$i, 33, $warnaTulisan, $font, $angka);
     imagettftext($gambar, $fontSize, $kemiringan, 9+25*$i, 34, $shadowTulisan, $font, $angka);
}

// membuat gambar
imagepng($gambar);
imagedestroy($gambar);

?>

Setelah Anda membuat script di atas, pastikan Anda sudah memiliki font Yahoo! Bisa diunduh dari Dafont secara gratis. Kemudian, buatlah form-nya kurang lebih seperti ini.

<!DOCTYPE html>
<html>
<head>
     <title>Form Login pakai Captcha</title>
     <link href="http://belajarnge.web.id/alat/styleFormBercaptcha.css" rel="stylesheet">
</head>
<body>

<form action="login.php" method="post">
     <h2>Login</h2>
     <input type="text" name="username" id="user" placeholder="Username..."><br />
     <input type="password" name="password" id="pwd" placeholder="Password..."><br />
     <img src="captcha.php" alt="captcha"><br />
     <input type="text" name="captcha" id="capt" placeholder="Verifikasi..."><br />
     <input type="submit" value="Login">
</form>

</body>
</html>

Tampilan form sudah jadi. Sekarang tinggal membuat aksi untuk login-nya yang seperti di bawah ini.

<?php

session_start();
$sesiCapt = $_SESSION['captcha']; // mengetahui value captcha

$user = "admin";
$pass = "admin"; // menentukan username dan password

$username = $_POST['username'];
$password = $_POST['password'];
$captcha = $_POST['captcha']; // mendapatkan inputan pengguna

if ($sesiCapt == $captcha) {
     if ($user == $username && $pass == $password) {
          echo "login berhasil";
     } else {
          echo "username / password salah";
     }
} else {
     echo "captcha salah";
}

?>

Script diatas bisa Anda modifikasi sendiri sesuai hati nurani. Seperti dengan menambahkan tombol reload apabila gambar tidak dapat dilihat / dibaca. Yaitu dengan membungkus img yang memuat captcha.php pada form dengan menggunakan div (tentunya diberi id; contoh : #verif) dan menambahkan tombol untuk merefresh. Ketika tombol tersebut diklik, maka syntax-nya adalah (setelah click function) :

$("#tombol").click(function() {
     // ini syntaxnya
     $("#verif").html("<img src='captcha.php' alt='captcha'>");
});

Jika Anda ingin captcha yang lebih aman lagi, bisa menggunakan reCAPTCHA, yaitu sebuah API dari Google yang berwujudkan captcha. reCAPTCHA ini memiliki 2 metode untuk verifikasi, yakni dengan memilih gambar dan mendengarkan suara lalu diinputkan. Untuk cara pakainya mungkin akan saya bahas di postingan yang berikutnya, biar saya nggak kehabisan ide buat nulis. Semoga bermanfaat.....

2 comments:

  1. Popupnya mengganggu bro. kunbal yak http://erllang.ga

    ReplyDelete
    Replies
    1. namanya juga usaha wkwkwkw... udah saya komen bang blognya

      Delete