Ich muss verhindern, dass Browser die Werte für Benutzername und Kennwort speichern, da ich an einer Webanwendung arbeite, die sicherere Daten enthält. Mein Kunde hat mich darum gebeten.
Ich habe das autocomplete="off"
Attribut in den HTML-Formular- und Kennwortfeldern ausprobiert . In den neuesten Browsern wie Chrome 55, Firefox 38+, Internet Explorer 11 usw. funktioniert dies jedoch nicht.
Was ist die beste Lösung dafür?
Antworten:
Vielen Dank für Ihre Antwort. Ich folgte dem folgenden Link
Deaktivieren Sie die Browser-Funktion "Passwort speichern"
Ich habe das Problem behoben, indem ich nur
readonly
&onfocus="this.removeAttribute('readonly');"
Attributeautocomplete="off"
zu den Eingaben hinzugefügt habe, wie unten gezeigt.<input type="text" name="UserName" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" > <input type="password" name="Password" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" >
Das funktioniert gut für mich.
quelle
autocomplete
Attribut wird von den Browsern nicht mehr unterstütztDies ist in modernen Browsern aus gutem Grund nicht möglich. Moderne Browser bieten Passwort-Manager, mit denen Benutzer stärkere Passwörter als gewöhnlich verwenden können.
Wie von MDN erläutert : Deaktivieren der automatischen Vervollständigung von Formularen :
quelle
autocomplete="new-password"
genau das Gegenteil von dem, was ich will. Das Dialogfeld "Möchten Sie Ihr gespeichertes Passwort aktualisieren ..." wird nicht angezeigt. Es aktualisiert nur stillschweigend mein gespeichertes Passwort. Schlimmer als nutzlos - gefährlich! > :(Hier ist eine reine HTML / CSS- Lösung für Chrome, die in Version 65.0.3325.162 (offizieller Build) (64-Bit) getestet wurde .
Stellen Sie die Eingabe ein
type="text"
und verwenden Sie CSStext-security:disc
zum Nachahmentype="password"
.<input type="text" name="username"> <input type="text" name="password" style="text-security:disc; -webkit-text-security:disc;">
Hinweis: Funktioniert in Firefox , CSS
moz-text-security
ist jedoch veraltet / entfernt. Um dies zu beheben, erstellen Sie ein CSS,font-face
das nur aus Punkten besteht, und verwenden Sie esfont-family: 'dotsfont';
.Die obige Quelle enthält einen Link zu einer Problemumgehung für CSS
moz-text-security
und-webkit-text-security
Eigenschaften.Soweit ich getestet habe, funktioniert diese Lösung für Chrome , Firefox Version 59.0 (64-Bit) , Internet Explorer Version 11.0.9600 sowie IE Emulators Internet Explorer 5 und höher.
quelle
Sie sollten in der Lage sein, ein gefälschtes verstecktes Passwortfeld zu erstellen, um dies zu verhindern.
<form> <div style="display:none"> <input type="password" tabindex="-1"/> </div> <input type="text" name="username" placeholder="username"/> <input type="password" name="password" placeholder="password"/> </form>
quelle
Ich habe dies gelöst, indem ich
autocomplete="one-time-code"
der Passworteingabe hinzugefügt habe.Gemäß einer HTML-Referenz
autocomplete="one-time-code"
- ein einmaliger Code zur Überprüfung der Benutzeridentität. Es sieht so aus, als würde es am besten dazu passen.quelle
Standardmäßig gibt es keine richtige Antwort, um das Speichern eines Kennworts in Ihrem Browser zu deaktivieren. Aber zum Glück gibt es einen Ausweg und es funktioniert in fast allen Browsern.
Um dies zu erreichen, fügen Sie kurz vor der eigentlichen Eingabe eine Dummy-Eingabe mit autocomplete = "off" und einem benutzerdefinierten Stil hinzu, um sie auszublenden und tabIndex bereitzustellen.
Die automatische Vervollständigung einiger Browser (Chrome) füllt die erste gefundene Passworteingabe und die vorhergehende Eingabe aus. Mit diesem Trick wird also nur eine unsichtbare Eingabe eingegeben, die keine Rolle spielt.
<div className="password-input"> <input type="password" id="prevent_autofill" autoComplete="off" style={{ opacity: '0', position: 'absolute', height: '0', width: '0', padding: '0', margin: '0' }} tabIndex="-2" /> <input type="password" autoComplete="off" className="password-input-box" placeholder="Password" onChange={e => this.handleChange(e, 'password')} /> </div>
quelle
Ich habe die vielen Lösungen getestet und bin schließlich auf diese Lösung gekommen.
HTML Quelltext
<input type="text" name="UserName" id="UserName" placeholder="UserName" autocomplete="off" /> <input type="text" name="Password" id="Password" placeholder="Password" autocomplete="off"/>
CSS-Code
#Password { text-security: disc; -webkit-text-security: disc; -moz-text-security: disc; }
JavaScript-Code
window.onload = function () { init(); } function init() { var x = document.getElementsByTagName("input")["Password"]; var style = window.getComputedStyle(x); console.log(style); if (style.webkitTextSecurity) { // Do nothing } else { x.setAttribute("type", "password"); } }
quelle
Zum Zeitpunkt der Veröffentlichung funktionierte keine der vorherigen Antworten für mich.
Dieser Ansatz verwendet ein sichtbares Kennwortfeld, um das Kennwort vom Benutzer zu erfassen, und ein verstecktes Kennwortfeld, um das Kennwort an den Server zu übergeben. Das sichtbare Kennwortfeld wird vor dem Absenden des Formulars ausgeblendet, jedoch nicht mit einem Formular
submit
(siehe Erläuterung im nächsten Absatz). Dieser Ansatz überträgt den Wert des sichtbaren Kennwortfelds so schnell wie möglich (ohne unnötigen Aufwand) in das ausgeblendete Kennwortfeld und löscht dann das sichtbare Kennwortfeld. Wenn der Benutzer wieder in das sichtbare Kennwortfeld wechselt, wird der Wert wiederhergestellt. Der Platzhalter wird verwendet, um ●●● anzuzeigen, nachdem das Feld gelöscht wurde.Ich habe versucht, das sichtbare Kennwortfeld im Formularereignis zu
onsubmit
löschen, aber der Browser scheint die Werte vor dem Ereignishandler zu überprüfen und fordert den Benutzer auf, das Kennwort zu speichern. Wenn dasalert
am Ende nichtpasswordchange
kommentiert ist, fordert der Browser das Kennwort weiterhin zum Speichern auf.function formsubmit(e) { document.getElementById('form_password').setAttribute('placeholder', 'password'); } function userinputfocus(e) { //Just to make the browser mark the username field as required // like the password field does. e.target.value = e.target.value; } function passwordfocus(e) { e.target.setAttribute('placeholder', 'password'); e.target.setAttribute('required', 'required'); e.target.value = document.getElementById('password').value; } function passwordkeydown(e) { if (e.key === 'Enter') { passwordchange(e.target); } } function passwordblur(e) { passwordchange(e.target); if (document.getElementById('password').value !== '') { var placeholder = ''; for (i = 0; i < document.getElementById('password').value.length; i++) { placeholder = placeholder + '●'; } document.getElementById('form_password').setAttribute('placeholder', placeholder); } else { document.getElementById('form_password').setAttribute('placeholder', 'password'); } } function passwordchange(password) { if (password.getAttribute('placeholder') === 'password') { if (password.value === '') { password.setAttribute('required', 'required'); } else { password.removeAttribute('required'); var placeholder = ''; for (i = 0; i < password.value.length; i++) { placeholder = placeholder + '●'; } } document.getElementById('password').value = password.value; password.value = ''; //This alert will make the browser prompt for a password save //alert(e.type); } }
#form_password:not([placeholder='password'])::placeholder { color: red; /*change to black*/ opacity: 1; }
<form onsubmit="formsubmit(event)" action="/action_page.php"> <input type="hidden" id="password" name="password" /> <input type="text" id="username" name="username" required autocomplete="off" placeholder="username" onfocus="userinputfocus(event)" /> <input type="password" id="form_password" name="form_password" required autocomplete="off" placeholder="password" onfocus="passwordfocus(event)" onkeydown="passwordkeydown(event)" onblur="passwordblur(event)"/> <br /> <input type="submit"/>
quelle
< input type="password" style='pointer-event: none' onInput= (e) => handleInput(e) />
function handleInput(e) { e.preventDefault(); e.stopPropagation(); e.target.setAttribute('readonly', true); setTimeout(() => { e.target.focus(); e.target.removeAttribute('readonly'); }); }
quelle
Das hat bei mir funktioniert:
<form action='/login' class='login-form' autocomplete='off'> User: <input type='user' name='user-entry'> <input type='hidden' name='user'> Password: <input type='password' name='password-entry'> <input type='hidden' name='password'> </form>
quelle
Ich denke, dass es in den neuesten Browsern nicht möglich ist.
Die einzige Möglichkeit, dies zu tun, besteht darin, ein anderes verstecktes Kennwortfeld zu verwenden und es für Ihre Logik zu verwenden, nachdem Sie beim Senden einen Wert aus dem sichtbaren Kennwortfeld übernommen und eine Dummy-Zeichenfolge in das sichtbare Kennwortfeld eingefügt haben.
In diesem Fall kann der Browser anstelle des eigentlichen Passworts eine Dummy-Zeichenfolge speichern.
quelle
Während die vorherigen Lösungen sehr korrekt sind, können Sie die Situation mit benutzerdefinierten Eingaben mithilfe von Textfeldern und JavaScript nachahmen, wenn Sie die Funktion unbedingt benötigen.
Für eine sichere Verwendung können Sie eine beliebige Kryptografietechnik verwenden. Auf diese Weise umgehen Sie das Kennwortspeicherverhalten des Browsers.
Wenn Sie mehr über die Idee erfahren möchten, können wir dies im Chat besprechen. Aber das Wesentliche wurde in früheren Antworten besprochen, und Sie können sich ein Bild machen.
quelle
Versuche Folgendes. Es kann Ihnen helfen.
Weitere Informationen finden Sie unter Eingabetyp = Kennwort. Lassen Sie den Browser das Kennwort nicht merken
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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="passfld" type="password" autocomplete="off" /> <input type="submit">
quelle
Eine Möglichkeit wäre, zufällige Eingabenamen zu generieren und mit ihnen zu arbeiten.
Auf diese Weise wird den Browsern
new
jedes Mal das Formular angezeigt, und sie können die Eingabefelder nicht vorab ausfüllen.Wenn Sie uns einen Beispielcode zur Verfügung stellen (haben Sie eine SPA-App ( JavaScript Single Page Application ) oder ein serverseitiges Rendering), würde ich Ihnen gerne bei der Implementierung helfen.
quelle
Ich brauchte dies vor ein paar Jahren für eine bestimmte Situation: Zwei Personen, die ihre Netzwerkkennwörter kennen, greifen gleichzeitig auf denselben Computer zu, um eine rechtliche Vereinbarung zu unterzeichnen.
In dieser Situation möchten Sie kein Passwort speichern, da das Speichern eines Passworts ein rechtliches und kein technisches Problem ist, bei dem sowohl die physische als auch die zeitliche Anwesenheit beider Personen obligatorisch ist. Jetzt stimme ich zu, dass dies eine seltene Situation ist, aber solche Situationen existieren und integrierte Passwort-Manager in Webbrowsern sind nicht hilfreich.
Meine technische Lösung für das oben Gesagte bestand darin, zwischen
password
undtext
Typen zu wechseln und die Hintergrundfarbe an die Textfarbe anzupassen, wenn das Feld ein einfaches Textfeld ist (wodurch das Kennwort weiterhin ausgeblendet wird). Browser fordern nicht zum Speichern von Passwörtern auf, die in Klartextfeldern gespeichert sind.jQuery-Plugin:
https://github.com/cubiclesoft/php-flexforms-modules/blob/master/password-manager/jquery.stoppasswordmanager.js
Relevanter Quellcode über den obigen Link:
(function($) { $.fn.StopPasswordManager = function() { return this.each(function() { var $this = $(this); $this.addClass('no-print'); $this.attr('data-background-color', $this.css('background-color')); $this.css('background-color', $this.css('color')); $this.attr('type', 'text'); $this.attr('autocomplete', 'off'); $this.focus(function() { $this.attr('type', 'password'); $this.css('background-color', $this.attr('data-background-color')); }); $this.blur(function() { $this.css('background-color', $this.css('color')); $this.attr('type', 'text'); $this[0].selectionStart = $this[0].selectionEnd; }); $this.on('keydown', function(e) { if (e.keyCode == 13) { $this.css('background-color', $this.css('color')); $this.attr('type', 'text'); $this[0].selectionStart = $this[0].selectionEnd; } }); }); } }(jQuery));
Demo:
https://barebonescms.com/demos/admin_pack/admin.php
Klicken Sie im Menü auf "Eintrag hinzufügen" und scrollen Sie zum Ende der Seite zu "Modul: Passwort-Manager stoppen".
quelle
Sie können Ihre Benutzer auffordern, das Speichern des Kennworts für Ihre Site zu deaktivieren. Dies kann browserweit oder originensweit erfolgen.
Sie können auch erzwingen, dass die Eingaben leer sind, nachdem die Seite geladen wurde (und nachdem der Browser die Felder automatisch ausgefüllt hat). Fügen Sie dieses Skript am Ende des
<body>
Elements ein.userIdInputElement.value = ""; userPasswordInputElement.value = "";
quelle
Ich würde eine Sitzungsvariable erstellen und sie zufällig sortieren. Erstellen Sie dann die ID- und Namenswerte basierend auf der Sitzungsvariablen. Fragen Sie dann beim Anmelden die von Ihnen erstellte Sitzungsvariable ab.
if (!isset($_SESSION['autoMaskPassword'])) { $bytes = random_bytes(16); $_SESSION['autoMask_password'] = bin2hex($bytes); } <input type="password" name="<?=$_SESSION['autoMaskPassword']?>" placeholder="password">
quelle
Dazu habe ich das Eingabefeld als "Text" festgelegt und die Eingabetasten abgefangen und bearbeitet
Aktivieren Sie zuerst eine Funktion zum Fangen von Tasten
yourInputElement.addEventListener('keydown', onInputPassword);
Die Funktion onInputPassword sieht folgendermaßen aus: (vorausgesetzt, Sie haben die Variable "password" irgendwo definiert)
onInputPassword( event ) { let key = event.key; event.preventDefault(); // this is to prevent the key to reach the input field if( key == "Enter" ) { // here you put a call to the function that will do something with the password } else if( key == "Backspace" ) { if( password ) { // remove the last character if any yourInputElement.value = yourInputElement.value.slice(0, -1); password = password.slice(0, -1); } } else if( (key >= '0' && key <= '9') || (key >= 'A' && key <= 'Z') || (key >= 'a' && key <= 'z') ) { // show a fake '*' on input field and store the real password yourInputElement.value = yourInputElement.value + "*"; password += key; } }
Daher werden alle alphanumerischen Schlüssel zum Kennwort hinzugefügt, die Rücktaste löscht ein Zeichen, die Eingabetaste wird beendet und alle anderen Schlüssel werden ignoriert
Vergessen Sie nicht, removeEventListener ('keydown', onInputPassword) irgendwo am Ende aufzurufen
quelle
Es funktioniert gut für ein Passwortfeld, um zu verhindern, dass es sich an seinen Verlauf erinnert:
$('#multi_user_timeout_pin').on('input keydown', function(e) { if (e.keyCode == 8 && $(this).val().length == 1) { $(this).attr('type', 'text'); $(this).val(''); } else { if ($(this).val() !== '') { $(this).attr('type', 'password'); } else { $(this).attr('type', 'text'); } } });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="text" id="multi_user_timeout_pin" name="multi_user_pin" autocomplete="off" class="form-control" placeholder="Type your PIN here" ng-model="logutUserPin">
quelle
Ich ändere einfach das Typattribut des Feldkennworts in versteckt vor dem Klickereignis:
document.getElementById("password").setAttribute("type", "hidden"); document.getElementById("save").click();
quelle
In einer solchen Situation fülle ich das Kennwortfeld mit zufälligen Zeichen, kurz nachdem das ursprüngliche Kennwort vom internen JavaScript-Code abgerufen wurde, jedoch kurz vor dem Absenden des Formulars.
HINWEIS: Das tatsächliche Passwort wird vom Formular sicherlich für den nächsten Schritt verwendet. Der Wert wird zuerst in ein verstecktes Feld übertragen. Siehe das Codebeispiel.
Auf diese Weise ist es nicht wirklich das Passwort, das der Benutzer dort gegeben hat, wenn der Passwort-Manager des Browsers das Passwort speichert. So denkt der Benutzer das Passwort gespeichert wurde, obwohl tatsächlich zufällige Dinge gespeichert wurden. Mit der Zeit würde der Benutzer wissen, dass er dem Passwort-Manager nicht vertrauen kann, dass er die richtige Arbeit für diese Site erledigt.
Dies kann nun zu einer schlechten Benutzererfahrung führen. Ich weiß, weil der Benutzer möglicherweise das Gefühl hat, dass der Browser das Passwort tatsächlich gespeichert hat. Bei ausreichender Dokumentation kann der Benutzer jedoch getröstet werden. Ich bin der Meinung, dass man auf diese Weise völlig sicher sein kann, dass das vom Benutzer eingegebene Passwort nicht vom Browser erfasst und gespeichert werden kann.
<form id='frm' action="https://google.com"> Password: <input type="password" id="pwd" /> <input type='hidden' id='hiddenpwd' /> <button onclick='subm()'>Submit this</button> </form> <script> function subm() { var actualpwd = $('#pwd').val(); $('#hiddenpwd').val(actualpwd); // ...Do whatever Ajax, etc. with this actual pwd // ...Or assign the value to another hidden field $('#pwd').val('globbedygook'); $('#frm').submit(); } </script>
quelle