_     _                                             
                          | |__ (_)__ _  ___  _ __  _ __  ___   ___ __ _  ___  
                          | '_ \| |__` |/ _ \| '_ \| '_ \/ _ \ / _ ' _` |/ _ \ 
                          | |_) | |  | | (_) | |_) | |_) \__  | | | | | | (_) |
                          |_.__/|_|  |_|\___/|_.__/| .__/|___/|_| |_| |_|\___/ 
                                                    \___|                      


OMEGA|ZINE RELEASE
       03

Author: omicron9194 || omicron9194[at]omega.or.id
Online @ www.omega.or.id :: http://ezine.omega.or.id

== Critical! Client Side Validation  ==


---00 //Intro---
Hai! Ketemu lagi dengan omicron9194! Pada artikel ini saya akan menjelaskan 
konsep validasi javascript dan security-nya.


---01 //Javascript---
Merupakan bahasa pemrograman berbasis client side. Karena berbasis client side 
dan tidak membutuhkan beban besar (sangat ringan), maka banyak sekali orang - 
orang yang menggunakan bahasa ini untuk keperluan web atau aplikasi berbasis 
web.


---02 //Programming---
Seperti bahasa pemrograman lainnya, javascript menyediakan array, percabangan, 
perulangan, dsb. Penggunaan form pada aplikasi web saat ini sangat banyak 
ditemukan. Masalah muncul ketika seseorang membuat validasi form menggunakan 
javascript, client side scripting. Validasi yang hanya menggunakan javascript 
ini bisa di bypass sehingga mengizinkan inputan karakter/kosong yang tidak 
diiginkan dalam aplikasi.


---03 //Proof of Concept---
Saya telah membuat contoh untuk implementasi dari konsep ini. Saya mempunyai 2 
file, index.php dan cek.php

Isi dari index.php :

--------------------------------------BoF--------------------------------------
<script languange="javascript">
function cek() {

 var a=document.getElementById('nama').value;
 var b=document.getElementById('alamat').value;
 
  if(a=="") {
   document.write("nama belum diisi");
   document.write("<br><a href="javascript:history.back()">balik</a>");
   }
  else if(b=="") {
   document.write("alamat belum diisi");
   document.write("<br><a href="javascript:history.back()">balik</a>");
   }
 }
</script>
<form name="fform" method="post" action="cek.php">
<table>
<tr><td>Nama</td><td>:<input type="text" name="nama" id="nama"></tr>
<tr><td>Alamat</td><td>:<input type="text" name="alamat" id="alamat"></tr>
<tr><td colspan="2"><input type="submit" value="submit" onclick="cek()"></tr>
</table>
</form>
--------------------------------------EoF--------------------------------------

Code di atas adalah sebuah form yang akan men-submit variabel nama dan alamat. 
Tetapi sebelum di-submit, javascript akan mengecek terlebih dahulu apakah 
variabel nama dan alamat itu telah terisi nilai, jika terisi maka form akan 
ter-submit ke cek.php, tetapi jika tidak halaman akan mengeluarkan pesan 
kesalahan dan harus kembali untuk mengisi form dengan benar.



Isi dari cek.php :

--------------------------------------BoF--------------------------------------
<?php
mysql_connect("localhost","root","");
mysql_select_db("belajar");

$nama=$_POST['nama'];
$alamat=$_POST['alamat'];

 $insert=mysql_query("insert into content values(NULL,'$nama','$alamat')");
 if($insert) {
 echo "berhasil insert data";
 }
 else echo "gagal";

?>
--------------------------------------EoF--------------------------------------

Jika form terisi dengan benar maka ter-submit ke cek.php yang akan memasukkan 
data ke database dari inputan form yang disediakan.

mysql> select*from content;
+----+--------+----------+
| id | nama   | alamat   |
+----+--------+----------+
|  1 | nakula | wherever | <- ini adalah data yang telah dimasukkan
+----+--------+----------+
1 row in set (0.00 sec)


---04 //Lets h4ck---
Sekarang saya ambil scriptnya dari page source, kemudian saya edit dengan 
menghilangkan script validasinya dan saya save. Setelah itu saya jalankan. Isi 
form tadi dengan inputan kosong.

mysql> select*from content;
+----+--------+----------+
| id | nama   | alamat   |
+----+--------+----------+
|  1 | nakula | wherever | <- data pertama
|  2 |        |          | <- data kedua, setelah scriptnya saya modifikasi
+----+--------+----------+
2 rows in set (0.00 sec)
 
Bingo! Saya bisa mem-bypass form ini. Tidak perlu di-interupt oleh validasi 
lagi, saya bisa memasukkan karakter apa saja dan kemudian langsung diproses 
oleh cek.php untuk disimpan di database.

Selain cara ini, saya bisa juga mematikan fasilitas javascript di browser 
sehingga setiap kode javascript tidak akan dieksekusi.
 

---05 //How to Secure?---
Untuk kasus form yang harus mengisi field-field tertentu dengan ketentuan 
tertentu, validasi akan lebih baik diimplementasikan pada 2 file. Untuk file 
index.php gunakan validasi client side (javascript) dan untuk file cek.php 
gunakan validasi server side (*.php).

Ketika seseorang telah memodifikasi form, atau mematikan fasilitas javascript 
di browser, file cek.php akan memeriksa kembali apakah inputan sudah benar atau 
tidak. File cek.php menggunakan server side karena server side tidak akan bisa 
dimodifikasi oleh client.

Server side merupakan code yang akan diterjemahkan oleh server terlebih dahulu 
kemudian hasilnya baru diberikan kepada client sehingga tidak akan terjadi 
manipulasi code.

Dengan demikian isi file cek.php akan seperti ini :

--------------------------------------BoF--------------------------------------
<?php
mysql_connect("localhost","root","");
mysql_select_db("belajar");

$nama=$_POST['nama'];
$alamat=$_POST['alamat'];
 
 if(($nama=="")||($alamat=="")) {
	echo "semua field harus diisi!";
  }
 else if(($nama!="")&&($alamat!="")) {	
 	$insert=mysql_query("insert into content values(NULL,'$nama','$alamat')");
	 if($insert) {
	  echo "berhasil insert data";
 	   }
 	else echo "gagal";
   }

?>
--------------------------------------EoF--------------------------------------



---06 //Closing---
Tulisan ini ditujukan untuk pembelajaran semata sehingga sangat diharapkan 
kritik dan saran dari teman-teman. Semoga tulisan ini memberikan manfaat bagi 
kita semua.

Bagi teman-teman yang belum menulis, tulis apapun yang kalian ketahui untuk 
kalian baca suatu saat.




	REFERENSI :
	#otak yang dianugerahkan oleh Allah SWT
	#imajinasi


*greetz to: 
	[omegastaff a.k.a hemstar7, n4may94n3h, indi60, opt1lc] && [RD]* 
        k-159, lirva32, the_day, y3dips;
	omega members ,  anak-anak echo, temen2 seperjuangan


	kritik && saran kirimkan ke omicron9194[at]omega.or.id

	
	*/0x6f/0x6d/0x69/0x63/0x72/0x6f/0x6e/0x39/0x31/0x39/0x34/* (c)2011