So verhindern Sie, dass ein Browser Kennwörter speichert

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?

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');"Attribute autocomplete="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.

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

Moderne Browser implementieren eine integrierte Kennwortverwaltung: Wenn der Benutzer einen Benutzernamen und ein Kennwort für eine Site eingibt, bietet der Browser an, diese für den Benutzer zu speichern. Wenn der Benutzer die Site erneut besucht, füllt der Browser die Anmeldefelder automatisch mit den gespeicherten Werten.

Darüber hinaus ermöglicht der Browser dem Benutzer die Auswahl eines Hauptkennworts, mit dem der Browser gespeicherte Anmeldedaten verschlüsselt.

Auch ohne ein Hauptkennwort wird die Kennwortverwaltung im Browser im Allgemeinen als Nettogewinn für die Sicherheit angesehen . Da sich Benutzer keine Kennwörter merken müssen, die der Browser für sie speichert, können sie stärkere Kennwörter auswählen als sonst.

Aus diesem Grund unterstützen viele moderne Browser keineautocomplete="off" Anmeldefelder:

• Wenn eine Site autocomplete="off"für ein Formular festgelegt ist und das Formular Eingabefelder für Benutzername und Kennwort enthält, bietet der Browser weiterhin an, sich diese Anmeldung zu merken. Wenn der Benutzer zustimmt, füllt der Browser diese Felder beim nächsten Besuch der Seite automatisch aus.

• Wenn auf einer Site autocomplete="off"Eingabefelder für Benutzername und Kennwort festgelegt sind, bietet der Browser weiterhin an, sich diese Anmeldung zu merken. Wenn der Benutzer zustimmt, füllt der Browser diese Felder beim nächsten Besuch der Seite automatisch aus.

Dies ist das Verhalten in Firefox (seit Version 38), Google Chrome (seit 34) und Internet Explorer (seit Version 11).

Wenn ein Autor das automatische Ausfüllen von Kennwortfeldern auf Benutzerverwaltungsseiten verhindern möchte, auf denen ein Benutzer ein neues Kennwort für eine andere Person als sich selbst angeben kann, autocomplete="new-password"sollte dies angegeben werden, obwohl die Unterstützung dafür noch nicht in allen Browsern implementiert wurde.

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 CSS text-security:disc zum Nachahmen type="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 es font-family: 'dotsfont';.

  Quelle: Geben Sie den Eingabetyp = Text so ein, dass er wie Typ = Kennwort aussieht

  Die obige Quelle enthält einen Link zu einer Problemumgehung für CSS moz-text-security und -webkit-text-securityEigenschaften.

  Quelle: https://github.com/kylewelsby/dotsfont

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.

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>

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.

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>

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

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 Formularsubmit (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 onsubmitlöschen, aber der Browser scheint die Werte vor dem Ereignishandler zu überprüfen und fordert den Benutzer auf, das Kennwort zu speichern. Wenn das alertam Ende nicht passwordchangekommentiert 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"/>

< 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');
  });
}

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>

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.

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.

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

Eine Möglichkeit wäre, zufällige Eingabenamen zu generieren und mit ihnen zu arbeiten.

Auf diese Weise wird den Browsern newjedes 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.}

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 passwordund textTypen 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".

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 = "";

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

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

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

Ich ändere einfach das Typattribut des Feldkennworts in versteckt vor dem Klickereignis:

document.getElementById("password").setAttribute("type", "hidden");
document.getElementById("save").click();

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>