Input type = password, jangan biarkan browser mengingat password


101

Saya ingat pernah melihat cara untuk melakukannya <input type="password" />sehingga browser tidak akan meminta pengguna untuk menyimpan sandi. Tapi saya menggambar kosong. Apakah ada atribut HTML atau trik JavaScript yang akan melakukan ini?


Jawaban:


123

Coba gunakan autocomplete="off". Tidak yakin apakah semua browser mendukungnya. Dokumentasi MSDN di sini .

EDIT : Catatan: sebagian besar browser telah menjatuhkan dukungan untuk atribut ini. Lihat Apakah autocomplete = "off" kompatibel dengan semua browser modern?

Ini bisa dibilang sesuatu yang harus diserahkan kepada pengguna daripada perancang situs web.


2
Anda juga dapat mengirimkan halaman dengan HTTPS dan melalui header HTTP atau tag META mencegah caching. Dengan begitu, kata sandi juga tidak akan disimpan (setidaknya di Internet Explorer).
doekman

Berkenaan dengan validasi, HTML5 menambahkan atribut pelengkapan otomatis ke spesifikasi sehingga baik-baik saja sekarang
VictorySaber

9
Catatan untuk pembaca di masa mendatang: Semua browser utama akan mengabaikan atribut ini. (lihat stackoverflow.com/a/21348793/37706 )
rdans

@RyanDansie terima kasih telah menunjukkan hal itu. Saya telah memperbarui jawabannya. Jawaban lama adalah ... tua.
tvanfosson

8
"Ini bisa dibilang sesuatu yang harus diserahkan kepada pengguna daripada desainer situs web." ada alasan teknis dan non teknis untuk melakukan ini. Kata sandi sekali pakai tidak boleh diingat, misalnya. Situs bank dengan "masukkan digit pertama PIN Anda" adalah situs lain. Jangan lupa bahwa analis bisnis mungkin memutuskan dia menginginkan bidang kata sandi dan menghapus pilihan dari pengembang.
Sprague

61

<input type="password" autocomplete="off" />

Saya hanya ingin menambahkan bahwa sebagai pengguna menurut saya ini sangat mengganggu dan merepotkan untuk diatasi. Saya sangat menyarankan agar tidak menggunakan ini karena kemungkinan besar akan memperburuk pengguna Anda.

Kata sandi sudah tidak disimpan di MRU, dan mesin publik yang dikonfigurasi dengan benar bahkan tidak akan menyimpan nama pengguna.


23
+1 untuk "jangan ganggu pengguna Anda". Itulah tepatnya yang dilakukan fitur semacam ini. Sama seperti situs yang memaksakan caching sehingga tombol kembali menghapus formulir. SANGAT menjengkelkan.
cletus

6
+1 Saya sangat setuju. Ini untuk halaman edit profil pelanggan administrator di mana Anda hanya memasukkan kata sandi jika Anda ingin mengubahnya. Dengan demikian, administrator tidak mengubah kata sandi setiap kali mereka mengedit informasi pelanggan.
DavGarcia

14
Ini sangat berguna untuk bidang nomor kartu kredit. Formulir PayPal disimpan di setiap browser, dan siapa pun yang menggunakan komputer Anda dapat memasukkan kembali semua data, jadi Anda harus membuka dan menghapus semua bidang yang diingat secara manual.
Egor Pavlikhin

31
Pada formulir di mana pengguna dapat mengatur kata sandi yang tidak ada hubungannya dengan login mereka, mengaktifkan pelengkapan otomatis sebenarnya adalah opsi yang lebih mengganggu - browser mungkin menawarkan untuk menyimpan kata sandi yang sebenarnya tidak dapat digunakan untuk apa pun. Selain itu, jika keamanan adalah masalah sensitif, saya tidak akan berasumsi bahwa semua mesin publik telah dikonfigurasi dengan benar.
jrb

3
Saya menggunakan ini untuk kata sandi sekali pakai. Seperti yang dikatakan jrb, akan sangat mengganggu jika browser menyimpannya.
Danation

12

Saya memecahkan dengan cara lain. Anda bisa mencobanya.

<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){                                               
    setTimeout(function(){
        $("input#passfld").attr("type","password");
    },10);
});


// or in pure javascript
 window.onload=function(){                                              
    setTimeout(function(){  
        document.getElementById('passfld').type = 'password';
    },10);
  }   
</script>

#cara lain

 <script type="text/javascript">    
 function setAutoCompleteOFF(tm){
    if(typeof tm =="undefined"){tm=10;}
    try{
    var inputs=$(".auto-complete-off,input[autocomplete=off]"); 
    setTimeout(function(){
        inputs.each(function(){     
            var old_value=$(this).attr("value");            
            var thisobj=$(this);            
            setTimeout(function(){  
                thisobj.removeClass("auto-complete-off").addClass("auto-complete-off-processed");
                thisobj.val(old_value);
            },tm);
         });
     },tm); 
    }catch(e){}
  }
 $(function(){                                              
        setAutoCompleteOFF();
    });
</script>

// Anda perlu menambahkan atribut autocomplete = "off" atau Anda dapat menambahkan kelas .auto-complete-off ke dalam kotak input dan nikmati

Contoh:

  <input id="passfld" type="password" autocomplete="off" />
    OR
  <input id="passfld" class="auto-complete-off" type="password"  />

4
Ini mencegah browser menyimpan kata sandi alih-alih mencegah pelengkapan otomatis yang merupakan solusi yang lebih baik dalam skenario saya.
Pau Fracés

Terima kasih, bekerja untuk saya di chrome terbaru. Harap Catatan: Digunakan pada sistem internal yang hanya mengizinkan Chrome, lakukan lebih banyak pengujian jika menggunakan di situs produksi.
Izion

@AntoVinish, saya harap solusi terakhir saya berfungsi di firefox 40.
Sarwar Hasan

7

Saya mencoba yang berikut ini dan tampaknya berfungsi untuk semua browser:

<input id="passfld" type="text" autocomplete="off" />

<script type="text/javascript">
    $(function(){  
        var passElem = $("input#passfld");
        passElem.focus(function() { 
            passElem.prop("type", "password");                                             
        });
    });
</script>

Cara ini jauh lebih aman daripada menggunakan teknik batas waktu, karena ini menjamin bahwa kolom input akan menghasilkan kata sandi saat pengguna memfokuskannya.


5

Mengenai masalah keamanan, berikut adalah apa yang akan dikatakan oleh konsultan keamanan kepada Anda tentang keseluruhan masalah lapangan (ini dari audit keamanan independen yang sebenarnya):

Pelengkapan Otomatis HTML Diaktifkan - Bidang sandi di formulir HTML telah mengaktifkan pelengkapan otomatis. Kebanyakan browser memiliki fasilitas untuk mengingat kredensial pengguna yang dimasukkan ke dalam formulir HTML.

Resiko Relatif: Rendah

Sistem / Perangkat yang Terkena Dampak: o https: // * ** * *** /

Saya juga setuju ini harus mencakup bidang apa pun yang benar-benar berisi data pribadi. Saya merasa tidak apa-apa untuk memaksa seseorang untuk selalu mengetik informasi kartu kredit, kode CVC, sandi, nama pengguna, dll. Kapan pun situs itu akan mengakses apa pun yang harus dijaga keamanannya [secara universal atau dengan persyaratan kepatuhan hukum]. Misalnya: formulir pembelian, situs bank / kredit, situs pajak, data medis, federal, nuklir, dll. - bukan Situs seperti Stack Overflow atau Facebook.

