Typ danych wejściowych = hasło, nie pozwól przeglądarce zapamiętać hasła

101

Pamiętam, że widziałem sposób, aby mieć <input type="password" />taki, że przeglądarka nie monituje użytkownika o zapisanie hasła. Ale rysuję puste miejsce. Czy istnieje atrybut HTML lub jakaś sztuczka JavaScript, która to zrobi?

DavGarcia
źródło

Odpowiedzi:

123

Spróbuj użyć autocomplete="off". Nie jestem jednak pewien, czy każda przeglądarka go obsługuje. Dokumentacja MSDN tutaj .

EDYCJA : Uwaga: większość przeglądarek zrezygnowała z obsługi tego atrybutu. Zobacz Czy funkcja autocomplete = "off" jest zgodna ze wszystkimi nowoczesnymi przeglądarkami?

Jest to prawdopodobnie coś, co powinno być pozostawione raczej użytkownikowi niż projektantowi strony internetowej.

tvanfosson
źródło
2
Możesz również dostarczyć stronę z HTTPS i przez nagłówek HTTP lub tag META, aby zapobiec buforowaniu. W ten sposób hasło również nie zostanie zapisane (przynajmniej w przeglądarce Internet Explorer).
doekman
Jeśli chodzi o walidację, HTML5 dodaje atrybut autouzupełniania do specyfikacji, więc teraz jest w porządku
VictorySaber
9
Uwaga dla przyszłych czytelników: wszystkie główne przeglądarki dążą do ignorowania atrybutu. (patrz stackoverflow.com/a/21348793/37706 )
rdans
@RyanDansie dzięki za zwrócenie uwagi. Zaktualizowałem odpowiedź. Stara odpowiedź jest ... stara.
tvanfosson
8
„Jest to prawdopodobnie coś, co powinno być pozostawione raczej użytkownikowi niż projektantowi witryny”. istnieją przyczyny zarówno techniczne, jak i nietechniczne. Nie należy na przykład zapamiętywać haseł jednorazowych. Witryny bankowe z „wprowadź pierwszą cyfrę kodu PIN” to kolejna. Nie zapominaj, że analityk biznesowy może zdecydować, że chce mieć pole hasła i usunąć wybór z dewelopera.
Sprague
61

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

Chciałbym tylko dodać, że jako użytkownik uważam, że jest to bardzo irytujące i kłopotliwe do przezwyciężenia. Zdecydowanie odradzam korzystanie z tego, ponieważ najprawdopodobniej pogorszy to twoich użytkowników.

Hasła nie są już przechowywane w MRU, a poprawnie skonfigurowane komputery publiczne nie zapiszą nawet nazwy użytkownika.

matpie
źródło
23
+1 dla „nie denerwuj swoich użytkowników”. Dokładnie to robi tego rodzaju funkcja. Podobnie jak w przypadku witryn, które wymuszają buforowanie, przycisk Wstecz powoduje wyczyszczenie formularza. BARDZO drażniący.
cletus
6
+1 Całkowicie się zgadzam. Jest to strona edycji profilu klienta, na której administrator wprowadza hasło tylko wtedy, gdy zamierzasz je zmienić. W ten sposób administratorzy nie zmieniają hasła za każdym razem, gdy przechodzą do edycji informacji o kliencie.
DavGarcia,
14
Jest to bardzo przydatne w przypadku pól numerów kart kredytowych. Formularz PayPal jest przechowywany w każdej przeglądarce i każdy, kto korzysta z twojego komputera, może ponownie wprowadzić wszystkie dane, więc musisz ręcznie przejść i usunąć wszystkie zapamiętane pola.
Egor Pavlikhin
31
W formularzu, w którym użytkownik może ustawić hasło, które nie ma nic wspólnego z logowaniem, włączenie autouzupełniania jest w rzeczywistości bardziej irytującą opcją - przeglądarka może zaproponować zapisanie hasła, z którym nie może nic zrobić. Ponadto, jeśli bezpieczeństwo jest delikatną kwestią, nie zakładałbym, że wszystkie komputery publiczne są poprawnie skonfigurowane.
jrb,
3
Używam tego do jednorazowego użycia hasła. Jak powiedział jrb, byłoby bardzo irytujące, gdyby przeglądarka go zapisała.
Danation
12

Rozwiązałem w inny sposób. Możesz tego spróbować.

<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>

#Inny sposób

 <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>

// musisz dodać atrybut autocomplete = "off" lub możesz dodać klasę .auto-complete-off do pola wprowadzania i ciesz się

Przykład:

  <input id="passfld" type="password" autocomplete="off" />
    OR
  <input id="passfld" class="auto-complete-off" type="password"  />
