Read-only HTML Form Trick

Ternyata di blog ini belum ada posting tentang trik klasik meng-overwrite input yang read only hmmm. Setelah lama gak kejadian sama saya, akhirnya liat lagi form seperti ini… terus terbesit untuk nulis di blog (lagi rajin-rajin nya nambah postingan, karena menulis itu sehat katanya haha). Trik ini memanfaatkan informasi pada HTML DOM (Document Object Model) untuk mengakses tiap elemen pada halaman HTML. Oke mari kita lihat hasil iseng nya hahah..

Ini adalah form sebelum diisengin haha.. terlihat bagian yang ada isi “Don” dan “Corleone” adalah input yang berjenis read-only.

Form Sebelum Diisengin
Form Sebelum Diisengin

Untuk membuat form seperti diatas, ini source nya, tinggal masukkan kode ini ke dokumen HTML:

<form name="form1" method="post" action="UpdateContacts.php">
Nama Organisasi : 
<input type="text" name="RegistrantOrganizationName" value="La Cosa Nostra" />
Jabatan Pada Organisasi : 
<input type="text" name="RegistrantJobTitle" value="Capone" />
Nama Depan : 
<input type="text" name="RegistrantFirstName" value="Don" disabled />
Nama Belakang : 
<input type="text" name="RegistrantLastName" value="Corleone" disabled />

--dan seterusnya--

</form>

Secara alami, bagian input text “Don” dan “Corleone” yang berwarna lebih gelap itu tidak akan bisa di-edit. Terlihat di source HTML nya, karena input text “Don” dan “Corleone” ada embel-embel “disabled”. Tetapi dengan mengakses form dengan HTML DOM yang sudah di load oleh browser ini, melalui input URL browser kita tinggal menggunakan javascript:void(); untuk mengubah input read only tersebut. Dengan memasukkan ke URL browser seperti ini:

javascript:void(document.form1.RegistrantFirstName.value="Boy");

dan

javascript:void(document.form1.RegistrantLastName.value="Sukro");

Apakah yang terjadi? Walaupun input teksnya read-only, ternyata oleh browser value object DOM “RegistrantFirstName” dan “RegistrantLastName” diubah dengan memanfaatkan script client-side javascript. Ini hasilnya setelah form diutak-atik iseng heheh.

Form Setelah Diisengin
Form Setelah Diisengin

Bagi yang (minimal) sudah pernah membuat script untuk handle method POST dari browser ke server tentu tau nanti ada script khusus yang menghandle seluruh parameter-parameter yang dimasukkan user ini ketika tombol “Submit” di pencet. Dalam contoh ini, action si form adalah menuju ke file “UploadContacts.php”. Mengubah form seperti di atas belum tentu mengubah back-end system karena yang terlihat berubah sebenarnya hanya dari sisi klien (browser saja). Kunci isengnya sekarang ada di file “UpdateContacts.php”. Jika ternyata “Nama Depan” dan “Nama Belakang” memang tidak akan diproses oleh “UpdateContats.php”, usaha kita sia-sia. Huahaha..

Tapi jangan patah semangat.. karena kabar baiknya, ada juga loh web yang semua value di formnya diproses oleh handler formnya. Saya pernah mengalaminya. Bagaimana kalau form seperti dibawah ini yang diisengin? Apakah adminnya bisa login dengan user “admin” lagi? Hehe… Gambar ini contoh semata:

Mengganti Field Read-Only Username
Mengganti Field Read-Only Username

Warning! Isenglah jika hanya jika anda diisengin. Buanglah iseng pada tempatnya. Sedia backup sebelum hujan.

4 thoughts on “Read-only HTML Form Trick

  1. Min, mw tanya.
    Dr postingan di atas, tag ‘form’ nya punya nama “form1”. Kemudian diakses dengan javascript, dengan “….document.form1.RegistrantFirstName. …..”, dimana RegistrantFirstName itu nama dari tag ‘input’.
    Pertanyaan saya, jika HTML tag ‘form’ nya tidak memiliki nama, bisa ga diubah value dari tag ‘input disabled’ nya?

  2. kan itu disabled buat jadiin read only, trus ane coba emang bisa sih.. tapi gara2 itu pas ane mau update datanya jadi ga bsa

    yg ane read only itu primary key dari daata yg mau di update

    ada solusi gk gan?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.