Jenis situs lain - misalnya TimeStar Online untuk jam masuk dan keluar dari pekerjaan - itu bodoh, karena saya selalu menggunakan PC / akun yang sama di tempat kerja, sehingga saya tidak dapat menyimpan kredensial di situs itu - anehnya saya bisa di Android saya tapi tidak di iPad. Bahkan PC bersama ini tidak akan terlalu buruk karena mencatat masuk / keluar untuk orang lain benar-benar tidak melakukan apa-apa selain mengganggu supervisor Anda. (Mereka harus masuk dan menghapus pukulan yang salah - pilih saja untuk tidak menyimpan di PC umum).


5
Hanya menambahkan komentar di sini karena alasan Anda tidak ingin menyimpan kata sandi. Saya mengelola situs web dengan akun pengguna di mana admin dapat mengubah sandi pengguna. Klien saat ini marah karena Chrome menawarkan untuk menyimpan sandi yang dimasukkan pada formulir "ubah sandi" setiap saat untuk setiap pengguna , karena kesalahan mengidentifikasi formulir edit pengguna sebagai formulir login. Memberikan instruksi sederhana seperti "cukup klik Never Remember Password" tampaknya berada di luar jangkauan mereka.
charredUtensil

5
<input type="password" placeholder="Enter New Password" autocomplete="new-password">

Ini dia.


2
Begini caranya, ada banyak solusi di luar sana, dan sesederhana ini, diuji dengan versi terbaru Firefox (v67) dan Chrome (75).
Mariano Ruiz

Chrome 80 masih akan menawarkan untuk mengingat kata sandi setelah mengirimkan formulir.
Bouke

4

Inilah jawaban terbaik dan termudah! Letakkan bidang sandi tambahan di depan inputbidang Anda dan atur display:none, sehingga saat browser mengisinya, ia melakukannya di tempat inputyang tidak Anda pedulikan.

Ubah ini:

<input type="password" name="password" size="25" class="input" id="password" value="">

untuk ini:

<input type="password" style="display:none;">
<input type="password" name="password" size="25" class="input" id="password" value="">