Sarwar Hasan
źródło
4
Uniemożliwia to przeglądarce przechowywanie hasła zamiast zapobiegania autouzupełnianiu, co jest lepszym rozwiązaniem w moim scenariuszu.
Pau Fracés
Dzięki, pracował dla mnie na najnowszym chrome. Uwaga: używany w systemie wewnętrznym, w którym dozwolony jest tylko Chrome, wykonaj więcej testów, jeśli używasz w witrynie produkcyjnej.
Izion
@AntoVinish, mam nadzieję, że moje ostatnie rozwiązanie zadziała w przeglądarce Firefox 40.
Sarwar Hasan
7

Wypróbowałem następujące i wygląda na to, że działa w każdej przeglądarce:

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

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

W ten sposób jest o wiele bezpieczniejszy niż stosowanie technik limitu czasu, ponieważ gwarantuje, że pole wejściowe ulegnie hasłu, gdy użytkownik je ustawi.

Apostolidis
źródło
5

Jeśli chodzi o kwestie bezpieczeństwa, oto co powie Ci konsultant ds. Bezpieczeństwa na temat całej sprawy (pochodzi z rzeczywistego niezależnego audytu bezpieczeństwa):

Włączone autouzupełnianie HTML - pola hasła w formularzach HTML mają włączone autouzupełnianie. Większość przeglądarek ma funkcję zapamiętywania danych logowania użytkownika wprowadzonych do formularzy HTML.

Ryzyko względne: niskie

Systemy / urządzenia, których dotyczy problem: o https: // * ** * *** /

Zgadzam się również, że powinno to obejmować każdą dziedzinę, która zawiera naprawdę prywatne dane. Uważam, że można zmusić osobę do wpisywania danych karty kredytowej, kodu CVC, haseł, nazw użytkowników itp. Za każdym razem, gdy witryna ma uzyskać dostęp do wszystkiego, co powinno być zabezpieczone [ogólnie lub zgodnie z wymogami prawnymi]. Na przykład: formularze zakupu, strony bankowe / kredytowe, strony podatkowe, dane medyczne, federalne, nuklearne itp. - a nie witryny takie jak Stack Overflow lub Facebook.

Inne typy witryn - np. TimeStar Online do rejestracji czasu pracy i poza nią - to głupie, ponieważ zawsze używam tego samego komputera / konta w pracy, że nie mogę zapisać poświadczeń na tej stronie - o dziwo mogę na moim Androidzie ale nie na iPadzie. Nawet współdzielone komputery nie byłyby takie złe, ponieważ rejestrowanie wejścia / wyjścia dla kogoś innego naprawdę nie robi nic poza irytacją twojego przełożonego. (Muszą wejść i usunąć błędne uderzenia - po prostu nie chcą zapisywać na publicznych komputerach).

Michael
źródło
5
Dodanie tutaj komentarza z powodu, dla którego nie chcesz zapisywać hasła. Prowadzę stronę internetową z kontami użytkowników, na których administratorzy mogą zmieniać hasło użytkownika. Klient jest obecnie wściekły, że Chrome oferuje każdemu użytkownikowi zapisanie hasła wprowadzonego w formularzu „zmiany hasła” za każdym razem , ponieważ błędnie identyfikuje formularz edycji użytkownika jako formularz logowania. Wydanie prostych instrukcji, takich jak „po prostu kliknij Nigdy nie zapamiętaj hasła”, najwyraźniej przekracza ich możliwości.
charredUtensil
5
<input type="password" placeholder="Enter New Password" autocomplete="new-password">

Proszę bardzo.

Bhaumik Thakkar
źródło
2
To jest sposób, istnieje wiele obejść i jest tak proste, jak to, przetestowane z najnowszą wersją przeglądarki Firefox (v67) i Chrome (75).
Mariano Ruiz
Chrome 80 nadal będzie oferować zapamiętanie hasła po przesłaniu formularza.
Bouke
4

Oto najlepsza i najłatwiejsza odpowiedź! Umieść dodatkowe pole hasła przed swoim inputpolem i ustaw je display:nonetak, aby gdy przeglądarka je wypełniła, inputzrobiła to w miejscu, na którym Cię nie obchodzi.

Zmień to:

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

do tego:

<input type="password" style="display:none;">
<input type="password" name="password" size="25" class="input" id="password" value="">
Kapitanie Fantastyczny
źródło
Właściwie to działa, jeśli w formularzu znajdują się 2 pola hasła, ale nowa przeglądarka ignoruje drugie hasło, jeśli nie jest widoczne i włączone; (
Cedric Simon
1
U display:nonemnie nie działa (Chrome 61 OSX), ale to działa:<input type="password" style="position: absolute; top: -1000px;">
John Hascall,
2

Przeczytaj także tę odpowiedź, w której używa tego łatwego rozwiązania, które działa wszędzie (zobacz także poprawkę dla mobilnej przeglądarki Safari):

<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
Ferie
źródło
1

Możesz użyć JQuery, wybierz element według identyfikatora:

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

Lub wybierz element według typu:

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

Lub też:

Możesz użyć czystego Javascript:

document.getElementById('Password').autocomplete = 'off';
Fernando
źródło
1

możesz go również używać jak obserwowanie

$('#Password').attr("autocomplete", "off");
setTimeout('$("#Password").val("");', 2000);
Chandrika Prajapati
źródło
1

ponieważ autocomplete = off jest przestarzałe, sugeruję nowsze rozwiązanie.

Ustaw swoje hasło na zwykłe pole tekstowe i zamaskuj wprowadzone dane za pomocą „dysków” za pomocą CSS. kod powinien wyglądać następująco:

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

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

Należy pamiętać, że może to nie działać poprawnie w przeglądarkach Firefox i potrzebne jest dodatkowe obejście. Przeczytaj więcej na ten temat tutaj: https://stackoverflow.com/a/49304708/5477548 .

Rozwiązanie zostało zaczerpnięte z tego łącza , ale aby zachować zgodność z SO „no-hotlinks”, podsumowałem je tutaj.

yoad w
źródło
0

W przypadku większości głównych przeglądarek dane wejściowe poza formularzami i niepołączone z nimi w jakikolwiek sposób oszukują przeglądarkę do myślenia, że ​​nie było przesłania. W takim przypadku do logowania musiałbyś użyć czystej walidacji JS, a szyfrowanie haseł byłoby również konieczne.

Przed:

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

Po:

<input type="password"/>
Cannicide
źródło
1
Nawiasem mówiąc, jest to sztuczka, której prawdopodobnie nie powinieneś używać. Jeśli nie używasz tagu formularza, Twój kod domyślnie staje się HTML4 i utrudnia weryfikację kont użytkowników.
Cannicide
0

Znalazłem następujące prace w przeglądarce Firefox i 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>

Wszystko to znajduje się w sekcji formularzy. „person” i „mypswd” są tym, czego chcesz, ale przeglądarka zapisze „userid” i „passwd” raz i nigdy więcej, ponieważ nie zmieniają się. Możesz wyeliminować pole „osoba”, jeśli naprawdę go nie potrzebujesz. W takim przypadku wszystko, czego potrzebujesz, to pole „mypswd”, które może się zmienić w pewien sposób znany użytkownikowi Twojej strony internetowej.

Dick Guertin
źródło
0

Jedynym sposobem, w jaki mogę wyłączyć autouzupełnianie w programach Firefox, Edge i Internet Explorer, jest dodanie autocomplete = "false" w moim oświadczeniu formularza, na przykład:

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

i muszę dodać autocomplete = "off" do mojego formularza i zmienić typ na tekst, na przykład:

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

Wygląda na to, że ten kod html wymaga standaryzacji w przeglądarkach. Formularz typ = hasło należy zmienić, tak aby zastępował ustawienia przeglądarki. Jedyny problem, jaki mam, to utrata maskowania wprowadzania. Ale z drugiej strony irytujące „ta witryna nie jest bezpieczna” nie pojawia się w przeglądarce Firefox.

dla mnie to nie jest wielka sprawa, ponieważ użytkownik jest już uwierzytelniony, a jego część dotycząca zmiany nazwy użytkownika i hasła

drtechno
źródło
2
NIE RÓB TEGO. Dane będą nadal przesyłane w postaci zwykłego tekstu przez sieć, co jest głównym problemem z HTTP (nie HTTPS), stąd twój „irytujący” komunikat ostrzegawczy. Nie ma znaczenia, że ​​użytkownik jest już uwierzytelniony, ponieważ Man In The Middle nadal widzi dane w postaci zwykłego tekstu, a logowanie po stronie serwera może być skonfigurowane inaczej (może przechowywać nagłówki żądań, podczas gdy istnieją inne problemy, gdyby przechowywał POST dane w HTTPS).
Jacob
https szyfruje ruch. Jeśli używasz tego jako części aplikacji internetowej, która jest publiczna, robisz to mimo wszystko. Metoda post zapobiega tworzeniu zakładek, a wiele ramek iframe kodu php w kodzie HTML zapobiega iniekcji adresu URL. Technicznie rzecz biorąc, powinieneś podać pełną ścieżkę. Jeśli wdrażasz, zalecałbym załadowanie zmiennej $ _SESSION z bazowym adresem URL, który jest zapisany w tekście, zamiast patrzeć na zmienne $ _SERVER. $ _SERVER ['HTTP_HOST'] i $ _SERVER ['PHP_SELF'] powinny być używane tylko w środowiskach niepublicznych, ponieważ oba mają kilka exploitów.
drtechno
Btw, mój przykład dotyczy zamkniętych systemów, które nie są w żaden sposób podłączone do internetu
drtechno
nikt nie poruszył kwestii korzystania ze schematu szyfrowania wykonywanego za pomocą „java onclick”, a następnie wyślij formularz po procedurze szyfrowania.
drtechno