Hacking Theme WordPress (Vigilance)

(English Version Here) Beberapa hari yang lalu, saya lumayan nggak ada kerjaan sekita rjam 3 pagi, dan nyoba2 buat modifikasi theme wordpress. Saya orang yang cukup cepat bosan dengan theme wordpress, dan cukup nggak punya modal untuk apply buat premium account😀. WordPress sendiri nggak memberikan fasilitas untuk mengubah banyak bagian dari theme kepada free user. Ini screenshot asli theme Vigilance yang saya pakai:

Original Theme

Hanya untuk sedikit memperbaiki tampilan aja, saya coba ubah warna link dari defaultnya yang merah menjadi biru tua:

Original Color Scheme

Yup, simple aja, cukup click color picker dan ganti warnanya. Tapi tunggu, tiba2 saya ingat setahun lalu sempat main-main dengan SB GDI dan nulis tentang CSS Injection, saya tiba2 punya ide konyol untuk nge-hack theme WordPress, konyol karena tentu saja harusnya layanan raksasa seperti WordPress nggak akan bisa dibodohi dengan trik kecil seperti ini. Idenya adalah dengan melakukan injeksi kode CSS kedalam input field, persis sama seperti SQL Injection. Misalkan coder webnya menulis seperti ini:


echo “body{background-color: $color;}”;

Dimana variabel Color secara default harusnya adalah warna hexadecimal seperti #FFFFFF. Tapi seandainya tidak ada filterisasi, kita bisa meng-inject variable tersebut dengan tambahan lain. Misalkan variabel warna hexadecimalnya bisa diubah melalui text field seperti di bagian Theme Options pada theme Vigilance, maka kita bisa meng-injectnya dengan code seperti ini:


#FFFFFF;font-size:11px

Pada code diatas, saya meng-inject atribut tambahan yaitu font-size kedalam text-field. Dan ini bekerja karena ternyata tidak ada validasi sama sekali di Theme Options WordPress!. Outputnya adalah seperti ini:


body{background-color: #FFFFFF;font-size:11px;}

Dan bukan hanya itu, saya bahkan bisa memasukan kelas CSS atau meng-overwrite existing class, lihat input saya ini:


#FFFFFF;} .footer, .date {display:none} {

Lihat kan? Dengan mudahnya kita bisa menghilangkan footer dan elemen lainnya pada theme kita dengan cara melakukan overwrite existing class. Pada code diatas saya juga menambahkan curly bracket dibagian akhir untuk menutup pola CSS. Outputnya akan jadi seperti ini:


body{background-color: #FFFFFF;} .footer, .date {display:none} {;}

Tanpa harus mendaftar ke account premium, saya bisa melakukan modifikasi CSS secara total!. Tapi kesenangan belum berakhir, saya juga bisa menyelipkan code HTML dan JS!. Lihat input saya berikut ini:


#FFFFFF;} </style> <b>Hello World!</b><script>alert(“Hello World!”);</script> <style> {

Pada input diatas, saya menutup tag CSS lalu melanjutkannya dengan tag HTML serta JS, lalu membuka kembali tag CSS untuk mencocokannya dengan pola output yang sudah ditulis oleh codernya. Kemungkinan modifikasi yang bisa kita lakukan hampir tak terbatas karena kita bisa menyelipkan HTML, artinya kita juga bisa menyelipkan elemen lain seperti flash, iframe, video, dan lain-lain.

Ini adalah modifikasi theme Vigilance yang saya buat:


Background Color:
 #ffffff;}</style> <link href='//fonts.googleapis.com/css?family=Cantarell:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css' > <style> body {   font-family: 'Cantarell', serif;   text-shadow: 2px 2px 2px #bbb; } </style> <style type='text/css' media='screen'> {

linkColor:
 #3b72b5;} #title span{color:#3b72b5;} #description{float:none;width:100%;text-align:center;margin-top:-70px;margin-bottom:10px;} #nav, .author, .tags, .categories, #footer{display:none} .post-header{border:none;padding:0px}  #content{width: 650px;} #sidebar{width: 250px;} .post .date{font-size:11px;text-align:right;} #sidebar a{font-size:12px;} {

Dan ini adalah screenshot dari modifikasi di Theme Options:

Color Scheme Hacked

Dalam modifikasi ini, saya mengubah default font menjadi Google Web Font, dan bahkan menambahkan font shadow. Saya juga mengubah banyak hal lain seperti title dan description blog saya, menghapus tag, kategori, footer, serta mengganti column width. Hasilnya blog saya menjadi lebih rapi😀

Ini adalah hasil dari input CSS injection yang saya buat:

Vigilance Theme Hacked

Begitulah, saya sengaja membiarkan blog saya seperti itu sekitar 2 hari. Sepertinya nggak ada admin WordPress yang sadar. Entah apa mereka udah tau tentang bug in atau belum. Jadi saya menulis blog post dalam english sebagai proof of concept, juga membuar report ke WordPress tentang masalah ini, saya juga udah mengembalikan konfigurasi awal theme saya menjadi yang default. Mudah-mudahan segera di-fix oleh pihak wordpress. Anda juga bisa mencobanya langsung dengan mengubah theme ke Vigilance dan mengaturnya di Theme Options😀

Pos ini dipublikasikan di post. Tandai permalink.

5 Balasan ke Hacking Theme WordPress (Vigilance)

  1. Ping balik: Hacking Vigilance Wordpress Theme « Dedi Purwanto

  2. Idi suwardi berkata:

    Selamat malam. Wah blognya bagus nih ,Oiy kunjungi blog saya juga ya. Salam kenal ya,😀

  3. Ping balik: Dapat hadiah « Dedi Purwanto

  4. oh… begitu ya… terima kasih atas sharingnya teman…

  5. 「누리」 berkata:

    kalo misalnya pengen ganti title widget dengan gambar itu gimana?

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s