Tujuan asli <input type = “hidden”>? [Tutup]

101

Saya ingin tahu tentang tujuan asli dari <input type="hidden">tag tersebut.

Saat ini sering digunakan bersama dengan JavaScript untuk menyimpan variabel di dalamnya yang dikirim ke server dan hal-hal seperti itu.

Oleh karena itu, <input type="hidden">ada sebelum JavaScript, jadi apa tujuan aslinya? Saya hanya bisa membayangkan mengirim nilai dari server ke klien yang (tidak berubah) dikirim kembali untuk mempertahankan semacam status. Atau apakah saya mendapatkan sesuatu yang salah dalam sejarahnya dan <input type="hidden">seharusnya selalu digunakan bersama dengan JavaScript?

Jika memungkinkan, berikan referensi juga dalam jawaban Anda.

Uooo
sumber
3
Di luar topik untuk SO meskipun mempertahankan status juga akan menjadi pilihan saya
Phil
Setuju, untuk memungkinkan pelacakan status pra-penduduk (misalnya dari PK Pengganti selama pengeditan) yang akan secara otomatis dimasukkan dalam formulir yang dikirimkan POST / GET
StuartLC
1
Ada sebelum JavaScript mendukung alasan untuk memilikinya lebih banyak lagi (yaitu, tidak mengurangi alasan apa pun seperti yang tampaknya disiratkan oleh pertanyaan ini) - tidak ada JavaScript untuk "menyimpan variabel" atau memanggil AJAX atau stub di masukan "tidak tersembunyi" bidang sebelum formulir dikirimkan .. juga tidak ada CSS untuk peretasan jahat lainnya seperti membuat input teks biasa disembunyikan.
pengguna2246674

Jawaban:

108

Saya hanya bisa membayangkan mengirim nilai dari server ke klien yang (tidak berubah) dikirim kembali untuk mempertahankan semacam status.

Tepat. Faktanya, ini masih digunakan untuk tujuan ini hari ini karena HTTP seperti yang kita kenal sekarang, setidaknya secara fundamental, adalah protokol tanpa negara.

Kasus penggunaan ini sebenarnya pertama kali dijelaskan dalam HTML 3.2 (Saya terkejut HTML 2.0 tidak menyertakan deskripsi seperti itu):

type=hidden
Bidang ini tidak boleh diberikan dan menyediakan sarana bagi server untuk menyimpan informasi negara dengan formulir. Ini akan dikirimkan kembali ke server saat formulir dikirimkan, menggunakan pasangan nama / nilai yang ditentukan oleh atribut terkait. Ini adalah solusi untuk keadaan tanpa kewarganegaraan HTTP. Pendekatan lain adalah dengan menggunakan HTTP "Cookies".

<input type=hidden name=customerid value="c2415-345-8563">

Meskipun perlu disebutkan bahwa HTML 3.2 menjadi Rekomendasi W3C hanya setelah rilis awal JavaScript, dapat diasumsikan bahwa bidang tersembunyi hampir selalu memiliki tujuan yang sama.

BoltClock
sumber
Satu hal yang saya tidak suka tentang menggunakan input 'tersembunyi' untuk menyimpan data adalah bahwa data dapat dimanipulasi oleh pengguna, memang, mungkin hanya seseorang yang memahami HTML dan cara memodifikasinya melalui alat pengembang, tetapi dapat memiliki implikasi buruk pada database jika modifikasi dari nilai tersebut merusak data lain (misalnya, jika Anda menyimpan referensi kunci utama dan diubah secara manual oleh pengguna).
Brett84c
3
@ Brett84c: Itulah mengapa Anda harus selalu memvalidasi masukan Anda dan tidak pernah mempercayai klien;)
BoltClock
Tepatnya, saya baru saja membuangnya agar pengembang baru menyadari kemungkinan bahaya yang terlibat.
Brett84c
2
Tidak ada tentang bahaya tersebut yang spesifik untuk input 'tersembunyi' - apapun yang dikirim ke klien dapat dimanipulasi sebelum kembali. Cookie atau alternatif berbasis JS sama saja.
FLHerne
10

Saya akan memberikan Contoh Dunia Nyata Sisi Server sederhana di sini, katakanlah jika catatan dilingkarkan dan setiap catatan memiliki formulir dengan tombol hapus dan Anda perlu menghapus catatan tertentu, jadi inilah hiddenbidang yang sedang beraksi, kalau tidak Anda menang ' t mendapatkan referensi catatan yang akan dihapus dalam kasus ini, itu akanid

