inputpasswordkeamananMenengah3 mnt baca

Input Password Mendalam

Keamanan tampilan password, nilai autocomplete yang tepat, minlength, dan contoh form login dan registrasi.

Masalahnya: Kata Sandi Itu Target

Kata sandi adalah data paling sensitif yang diketik pengguna di web. Ancaman paling dekat bukan hacker di belahan dunia lain, melainkan orang di sebelahmu yang melirik layar: di kafe, di kelas, di angkot. type="password" lahir untuk ancaman sederhana ini: menyamarkan karakter yang diketik menjadi titik-titik.

Tapi samaran tampilan hanyalah lapisan pertama. Modul ini membahas seluruh paket: apa yang dilindungi type="password", apa yang tidak, dan atribut-atribut yang membuat form login dan registrasi benar-benar rapi.

Yang Dilindungi dan Yang Tidak

Yang dilakukan type="password":

Karakter disamarkan di layar (anti intip tetangga).
Browser menawarkan pengelola kata sandi bawaan (simpan dan isi otomatis).
Di beberapa browser, copy-paste dari field password diberi peringatan.

Yang TIDAK dilakukan:

Tidak mengenkripsi apa-apa. Nilai yang diketik tetap teks biasa di memori dan terkirim apa adanya. Enkripsi saat pengiriman adalah tugas HTTPS, bukan HTML.
Tidak mengecek kekuatan kata sandi. "123456" lolos-lolos saja kalau kamu tidak menambahkan aturan.

html

<form action="/masuk" method="post">
  <label>Email:
    <input type="email" name="email" autocomplete="username" required />
  </label>
  <label>Kata sandi:
    <input type="password" name="password"
           autocomplete="current-password" required />
  </label>
  <button type="submit">Masuk</button>
</form>

Perhatikan method="post": kredensial tidak boleh lewat GET. Dan autocomplete di sini bukan hiasan, dibahas di bawah.

autocomplete: Beri Tahu Browser Maksudmu

Atribut autocomplete memberi tahu browser (dan pengelola kata sandi) field ini untuk apa. Dua nilai terpenting untuk password:

autocomplete="current-password": field login, "isi dengan kata sandi yang tersimpan untuk situs ini".
autocomplete="new-password": field pembuatan kata sandi baru (registrasi, ganti password). Browser tidak akan mengisinya dengan kata sandi lama, dan biasanya menawarkan membuatkan kata sandi kuat.

Tanpa nilai yang tepat, pengelola kata sandi sering salah menebak: mengisi form registrasi dengan kata sandi lama, atau tidak menawarkan penyimpanan sama sekali. Satu atribut kecil, pengalaman yang jauh lebih mulus.

minlength dan Contoh Registrasi

Aturan panjang minimal adalah pertahanan paling murah melawan kata sandi lemah:

html

<form action="/daftar" method="post">
  <h2>Buat akun</h2>
  <p>
    <label for="reg-email">Email:</label><br />
    <input type="email" id="reg-email" name="email"
           autocomplete="email" required />
  </p>
  <p>
    <label for="reg-pass">Kata sandi (min. 8 karakter):</label><br />
    <input type="password" id="reg-pass" name="password"
           autocomplete="new-password"
           minlength="8" required />
  </p>
  <p>
    <label for="reg-pass2">Ulangi kata sandi:</label><br />
    <input type="password" id="reg-pass2" name="password_confirm"
           autocomplete="new-password"
           minlength="8" required />
  </p>
  <p><button type="submit">Daftar</button></p>
</form>

minlength="8" menolak "123" langsung di browser sebelum mencapai server. Pengecekan "kedua field sama" tetap butuh JavaScript atau server, HTML tidak menyediakannya. Dan ingat: minlength hanya panjang, bukan kekuatan. Aturan komposisi (huruf besar, angka, simbol) tetap urusan server.

Kesalahan Umum: Salah vs Benar

html

<!-- SALAH: password dikirim lewat GET, muncul di URL dan riwayat -->
<form action="/masuk" method="get">
  <input type="password" name="password" />
</form>

<!-- SALAH: maxlength terlalu pendek memotong kata sandi kuat -->
<input type="password" name="password" maxlength="10" />

<!-- BENAR: POST + autocomplete tepat + minlength -->
<form action="/masuk" method="post">
  <label>Kata sandi:
    <input type="password" name="password"
           autocomplete="current-password"
           minlength="8" required />
  </label>
  <button type="submit">Masuk</button>
</form>

Tiga kesalahan klasik lain: mengisi atribut value dengan kata sandi asli (terlihat di source code halaman!), menonaktifkan paste di field password (menyusahkan pengguna pengelola kata sandi tanpa menambah keamanan), dan memakai placeholder sebagai pengganti label sehingga pengguna lupa field ini untuk apa setelah mulai mengetik.

Catatan teknis: Tombol "tampilkan kata sandi" (ikon mata) tidak disediakan HTML: itu butuh JavaScript untuk mengganti type antara password dan text. Kalau kamu membuatnya, pastikan tombolnya punya label yang jelas dan statusnya terbaca screen reader, karena menyalakan tampilkan berarti menonaktifkan perlindungan anti-intip.

Rangkuman

type="password" melindungi dari pengintip layar, bukan dari penyadap jaringan. Lengkapi dengan method="post", autocomplete yang tepat (current-password vs new-password), dan minlength untuk pertahanan berlapis yang murah.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Form Registrasi Aman

Buat form registrasi: email, kata sandi baru (autocomplete new-password, min. 8 karakter), dan konfirmasi kata sandi, semuanya required dan dikirim via POST. Form registrasi yang benar melindungi pengguna sejak akun dibuat, jadi detail kecil seperti autocomplete sangat berarti.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Daftar</title>
</head>
<body>
  <h1>Buat Akun</h1>
  <form action="/daftar">
    <!-- lengkapi: email + 2x password -->
  </form>
</body>
</html>

Open Sandbox