Bagaimana Anda menonaktifkan Pelengkapan otomatis peramban pada isian formulir web / tag input?

Bagaimana Anda menonaktifkan autocompletebrowser utama untuk spesifik input(atau form field)?

Firefox 30 mengabaikan autocomplete="off"kata sandi, memilih untuk meminta pengguna, bukan apakah kata sandi harus disimpan pada klien. Perhatikan komentar berikut dari 5 Mei 2014:

• Pengelola kata sandi selalu meminta jika ingin menyimpan kata sandi. Kata sandi tidak disimpan tanpa izin dari pengguna.
• Kami adalah peramban ketiga yang menerapkan perubahan ini, setelah IE dan Chrome.

Menurut dokumentasi Jaringan Pengembang Mozilla , atribut elemen formulir Boolean autocompletemencegah data formulir dari di-cache di browser yang lebih lama.

<input type="text" name="foo" autocomplete="off" />

Selain itu autocomplete=off, Anda juga bisa meminta nama bidang formulir Anda secara acak oleh kode yang menghasilkan halaman, mungkin dengan menambahkan beberapa string khusus sesi ke akhir nama.

Ketika formulir dikirimkan, Anda dapat menghapus bagian itu sebelum memprosesnya di sisi server. Ini akan mencegah browser web menemukan konteks untuk bidang Anda dan juga mungkin membantu mencegah serangan XSRF karena penyerang tidak akan bisa menebak nama bidang untuk pengiriman formulir.

Sebagian besar peramban dan pengelola kata sandi utama (dengan benar, IMHO) sekarang diabaikan autocomplete=off .

Mengapa? Banyak bank dan situs web "keamanan tinggi" lainnya ditambahkanautocomplete=off ke halaman login mereka "untuk tujuan keamanan" tetapi ini sebenarnya mengurangi keamanan karena membuat orang mengubah kata sandi di situs dengan keamanan tinggi ini menjadi mudah diingat (dan karenanya retak) karena pelengkapan otomatis rusak.

Dahulu kebanyakan pengelola kata sandi mulai mengabaikan autocomplete=off , dan sekarang peramban mulai melakukan hal yang sama hanya untuk input nama pengguna / kata sandi.

Sayangnya, bug dalam implementasi pelengkapan otomatis memasukkan info nama pengguna dan / atau kata sandi ke dalam bidang formulir yang tidak sesuai, menyebabkan kesalahan validasi formulir, atau lebih buruk lagi, secara tidak sengaja memasukkan nama pengguna ke dalam bidang yang sengaja dikosongkan oleh pengguna.

Apa yang harus dilakukan pengembang web?

• Jika Anda dapat menyimpan sendiri semua bidang kata sandi pada suatu halaman, itu adalah awal yang bagus karena tampaknya keberadaan bidang kata sandi adalah pemicu utama bagi pengguna / pengguna autocomplete untuk memulai. Jika tidak, baca tips di bawah ini.
• Safari memperhatikan bahwa ada 2 bidang kata sandi dan menonaktifkan pelengkapan otomatis dalam hal ini, dengan asumsi itu harus berupa perubahan kata sandi, bukan formulir login. Jadi pastikan untuk menggunakan 2 bidang kata sandi (baru dan konfirmasikan baru) untuk segala bentuk yang Anda izinkan

• Chrome 34, sayangnya, akan mencoba mengisi ulang isian dengan pengguna / pass setiap kali melihat bidang kata sandi. Ini adalah bug yang cukup buruk yang diharapkan, mereka akan mengubah perilaku Safari. Namun, menambahkan ini ke bagian atas formulir Anda tampaknya menonaktifkan autofill kata sandi:

  <input type="text" style="display:none">
  <input type="password" style="display:none">

Saya belum menyelidiki IE atau Firefox secara menyeluruh tetapi akan dengan senang hati memperbarui jawabannya jika orang lain memiliki info di komentar.

Terkadang bahkan pelengkapan otomatis = mati tidak akan mencegah untuk mengisi kredensial ke bidang yang salah, tetapi bukan bidang pengguna atau nama panggilan.

Penanganan masalah ini merupakan tambahan untuk posting apinstein tentang perilaku browser.

perbaiki IsiOtomatis browser hanya-baca dan atur fokus yang dapat ditulis (klik dan tab)

 <input type="password" readonly  
     onfocus="this.removeAttribute('readonly');"/>

Pembaruan: Mobile Safari menetapkan kursor di lapangan, tetapi tidak menampilkan keyboard virtual. Perbaikan baru berfungsi seperti sebelumnya tetapi menangani keyboard virtual:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

