HTML hidden: Nilai Kiriman, Perubahan JavaScript, dan Batas Keamanan

input type="hidden" menyertakan nama dan nilai dalam formulir tanpa menampilkan kotak input. name adalah nama field yang dikirim dan value adalah nilainya. Pengguna bisa memeriksa atau mengubahnya, jadi jangan gunakan untuk melindungi kata sandi, izin, harga, atau keputusan sensitif lainnya.

Kapan sebaiknya Anda menggunakan input tersembunyi?

Gunakan ini untuk mengirim ID posting target dengan formulir pengeditan, atau membawa kondisi pencarian ke permintaan berikutnya. Ini mengirimkan nilai yang tidak perlu diketik oleh pengguna, sementara server tetap bertanggung jawab untuk memutuskan apakah nilai tersebut valid.

Menerima ID posting tidak memberikan izin untuk mengedit posting tersebut. Server harus mengidentifikasi pengguna melalui sesi yang terautentikasi dan memeriksa akses ke posting. Jangan percayai detail akun atau informasi IP klien hanya karena klien mengirimkannya dalam bidang tersembunyi.

id dapat menemukan elemen dalam skrip tetapi tidak menggantikan nama yang dikirimkan. Input tersembunyi tanpa nama tidak termasuk sebagai entri nama/nilai dalam pengiriman form biasa. Bahkan dengan required, input tersembunyi tidak berpartisipasi dalam validasi batasan browser.

Periksa bahwa nilai yang tidak terlihat dikirimkan

Simpan kode lengkap ini sebagai hidden.html dan buka di browser. Tidak diperlukan server. Pengiriman menampilkan entri nama/nilai yang dibuat dengan FormData alih-alih melakukan permintaan jaringan.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Memeriksa nilai tersembunyi</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    label { display: block; margin: 12px 0; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Pilih warna</h1>
  <form id="demo">
    <label><input type="checkbox" name="color" value="blue" checked> Biru</label>
    <label><input type="checkbox" name="color" value="red"> Merah</label>
    <input type="hidden" id="size" name="size" value="big">
    <input type="hidden" name="excluded" value="not-sent" disabled>
    <button type="submit">Tampilkan nilai kiriman</button>
    <button type="button" id="change">Ubah nilai tersembunyi ke small</button>
    <button type="button" id="restore">Pulihkan nilai tersembunyi ke big</button>
  </form>
  <p id="status" aria-live="polite">Nilai tersembunyi awal adalah big.</p>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const size = document.querySelector('#size');
    const result = document.querySelector('#result');
    const status = document.querySelector('#status');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    function setSize(value) {
      size.value = value;
      status.textContent = `Nilai tersembunyi saat ini: ${value}. Tampilkan kembali nilai kiriman.`;
    }
    document.querySelector('#change').addEventListener('click', () => setSize('small'));
    document.querySelector('#restore').addEventListener('click', () => setSize('big'));
  </script>
</body>
</html>

1. Kirim awal: color=blue dan size=big muncul. Tidak ada kotak ukuran yang terlihat, tetapi nilainya disertakan. excluded diabaikan karena dinonaktifkan.
2. Pilih Merah dan kirim lagi untuk mendapatkan biru dan merah di bawah nama warna yang diulang. Hapus kedua kotak centang dan hanya ukuran yang tersisa.
3. Tekan tombol yang mengubah nilai tersembunyi menjadi small dan kirim lagi: size=small muncul. Nilai tersembunyi juga dapat diubah melalui JavaScript.
4. Pulihkan big dengan tombol pemulihan lalu kirim lagi. Tombol perubahan digunakan untuk mengamati contoh, bukan fitur yang diperlukan setiap layanan nyata.

Kirim formulir ke server nyata

Untuk layanan nyata, atur action ke rute pemrosesan yang ada dan pilih metode yang didukung seperti method="post". Penangan submit pada contoh memblokir permintaan; hapus atau gantikan dengan kode permintaan server untuk mengirim data. Fitur pemrosesan formulir server menerima field tersembunyi seperti field teks biasa.

Saat menerima beberapa kotak centang dengan satu nama, periksa aturan array dan nilai ganda pada kerangka server. Beberapa parser hanya membaca nilai terakhir yang diulang. Output JavaScript mempertahankan nama yang diulang sehingga Anda bisa mengamati perbedaannya.

Jangan bingung antara menyembunyikan dengan keamanan

Nilai yang disembunyikan terlihat di sumber HTML, alat pengembang, dan permintaan jaringan. HTTPS tidak menyembunyikan nilai dari pengguna yang mengirimkannya. Saat menerima ID produk, cari produk dan harga di server dan validasikan nilai ukuran yang diperbolehkan terhadap informasi server yang tepercaya.

Sebuah field tersembunyi dapat membawa token CSRF (Cross-Site Request Forgery). Perlindungan berasal dari penerbitan dan validasi token yang tepat di sisi server. Menempatkan string tetap sembarangan di input tersembunyi tidak secara otomatis mencegah permintaan palsu.

Referensi input tersembunyi MDN menjelaskan perilakunya dan pengecualian dari validasi.