Sebagai contoh

<?php
    if(isset($_POST['delete_action'])) {
        mysqli_query($connection, "DELETE FROM table_name 
                                   WHERE record_id = ".$_POST['row_to_be_deleted']);
                                   //Here is where hidden field value is used
    }

    while(condition) {
?>
    <span><?php echo 'Looped Record Name'; ?>
    <form method="post">
        <input type="hidden" name="row_to_be_deleted" value="<?php echo $record_id; ?>" />
        <input type="submit" name="delete_action" />
    </form>
<?php
    }
?>
Tuan Alien
sumber
1
Contoh yang bagus, kecuali kode sebenarnya harus menggunakan pernyataan yang disiapkan atau cara lain untuk menangani input SQL dengan aman.
Matthew Flaschen
8

Singkatnya, tujuan awalnya adalah membuat field yang akan diserahkan dengan form submit. Terkadang, ada kebutuhan untuk menyimpan beberapa informasi di bidang tersembunyi (misalnya, id pengguna) dan mengirimkannya dengan pengiriman formulir.

Dari HTML 22 September 1995 spesifikasi

Elemen INPUT dengan `TYPE = HIDDEN 'mewakili bidang tersembunyi. Pengguna tidak berinteraksi dengan bidang ini; sebagai gantinya, atribut VALUE menentukan nilai bidang. Atribut NAME dan VALUE diperlukan.

Chuck Norris
sumber
1
Bisakah Anda menjelaskan jawaban itu dan / atau memberikan beberapa referensi untuk perilaku pengiriman bidang tersembunyi ini setelah pengiriman formulir?
GitaarLAB
@GitaarLAB, saya kasih contoh (user Id) ... Pokoknya ada banyak contoh di web. Misalnya echoecho.com/htmlforms07.htm
Chuck Norris
1
Maaf, bagi saya baris tersebut: original purpose was to make a field which will be submitted *after* form's submitambigu. Dapat diartikan sebagai: 'setelah form selesai diposting datanya, maka hidden field akan diserahkan (ke suatu tempat misterius)'. Makanya, komentar saya di atas.
GitaarLAB
1
Saya mengerti :) Terima kasih atas komentar Anda, saya telah mengedit jawaban saya. Itu hanya salah eja (belum mencapai level guru dalam bahasa Inggris: D).
Chuck Norris
6

Nilai elemen formulir termasuk type = 'hidden' dikirimkan ke server saat formulir diposting. input type = "hidden" nilai tidak terlihat di halaman. Mempertahankan ID Pengguna di bidang tersembunyi, misalnya, adalah salah satu dari banyak kegunaan.

SO menggunakan bidang tersembunyi untuk klik upvote.

<input value="16293741" name="postId" type="hidden">

Menggunakan nilai ini, skrip sisi server dapat menyimpan suara positif.

cPu1
sumber
Haha, tangkapan bagus! Dan ketika saya menambahkan "x" di akhir nilai, kesalahan terjadi saat upvoting: D
Uooo
@Uooo Dan Anda dapat memperlihatkannya atau langsung mengubah nilainya. Anda dapat mengubah nilainya menjadi jawaban yang berbeda. Anda kemudian dapat mengklik tombol upvote dan itu dicatat sebagai upvote untuk jawaban yang berbeda. ;)
Geoffrey Hale
5

pada dasarnya bidang tersembunyi akan lebih berguna dan keuntungan digunakan dengan formulir multi langkah. kita dapat menggunakan bidang tersembunyi untuk meneruskan informasi satu langkah ke langkah berikutnya menggunakan tersembunyi dan tetap meneruskannya hingga langkah akhir.

  1. Token CSRF.

Pemalsuan permintaan lintas situs adalah kerentanan situs yang sangat umum. Membutuhkan token rahasia, khusus pengguna dalam semua pengiriman formulir akan mencegah serangan CSRF karena situs penyerang tidak dapat menebak token yang tepat dan pengiriman formulir apa pun yang mereka lakukan atas nama pengguna akan selalu gagal.

  1. Simpan status dalam formulir multi-halaman.

Jika Anda perlu menyimpan langkah apa dalam formulir multi-halaman yang sedang digunakan pengguna, gunakan kolom input tersembunyi. Pengguna tidak perlu melihat informasi ini, jadi sembunyikan di kolom input tersembunyi.

Aturan umum: Gunakan bidang untuk menyimpan apa pun yang tidak perlu dilihat pengguna, tetapi Anda ingin mengirim ke server saat pengiriman formulir.

Ganesh Bora
sumber