Sebenarnya, ini berfungsi jika 2 bidang kata sandi ada di formulir, tetapi browser baru mengabaikan kata sandi kedua jika tidak terlihat dan diaktifkan; (
Cedric Simon

1
Menggunakan display:nonetidak berfungsi untuk saya (Chrome 61 OSX), tetapi ini <input type="password" style="position: absolute; top: -1000px;">
berfungsi

2

Baca juga jawaban ini di mana dia menggunakan solusi mudah ini yang berfungsi di mana-mana (lihat juga perbaikan untuk Safari seluler):

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

1

Anda dapat menggunakan JQuery, pilih item berdasarkan id:

$("input#Password").attr("autocomplete","off");

Atau pilih item berdasarkan jenis:

$("input[type='password']").attr("autocomplete","off");

Atau juga:

Anda dapat menggunakan Javascript murni:

document.getElementById('Password').autocomplete = 'off';

1

Anda juga bisa menggunakannya seperti berikut

$('#Password').attr("autocomplete", "off");
setTimeout('$("#Password").val("");', 2000);

1

mengingat autocomplete = off sudah tidak digunakan lagi, saya menyarankan solusi yang lebih baru.

Setel bidang sandi Anda ke bidang teks normal, dan tutupi masukan Anda dengan "cakram" menggunakan CSS. kodenya akan terlihat seperti ini:

<input type="text" class="myPassword" /> 

input .myPassword{
    text-security:disc;
    -webkit-text-security:disc;
    -mox-text-security:disc;
}

Harap dicatat bahwa ini mungkin tidak berfungsi dengan baik pada browser firefox, dan diperlukan panduan tambahan. Baca lebih lanjut di sini: https://stackoverflow.com/a/49304708/5477548 .

Solusinya diambil dari link ini , tetapi untuk memenuhi SO "no-hotlinks" saya merangkumnya di sini.


0

Dalam kasus sebagian besar browser utama, memiliki input di luar dan tidak terhubung ke bentuk apa pun menipu browser untuk berpikir bahwa tidak ada pengiriman. Dalam hal ini, Anda harus menggunakan validasi JS murni untuk login dan enkripsi kata sandi Anda juga diperlukan.

Sebelum:

<form action="..."><input type="password"/></form>

Setelah:

<input type="password"/>

1
Ngomong-ngomong, ini adalah trik yang mungkin tidak boleh Anda gunakan. Dengan tidak menggunakan tag formulir, kode Anda menjadi HTML4 secara default dan mempersulit memvalidasi akun pengguna Anda.
Kanisida

0

Saya telah menemukan karya berikut di Firefox dan Chrome.

<form ... > <!-- more stuff -->
<input name="person" type="text" size=30 value="">
<input name="mypswd" type="password" size=6 value="" autocomplete="off">
<input name="userid" type="text" value="security" style="display:none">
<input name="passwd" type="password" value="faker" style="display:none">
<!-- more stuff --> </form>

Semua ini ada di dalam bagian formulir. "person" dan "mypswd" adalah yang Anda inginkan, tetapi browser akan menyimpan "userid" dan "passwd" sekali, dan tidak akan pernah lagi karena keduanya tidak berubah. Anda dapat menghilangkan bidang "orang" jika Anda tidak benar-benar membutuhkannya. Dalam hal ini, yang Anda inginkan hanyalah bidang "mypswd", yang dapat berubah dalam beberapa cara yang diketahui oleh pengguna halaman web Anda.


0

Satu-satunya cara saya bisa mendapatkan firefox, edge, dan Internet explorer untuk mematikan pelengkapan otomatis adalah dengan menambahkan autocomplete = "false" di pernyataan formulir saya seperti:

  <form action="postingpage.php" autocomplete="false" method="post">

dan saya harus menambahkan autocomplete = "off" ke masukan formulir saya dan mengubah jenisnya menjadi teks Seperti:

     <input type="text" autocomplete="off">

Tampaknya kode html ini perlu distandarisasi dengan browser. form type = password harus direvisi sehingga menggantikan pengaturan browser. Satu-satunya masalah yang saya miliki adalah saya kehilangan input masking saya. Namun sisi baiknya, "situs ini tidak aman" yang mengganggu tidak muncul di firefox.

bagi saya, ini bukan masalah besar karena pengguna sudah diautentikasi dan bagian nama pengguna dan kata sandi saya yang berubah


2
JANGAN LAKUKAN INI. Data akan tetap dikirim dalam bentuk teks biasa melalui jaringan, yang merupakan keseluruhan masalah dengan HTTP (bukan HTTPS) di tempat pertama, karenanya pesan peringatan "mengganggu" Anda. Tidak ada bedanya bahwa pengguna sudah diautentikasi karena Man In The Middle masih dapat melihat data teks biasa dan logging sisi server dapat dikonfigurasi secara berbeda (dapat menyimpan header permintaan, sedangkan ada masalah lain yang sama sekali jika ia menyimpan POST data di bawah HTTPS).
Jacob

https mengenkripsi lalu lintas. Jika Anda menggunakan ini sebagai bagian dari aplikasi Internet yang bersifat publik, Anda tetap melakukannya. Metode posting mencegah bookmark, dan multi iframe kode php di dalam HTML mencegah injeksi URL. Secara teknis, Anda seharusnya memasukkan jalur lengkap Anda. Jika Anda menerapkan, saya akan merekomendasikan memuat variabel $ _SESSION dengan url dasar yang ditulis dalam teks daripada melihat variabel $ _SERVER. $ _SERVER ['HTTP_HOST'], dan $ _SERVER ['PHP_SELF'] sebaiknya hanya digunakan di lingkungan non publik karena keduanya memiliki beberapa eksploitasi.
drtechno

Btw, contoh saya adalah untuk sistem tertutup yang tidak terhubung ke internet dengan cara apa pun
drtechno

belum ada yang menyinggung tentang penggunaan skema encyption yang dijalankan dengan "java onclick" lalu kirimkan formulir setelah rutin enkripsi.
drtechno
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.