Come si disabilita il completamento automatico del browser sul campo del modulo Web/tag di input?

https://stackoverflow.com/questions/2530

08-06-2019
|

Domanda

Come si disabilita autocomplete nei principali browser per uno specifico input (O form field)?

Soluzione

Firefox 30 ignora autocomplete="off" per le password, scegliendo invece di chiedere all'utente se la password deve essere archiviata sul client.Notare quanto segue commento dal 5 maggio 2014:

Il gestore delle password Sempre chiede se desidera salvare una password.Le password non vengono salvate senza il permesso dell'utente.

Siamo il terzo browser ad implementare questa modifica, dopo IE e Chrome.

Secondo il Rete di sviluppatori Mozilla documentazione, l'attributo booleano dell'elemento del modulo autocomplete impedisce che i dati del modulo vengano memorizzati nella cache nei browser meno recenti.

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

Altri suggerimenti

Inoltre autocomplete=off, potresti anche fare in modo che i nomi dei campi del modulo siano randomizzati dal codice che genera la pagina, magari aggiungendo una stringa specifica della sessione alla fine dei nomi.

Quando il modulo viene inviato, puoi rimuovere quella parte prima di elaborarla sul lato server.Ciò impedirebbe al browser Web di trovare il contesto per il tuo campo e potrebbe anche aiutare a prevenire gli attacchi XSRF perché un utente malintenzionato non sarebbe in grado di indovinare i nomi dei campi per l'invio di un modulo.

La maggior parte dei principali browser e gestori di password (correttamente, IMHO) ora ignorano autocomplete=off.

Perché?Molte banche e altri siti Web "ad alta sicurezza" hanno aggiunto autocomplete=off alle loro pagine di accesso "per motivi di sicurezza", ma questo in realtà diminuisce la sicurezza poiché fa sì che le persone cambino le password su questi siti ad alta sicurezza per renderle facili da ricordare (e quindi crackare) poiché il completamento automatico è stato interrotto.

Molto tempo fa la maggior parte dei gestori di password ha iniziato a ignorarli autocomplete=off, e ora i browser stanno iniziando a fare lo stesso solo per l'immissione di nome utente/password.

Sfortunatamente, i bug nelle implementazioni del completamento automatico inseriscono informazioni su nome utente e/o password in campi del modulo inappropriati, causando errori di convalida del modulo o, peggio ancora, inserendo accidentalmente nomi utente in campi lasciati intenzionalmente vuoti dall'utente.

Cosa deve fare uno sviluppatore web?

Se riesci a mantenere tutti i campi password su una pagina da soli, è un ottimo inizio poiché sembra che la presenza di un campo password sia il principale fattore scatenante per l'attivazione del completamento automatico utente/passaggio.Altrimenti leggi i suggerimenti qui sotto.
Safari nota che ci sono 2 campi password e disabilita il completamento automatico in questo caso, presupponendo che si tratti di un modulo di modifica password, non di un modulo di accesso.Quindi assicurati di utilizzare 2 campi password (nuova e conferma nuova) per tutti i moduli in cui lo consenti
Cromo 34, sfortunatamente, proverà a compilare automaticamente i campi con utente/pass ogni volta che vede un campo password.Questo è un bug piuttosto grave che, si spera, cambierà il comportamento di Safari.Tuttavia, l'aggiunta di questo nella parte superiore del modulo sembra disabilitare il riempimento automatico della password:
```
<input type="text" style="display:none">
<input type="password" style="display:none">
```

Non ho ancora studiato a fondo IE o Firefox, ma sarò felice di aggiornare la risposta se altri hanno informazioni nei commenti.

A volte anche completamento automatico = disattivato volevo non impedire di riempire nelle credenziali nei campi errati, ma non nel campo utente o nickname.

Questa soluzione alternativa è in aggiunta al post di apinstein sul comportamento del browser.

corretta la compilazione automatica del browser in sola lettura e l'impostazione del focus scrivibile (clic e tabulazione)

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

Aggiornamento:Mobile Safari imposta il cursore nel campo, ma non mostra la tastiera virtuale.La nuova correzione funziona come prima ma gestisce la tastiera virtuale:

<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();  }" />

Dimostrazione dal vivo https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

Perché il browser inserisce automaticamente le credenziali nel campo di testo sbagliato!?