Demo Langsung https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

Karena Browser otomatis mengisi kredensial ke bidang teks yang salah !?

Saya perhatikan perilaku aneh ini di Chrome dan Safari, ketika ada bidang kata sandi dalam bentuk yang sama. Saya kira, browser mencari bidang kata sandi untuk memasukkan kredensial Anda yang disimpan. Kemudian secara otomatis mengisi (hanya menebak karena pengamatan) bidang input-teks terdekat, yang muncul sebelum bidang kata sandi di DOM. Karena browser adalah contoh terakhir dan Anda tidak dapat mengontrolnya,

Perbaikan baca-baca di atas ini berhasil untuk saya.

<form name="form1" id="form1" method="post" 
      autocomplete="off" action="http://www.example.com/form.cgi">

Ini akan bekerja di Internet Explorer dan Mozilla FireFox, downside adalah bahwa itu bukan standar XHTML.

Solusi untuk Chrome adalah menambahkan autocomplete="new-password"kata sandi tipe input. Silakan periksa Contoh di bawah ini.

Contoh:

<form name="myForm"" method="post">
   <input name="user" type="text" />
   <input name="pass" type="password" autocomplete="new-password" />
   <input type="submit">
</form>

Chrome selalu melengkapi data secara otomatis jika menemukan kotak kata sandi jenis , cukup untuk menunjukkan kotak itu autocomplete = "new-password".

Ini bekerja dengan baik untuk saya.

Catatan: pastikan dengan F12perubahan yang Anda lakukan, berkali-kali browser menyimpan halaman dalam cache, ini memberi saya kesan buruk bahwa itu tidak berfungsi, tetapi browser sebenarnya tidak membawa perubahan.

Seperti yang orang lain katakan, jawabannya adalah autocomplete="off"

Namun, saya pikir itu layak menyatakan mengapa itu ide yang baik untuk menggunakan ini dalam kasus-kasus tertentu karena beberapa jawaban untuk ini dan pertanyaan duplikat menyarankan lebih baik untuk tidak mematikannya.

Menghentikan browser yang menyimpan nomor kartu kredit tidak boleh diserahkan kepada pengguna. Terlalu banyak pengguna bahkan tidak menyadari itu masalah.

Sangat penting untuk mematikannya di bidang kode keamanan kartu kredit. Seperti yang dinyatakan halaman ini :

"Jangan pernah menyimpan kode keamanan ... nilainya tergantung pada anggapan bahwa satu-satunya cara untuk memasoknya adalah dengan membacanya dari kartu kredit fisik, membuktikan bahwa orang yang memasoknya benar-benar memegang kartu itu."

Masalahnya adalah, jika itu adalah komputer umum (warnet, perpustakaan, dll.) Maka mudah bagi pengguna lain untuk mencuri detail kartu Anda, dan bahkan pada komputer Anda sendiri situs web jahat dapat mencuri data yang dilengkapi secara otomatis .

Saya telah memecahkan pertarungan tanpa akhir dengan Google Chrome dengan menggunakan karakter acak. Saat Anda selalu membuat pelengkapan otomatis dengan string acak, itu tidak akan pernah mengingat apa pun.

<input name="name" type="text" autocomplete="rutjfkde">

Semoga itu akan membantu orang lain.

Saya harus memohon berbeda dengan jawaban yang mengatakan untuk menghindari penonaktifan pelengkapan otomatis.

Hal pertama yang muncul adalah pengisian-otomatis yang tidak dinonaktifkan secara eksplisit pada bidang formulir masuk adalah kegagalan PCI-DSS. Selain itu, jika mesin lokal pengguna dikompromikan, maka data autocomplete apa pun dapat diperoleh secara sepele oleh penyerang karena disimpan di tempat yang jelas.

Tentu saja ada argumen untuk kegunaan, namun ada keseimbangan yang sangat baik ketika datang ke bidang formulir mana yang harus dinonaktifkan autocomplete dan mana yang tidak.

Tiga opsi: Pertama:

<input type='text' autocomplete='off' />

Kedua:

<form action='' autocomplete='off'>

Ketiga (kode javascript):

$('input').attr('autocomplete', 'off');

Pada yang terkait atau sebenarnya, pada catatan yang sepenuhnya berlawanan -

"Jika Anda adalah pengguna formulir yang disebutkan di atas dan ingin mengaktifkan kembali fungsi autocomplete, gunakan bookmarklet 'ingat kata sandi' dari halaman bookmarklet ini . Ini menghapus semua autocomplete="off"atribut dari semua formulir di halaman. Terus berjuang dengan baik! "

Kami benar-benar menggunakan ide sasb untuk satu situs. Itu adalah aplikasi web perangkat lunak medis untuk menjalankan kantor dokter. Namun, banyak klien kami adalah ahli bedah yang menggunakan banyak stasiun kerja yang berbeda, termasuk terminal semi-publik. Jadi, mereka ingin memastikan bahwa seorang dokter yang tidak memahami implikasi kata sandi yang disimpan secara otomatis atau tidak memperhatikan tidak dapat secara tidak sengaja membiarkan info masuk mereka mudah diakses. Tentu saja, ini sebelum ide penjelajahan pribadi yang mulai ditampilkan di IE8, FF3.1, dll. Meski begitu, banyak dokter dipaksa untuk menggunakan browser sekolah lama di rumah sakit dengan IT yang tidak akan berubah.

Jadi, kami meminta halaman login menghasilkan nama bidang acak yang hanya akan berfungsi untuk posting itu. Ya, itu kurang nyaman, tetapi itu hanya memukul pengguna di atas kepala tentang tidak menyimpan informasi login di terminal publik.

Tidak ada solusi yang berfungsi untuk saya dalam percakapan ini.

Saya akhirnya menemukan solusi HTML murni yang tidak memerlukan Javascript , bekerja di browser modern (kecuali IE; harus ada setidaknya 1 tangkapan, kan?), Dan tidak mengharuskan Anda untuk menonaktifkan pelengkapan otomatis untuk seluruh formulir.

Cukup matikan pelengkapan otomatis pada formdan kemudian nyalakan untuk apa pun yang inputAnda inginkan berfungsi dalam formulir. Sebagai contoh:

<form autocomplete="off">
    <!-- these inputs will not allow autocomplete and chrome 
         won't highlight them yellow! -->
    <input name="username"  />
    <input name="password" type="password" />
    <!-- this field will allow autocomplete to work even 
         though we've disabled it on the form -->
    <input name="another_field" autocomplete="on" />
</form>

Baru diatur autocomplete="off". Ada alasan yang sangat bagus untuk melakukan ini: Anda ingin memberikan fungsionalitas autocomplete sendiri!

Saya telah mencoba solusi tanpa akhir, dan kemudian saya menemukan ini:

Alih-alih autocomplete="off"hanya menggunakan sajaautocomplete="false"

Sesederhana itu, dan itu berfungsi seperti pesona di Google Chrome juga!

Ini bekerja untuk saya.

<input name="pass" type="password" autocomplete="new-password" />

Kami juga dapat menggunakan strategi ini di kontrol lain seperti teks, pilih dll

Saya pikir autocomplete=offdidukung dalam HTML 5.

Tanyakan kepada diri Anda mengapa Anda ingin melakukan ini - mungkin masuk akal dalam beberapa situasi tetapi jangan lakukan hanya demi melakukannya.

Ini kurang nyaman bagi pengguna dan bahkan bukan masalah keamanan di OS X (disebutkan oleh Soren di bawah). Jika Anda khawatir orang mencuri kata sandi mereka dari jarak jauh - pencatat keystroke masih bisa melakukannya meskipun aplikasi Anda menggunakan autcomplete=off.

Sebagai pengguna yang memilih untuk memiliki browser mengingat (sebagian besar) informasi saya, saya akan merasa menjengkelkan jika situs Anda tidak mengingat milik saya.

Sebagai tambahannya

autocomplete="off"

Menggunakan

readonly onfocus="this.removeAttribute('readonly');"

untuk input yang Anda tidak ingin mereka untuk mengingat data formulir ( username, password, dll) seperti yang ditunjukkan di bawah ini:

<input type="text" name="UserName" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

<input type="password" name="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" >

Semoga ini membantu.

Solusi terbaik:

Cegah nama pengguna (atau email) dan kata sandi yang dilengkapi secara otomatis:

<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">

Mencegah pelengkapan otomatis bidang:

<input type="text" name="field" autocomplete="nope">

Penjelasan: autocompleteterus bekerja <input>, autocomplete="off"tidak bekerja, tetapi Anda dapat mengubah offke string acak, seperti nope.

Bekerja di:

• Chrome: 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63 dan 64

• Firefox: 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57 dan 58

Sedikit terlambat ke permainan ... tapi saya hanya mengalami masalah ini dan mencoba beberapa kegagalan, tetapi ini bekerja untuk saya ditemukan di MDN

Dalam beberapa kasus, browser akan terus menyarankan nilai pelengkapan otomatis meskipun atribut pelengkapan otomatis disetel ke mati. Perilaku tak terduga ini bisa sangat membingungkan bagi pengembang. Trik untuk benar-benar memaksa penyelesaian tidak adalah dengan menetapkan string acak ke atribut seperti:

autocomplete="nope"

Menambahkan

autocomplete="off"

ke tag formulir akan menonaktifkan pelengkapan otomatis peramban (yang sebelumnya diketik dalam bidang itu) dari semua inputbidang dalam formulir itu.

Diuji pada:

• Firefox 3.5, 4 BETA
• Internet Explorer 8
• Chrome

Menambahkan autocomplete="off"tidak akan memotongnya.

Ubah atribut tipe input menjadi type="search".
Google tidak menerapkan pengisian otomatis pada input dengan jenis pencarian.

Gunakan nama dan id non-standar untuk isian, jadi alih-alih "name" have "name_". Browser kemudian tidak akan melihatnya sebagai bidang nama. Bagian terbaik tentang itu adalah bahwa Anda dapat melakukan ini pada beberapa bidang tetapi tidak semua dan itu akan melengkapi secara otomatis beberapa tetapi tidak semua bidang.

Untuk menghindari XHTML yang tidak valid, Anda dapat mengatur atribut ini menggunakan javascript. Contoh menggunakan jQuery:

<input type="text" class="noAutoComplete" ... />

$(function() {
    $('.noAutoComplete').attr('autocomplete', 'off');
});

Masalahnya adalah bahwa pengguna tanpa javascript akan mendapatkan fungsionalitas autocomplete.

coba ini juga jika autocomplete="off"tidak berfungsi:

autocorrect="off" autocapitalize="off" autocomplete="off"

Saya tidak percaya ini masih menjadi masalah begitu lama setelah dilaporkan. Solusi di atas tidak bekerja untuk saya, karena safari tampaknya tahu kapan elemen tidak ditampilkan atau di luar layar, namun yang berikut ini berhasil bagi saya:

<div style="height:0px; overflow:hidden; ">
  Username <input type="text" name="fake_safari_username" >
  Password <input type="password" name="fake_safari_password">
</div>

Semoga bermanfaat bagi seseorang!

Jadi ini dia:

function turnOnPasswordStyle() {
  $('#inputpassword').attr('type', "password");
}

<input oninput="turnOnPasswordStyle()" id="inputpassword" type="text">

Ini adalah masalah keamanan yang diabaikan browser sekarang. Browser mengidentifikasi dan menyimpan konten menggunakan nama input, bahkan jika pengembang menganggap informasi itu sensitif dan tidak boleh disimpan. Membuat nama input berbeda antara 2 permintaan akan menyelesaikan masalah (tetapi masih akan disimpan dalam cache browser dan juga akan meningkatkan cache browser). Meminta pengguna untuk mengaktifkan atau menonaktifkan opsi dalam pengaturan browsernya bukanlah solusi yang baik. Masalah ini dapat diperbaiki di backend.

Inilah perbaikan saya. Suatu pendekatan yang telah saya terapkan dalam kerangka kerja saya. Semua elemen pelengkapan otomatis dihasilkan dengan input tersembunyi seperti ini:

<? $r = rmd5(rand().mocrotime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<? echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<? echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

Server kemudian memproses variabel pos seperti ini:

foreach ($_POST as $key => $val)
{
    if(preg_match('#^__autocomplete_fix_#', $key) === 1){
        $n = substr($key, 19);
        if(isset($_POST[$n]))$_POST[$val] = $_POST[$n];
    }
}

Nilai dapat diakses seperti biasa

var_dump($_POST['username']);

Dan browser tidak akan dapat menyarankan informasi dari permintaan sebelumnya atau dari pengguna sebelumnya.

Semua berfungsi seperti pesona, meskipun peramban diperbarui, ingin mengabaikan pelengkapan otomatis atau tidak. Itu adalah cara terbaik untuk memperbaiki masalah bagi saya.

Tidak ada peretasan yang disebutkan di sini bekerja untuk saya di Chrome. Ada diskusi tentang masalah ini di sini: https://code.google.com/p/chromium/issues/detail?id=468153#c41

Menambahkan ini di dalam sebuah <form>karya (setidaknya untuk saat ini):

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Anda dapat menggunakan input.

Sebagai contoh;

<input type=text name="test" autocomplete="off" />