Mencegah pengguna menempelkan konten ke kolom input

Beberapa situs mengklaim bahwa mengizinkan pengguna menempelkan sandi akan mengurangi keamanan. Namun, penempelan sandi sebenarnya meningkatkan keamanan karena memungkinkan penggunaan pengelola sandi.

Pengelola sandi biasanya membuat sandi yang kuat untuk pengguna, menyimpannya dengan aman, lalu menempelkannya secara otomatis ke kolom sandi setiap kali pengguna perlu login. Pendekatan ini umumnya lebih aman daripada memaksa pengguna untuk mengetik sandi yang cukup singkat untuk diingat.

Dalam kasus umum, pengguna tidak boleh dicegah menempelkan teks ke elemen <input>.

Kegagalan audit Lighthouse ini

Lighthouse menandai kode yang mencegah pengguna menempelkan konten ke kolom input non-hanya baca:

Audit Lighthouse menampilkan halaman mencegah pengguna menempelkan konten ke kolom sandi

Lighthouse mengumpulkan semua elemen <input> non-hanya baca, menempelkan beberapa teks ke setiap elemen, lalu memverifikasi bahwa peristiwa paste tidak dicegah oleh pengendali peristiwa kustom.

Anda juga dapat mencegah penempelan di luar pemroses peristiwa paste. Lighthouse tidak mendeteksi skenario itu.

Cara mengaktifkan penempelan ke kolom sandi

Menemukan kode yang mencegah penempelan

Untuk menemukan dan memeriksa kode yang mencegah penempelan dengan cepat:

  1. Luaskan panel Event Listener Breakpoints.
  2. Luaskan daftar Clipboard.
  3. Centang kotak paste.
  4. Tempelkan beberapa teks ke kolom sandi di halaman Anda.
  5. DevTools akan dijeda di baris pertama kode dalam pemroses peristiwa paste yang relevan.

Hapus kode yang mencegah penempelan

Sumber masalahnya sering kali merupakan panggilan ke preventDefault() dalam pemroses peristiwa paste yang terkait dengan elemen input sandi:

let input = document.querySelector('input');

input.addEventListener('paste', (e) => {
  e.preventDefault(); // This is what prevents pasting.
});

Jika Anda hanya memproses peristiwa menempelkan peristiwa untuk men-preemptnya, hapus seluruh pemroses peristiwa.

Referensi

Kode sumber untuk audit Mencegah pengguna menempelkan konten ke kolom input