Noto questo strano comportamento su Chrome e Safari, quando sono presenti campi password la stessa forma. Immagino che il browser cerchi un campo password per inserire le credenziali salvate.Quindi riempie automaticamente (solo indovinando a causa dell'osservazione) il campo di input simile a testo più vicino, che appare prima del campo della password nel DOM.Poiché il browser è l'ultima istanza e non puoi controllarlo,

Questa correzione di sola lettura sopra ha funzionato per me.

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

Funzionerà su Internet Explorer e Mozilla FireFox, lo svantaggio è che non è lo standard XHTML.

La soluzione per Chrome è aggiungere autocomplete="new-password" alla password del tipo di input.

Esempio:

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

Chrome completa sempre automaticamente i dati se trova una casella di Inserisci password, quanto basta per indicare quella casella autocomplete = "new-password".

Questo funziona bene per me.

Nota:assicurati con F12 che le tue modifiche abbiano effetto, molte volte i browser salvano la pagina in cache, questo mi ha dato una brutta impressione che non funzionasse, ma il browser in realtà non ha apportato le modifiche.

Come altri hanno già detto, la risposta è autocomplete="off"

Tuttavia, penso che valga la pena dirlo Perché è una buona idea usarlo in alcuni casi come risposta a questo e duplicare le domande hanno suggerito che è meglio non spegnerlo.

Il blocco della memorizzazione dei numeri di carta di credito nei browser non dovrebbe essere lasciato agli utenti.Troppi utenti non si renderanno nemmeno conto che è un problema.

È particolarmente importante disattivarlo nei campi relativi ai codici di sicurezza delle carte di credito.COME questa pagina stati:

"Non memorizzare mai il codice di sicurezza...il suo valore dipende dalla presunzione che l'unico modo per fornirla sia leggerlo sulla carta di credito fisica, dimostrando che la persona che la fornisce è effettivamente in possesso della carta."

Il problema è che, se si tratta di un computer pubblico (cyber café, biblioteca, ecc.), è facile per altri utenti rubare i dettagli della tua carta e anche sul tuo computer un sito Web dannoso potrebbe rubare i dati di completamento automatico.

Dovrei dissentire da quelle risposte che dicono di evitare di disabilitare il completamento automatico.

La prima cosa da sottolineare è che il completamento automatico non disabilitato esplicitamente nei campi del modulo di accesso è un errore PCI-DSS.Inoltre, se il computer locale di un utente viene compromesso, qualsiasi dato di completamento automatico può essere facilmente ottenuto da un utente malintenzionato poiché archiviato in chiaro.

C'è sicuramente un argomento a favore dell'usabilità, tuttavia c'è un equilibrio molto sottile quando si tratta di quali campi del modulo dovrebbero avere il completamento automatico disabilitato e quali no.

Tre opzioni:Primo:

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

Secondo:

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

Terzo (codice JavaScript):

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

Ho risolto la lotta infinita con Google Chrome con l'uso di caratteri casuali.Quando esegui sempre il completamento automatico con una stringa casuale, non ricorderà mai nulla.

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

Spero che possa essere d'aiuto ad altre persone.

Su una nota correlata o addirittura completamente opposta -

"Se sei l'utente del modulo di cui sopra e desideri riattivare la funzionalità di completamento automatico, usa il segnalibro" Ricorda password "da questo Pagina di segnalibri.Rimuove tutto autocomplete="off" attributi da tutti i moduli della pagina.Continua a combattere la buona battaglia! "

In realtà l'abbiamo usato sasbè un'idea per un sito.Si trattava di un'app Web di software medico per gestire uno studio medico.Tuttavia, molti dei nostri clienti erano chirurghi che utilizzavano numerose postazioni di lavoro diverse, compresi terminali semi-pubblici.Quindi, volevano assicurarsi che un medico che non comprende le implicazioni delle password salvate automaticamente o non presta attenzione non possa accidentalmente lasciare facilmente accessibili le proprie informazioni di accesso.Naturalmente, questo accadeva prima dell'idea della navigazione privata che inizia ad essere presente in IE8, FF3.1, ecc.Anche così, molti medici sono costretti a utilizzare browser della vecchia scuola negli ospedali con IT che non cambierà.

Quindi, abbiamo fatto in modo che la pagina di accesso generasse nomi di campi casuali che avrebbero funzionato solo per quel post.Sì, è meno conveniente, ma colpisce l'utente in testa per non memorizzare le informazioni di accesso sui terminali pubblici.

Basta impostare autocomplete="off".C'è un'ottima ragione per farlo:Vuoi fornire la tua funzionalità di completamento automatico!

Ho provato infinite soluzioni e poi ho trovato questo:

Invece di autocomplete="off" basta semplicemente usare autocomplete="false"

È così semplice e funziona a meraviglia anche in Google Chrome!

Penso autocomplete=off è supportato in HTML 5.

Chiediti però perché vuoi farlo: può avere senso in alcune situazioni, ma non farlo solo per il gusto di farlo.

È meno conveniente per gli utenti e non costituisce nemmeno un problema di sicurezza in OS X (menzionato da Soren di seguito).Se temi che alle persone venga rubata la password da remoto, un registratore di tasti potrebbe comunque farlo anche se la tua app utilizza autcomplete=off.

Come utente che sceglie di fare in modo che un browser ricordi (la maggior parte delle) mie informazioni, troverei fastidioso se il tuo sito non ricordasse le mie.

Nessuna delle soluzioni ha funzionato per me in questa conversazione.

Alla fine ho capito a soluzione HTML pura ciò richiede niente Javascript, funziona con i browser moderni (eccetto IE;doveva esserci almeno 1 errore, giusto?) e non richiede la disattivazione del completamento automatico per l'intero modulo.

Disattiva semplicemente il completamento automatico sul form e poi accenderlo per qualsiasi input desideri che funzioni all'interno del modulo.Per esempio:

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

Era un modo non standard per farlo (penso che Mozilla e Internet Explorer lo supportino ancora), ma confondere le aspettative degli utenti è una cattiva idea.

Se l'utente inserisce i dettagli della propria carta di credito in un modulo e poi lascia che qualcun altro utilizzi quel browser, non è un tuo problema.:)

Questo funziona per me.

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

Possiamo utilizzare questa strategia anche in altri controlli come testo, selezione, ecc

Un po' tardi per iniziare il gioco... ma ho appena riscontrato questo problema e ho provato diversi errori, ma questo funziona per me trovato su MDN

In alcuni casi, il browser continuerà a suggerire valori di completamento automatico anche se l'attributo di completamento automatico è impostato su OFF.Questo comportamento inaspettato può essere piuttosto sconcertante per gli sviluppatori.Il trucco per forzare davvero il non completare è assegnare una stringa casuale all'attributo in questo modo:

autocomplete="nope"

La migliore soluzione:

Impedisci il nome utente (o l'e-mail) e la password del completamento automatico:

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

Impedisci il completamento automatico di un campo:

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

Spiegazione:autocomplete continua a lavorare <input>, autocomplete="off" non funziona, ma puoi cambiare off a una stringa casuale, come nope.

Funziona in:

Cromo:49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63 e 64
Firefox:44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57 e 58

Aggiungendo il

autocomplete="off"

al tag del modulo disabiliterà il completamento automatico del browser (ciò che è stato precedentemente digitato in quel campo) da tutti input campi all'interno di quel particolare modulo.

Testato su:

Firefox 3.5, 4 BETA
Internet Explorer 8
Cromo

Prova ad aggiungere

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

inoltre

completamento automatico="disattivato"

agli input che non vuoi ricordare i dati del modulo (username, password, ecc.) come mostrato di seguito:

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

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

Aggiornamento: Di seguito è riportato un esempio completo basato su questo approccio che impedisce trascina e rilascia, copia, impasto, eccetera.

<input type="text" name="UserName" style="text-transform:lowercase;" placeholder="Username" 
    autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" 
    oncopy="return false" ondrag="return false" ondrop="return false" 
    onpaste="return false" oncontextmenu="return false" > 

<input type="password" name="Password" placeholder="Password" autocomplete="off" readonly 
    onfocus="this.removeAttribute('readonly');" oncopy="return false" ondrag="return false" 
    ondrop="return false" onpaste="return false" oncontextmenu="return false" >

Testato sulle ultime versioni dei principali browser, ad es. Google Chrome, Mozilla Firefox, Microsoft Edge, eccetera.e funziona senza alcun problema.Spero che questo ti aiuti...

Utilizza un nome e un ID non standard per i campi, quindi anziché "nome" usa "nome_".I browser quindi non lo vedranno come il campo del nome.La parte migliore è che puoi farlo su alcuni ma non su tutti i campi e completerà automaticamente alcuni ma non tutti i campi.

Per evitare l'XHTML non valido puoi impostare questo attributo utilizzando javascript.Esempio utilizzando jQuery:

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

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

Il problema è che gli utenti senza Javascript otterranno la funzionalità di completamento automatico.

Aggiunta autocomplete="off" non lo taglierà.

Cambia l'attributo del tipo di input in type="search".
Google non applica la compilazione automatica agli input con un tipo di ricerca.

prova anche questi, se solo autocomplete="off" non funziona:

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

Non posso credere che questo sia ancora un problema per così tanto tempo dopo che è stato segnalato.Le soluzioni di cui sopra non hanno funzionato per me, poiché Safari sembrava sapere quando l'elemento non era visualizzato o fuori schermo, tuttavia per me ha funzionato quanto segue:

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

Spero che sia utile per qualcuno!

Questo è un problema di sicurezza che i browser ora ignorano.I browser identificano e archiviano i contenuti utilizzando i nomi di input, anche se gli sviluppatori ritengono che le informazioni siano sensibili e non debbano essere archiviate.Rendere diverso il nome di input tra 2 richieste risolverà il problema (ma verrà comunque salvato nella cache del browser e aumenterà anche la cache del browser).Chiedere all'utente di attivare o disattivare le opzioni nelle impostazioni del proprio browser non è una buona soluzione.Il problema può essere risolto nel backend.

Ecco la mia soluzione.Un approccio che ho implementato nel mio framework.Tutti gli elementi di completamento automatico vengono generati con un input nascosto come questo:

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

Il server quindi elabora le variabili post in questo modo:

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

È possibile accedere al valore come di consueto

var_dump($_POST['username']);

E il browser non sarà in grado di suggerire informazioni dalla richiesta precedente o da utenti precedenti.

Tutto funziona a meraviglia, anche se gli aggiornamenti del browser vogliono ignorare o meno il completamento automatico.Questo è stato il modo migliore per risolvere il problema per me.

Nessuno degli hack menzionati qui ha funzionato per me in Chrome.C'è una discussione sull'argomento qui: https://code.google.com/p/chromium/issues/detail?id=468153#c41

Aggiungendo questo all'interno di a <form> funziona (almeno per ora):

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

Quindi eccolo qui:

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

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow