So verhindern Sie, dass ein Browser Kennwörter speichert

73

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?

Sree
quelle
1
Ich habe eine ähnliche Situation - eine interne Webanwendung mit einem Nur-Support-Tech-Bereich, in dem das Kennwort unsichere Funktionen der Anwendung freischaltet. Es wäre sehr schlecht, dem Endbenutzer Zugriff darauf zu gewähren. Ja, es gibt gültige Situationen, in denen Sie nicht möchten, dass Kennwörter gespeichert werden. Ich suche übrigens immer noch nach einer funktionierenden Antwort.
Semmelbroesel
Ein Anwendungsfall besteht darin, dass Benutzer einen Computer gemeinsam nutzen, sich jedoch als Einzelpersonen bei einer Webanwendung anmelden müssen.
Leif Neland
Meine Lösung ist ein bisschen wie ein Hack, aber ich habe JS verwendet, um das Feld zu räumen.
David Moritz
1
Ich empfehle den Leuten wirklich nicht, dies im Jahr 2020 zu tun, es sei denn, Sie haben eine ganz besondere Situation. Dies macht die Sicherheit schlechter. Benutzer sollten für jeden Dienst, den sie verwenden, ein eindeutiges Kennwort verwenden. Natürlich gibt es keine Möglichkeit, sich so viele eindeutige und nicht verwandte Passwörter zu merken, daher müssen Benutzer dazu einen Passwort-Manager verwenden. In allen großen Browsern sind solche eingebaut, und es gibt viele Optionen von Drittanbietern. Abgesehen von einigen Sonderfallausnahmen wird das Blockieren von Kennwortmanagern wahrscheinlich Ihre Sicherheit mehr beeinträchtigen als helfen.
Chris

Antworten:

48

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.

Sree
quelle
autocompleteAttribut wird von den Browsern nicht mehr unterstützt
csandreas1
2
versuchte dies, funktioniert auch nicht esp Firefox Dev Edition
Alexander
Meine Lösung ist ein bisschen wie ein Hack, aber ich habe JS verwendet, um das Feld zu räumen.
David Moritz
Auf meiner Anmeldeseite (MVC-Projekt) habe ich hinzugefügt: onfocus = "this.removeAttribute ('readonly');", onfocusout = "this.setAttribute ('readonly', 'readonly');" und es wirkt wie ein Zauber! sogar in FireFox 67.0.4 (64 Bit)! Dankeschön!
Entwickler
im Firefox-Browser funktioniert Version 84.0b8 (64-Bit) nicht.
Ajay Takur
39

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.

4castle
quelle
3
Es ist so einfach, ein Passwort in einem Browser anzuzeigen. Öffnen Sie einfach die Entwicklertools, ändern Sie den Eingabetyp von Kennwort in Text und voila! Da ist es.
Elroy Flynn
15
Es gibt Anwendungsfälle, in denen der Passwort-Manager keinen Sinn ergibt. Zum Beispiel ein Passwort ändern. autocomplete = "neues Passwort" funktioniert bei mir nicht wie bei Firefox 55.0.3 x64
Pancho
Danke, hat für mich gearbeitet und das ist sehr einfach. Ich verwende Chome Version 64.0.3282.186 (Official Build) (64-Bit)
A.Wie
6
Macht in Chrome 65 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! > :(
Doug McLean
1
Die Antwort ist falsch, da sie in vielerlei Hinsicht möglich ist, manche einfach und manche nicht so einfach, aber es ist möglich. Der Browser regelt nicht, wie Informationen dem Benutzer präsentiert werden, sondern formt sie nur.
Lucian Minea
15

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

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.

Natro90
quelle
4
Dies kann eine schlechte Idee sein, da das Kennwortfeld einige zusätzliche Sicherheitseigenschaften aufweist - z. B. dass der darin enthaltene Text nicht kopiert und eingefügt werden kann.
TXK
1
@tXK Ich stimme ohne dich zu .. aber du kannst Text mit einem schnellen Trick in ein Passwortfeld kopieren / einfügen, z. B. während du in Chrome mit der rechten Maustaste auf das Passwortfeld klickst, gehe zu inspizieren und ändere type = "password" in type = " Text".
Natro90
3
Das Kopieren / Einfügen sollte in Kennwortfeldern nicht als Problem angesehen werden, da dies die theoretische Grundlage für Kennwortmanager ist. Fragen Sie Troy Hunt.
Lorenzo Peña
Ich denke nicht, dass es eine gute Idee ist. Beispiel Wenn wir eine automatische Filer- oder Passwort-Manager-Erweiterung haben, wie das Passwortfeld erkannt wird, gibt es möglicherweise eine Option, um es zu finden. Aber es ist keine gute Lektion für Anfänger
Khurram Shaikh
Dies war die einzige Lösung, die bei React with Chrome tatsächlich für mich funktioniert hat.
Luis Febro
10

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>

Simon Briggs
quelle
Genius! :) Ich würde ihm aber einen Wert geben, wie value = "x". Und ich würde keine Anzeige verwenden: keine, sondern eine absurde Stelle außerhalb des Fensters oder einen negativen Z-Index.
FlorianB
Was ist mit <input type = "hidden">?
qd0r
In der Browser-Version Firefox 84.0b5 (64-Bit) funktioniert dies nicht.
Ajay Takur
9

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.

alexk
quelle
6

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>
Gaurav Singh
quelle
3

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

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

JPortillo
quelle
1
< 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');
  });
}
Andrew Andrew
quelle
Eine Erklärung wäre angebracht.
Peter Mortensen
0

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>
Ivan Moran
quelle
Achtung: Nicht alle Browser unterstützen das Attribut "Autocomplete"!
Summsel
0

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.

Ratnakar Reddy
quelle
0

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.

DivineCoder
quelle
0

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

HirenMangukiya
quelle
0

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.

Peter Mortensen
quelle
Dies funktioniert nicht - der Passwort-Manager fordert auf, auch wenn das Feld keinen Namen oder keine ID hat (auf Firefox sowieso)
Pancho
0

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

CubicleSoft
quelle
Für diese Demo bittet Chrome, das Passwort Version 65.0.3325.146
J. Allen
Bestätigt. Chrome 63 scheint dieses Verhalten nicht zu haben. Wenn Sie in Chrome 64 die Eingabetaste drücken, wird das Formular gesendet, BEVOR der Unschärfehandler für das Element aufgerufen wird und Chrome daher das Kennwortfeld sieht. Wenn Sie jedoch zuerst außerhalb des Elements klicken und dann senden, beschwert sich Chrome nicht. Scheint mir ein Fehler in Chrome zu sein: Das Senden eines Formulars sollte vor dem Senden immer alle relevanten Ereignishandler für das fokussierte Element aufrufen, da möglicherweise ein Validierungscode ausgeführt werden muss, der das Senden des Formulars verhindert. Sowohl Firefox als auch Edge machen hier das Richtige.
CubicleSoft
Der obige Fehler und ein weiterer Fehler, auf den ich gestoßen bin, wurden behoben.
CubicleSoft
Dieses Update funktioniert dahingehend, dass das Popup ausgeblendet wird. Es gibt jedoch immer noch eine Möglichkeit, das Kennwort anzuzeigen. Der Benutzer kann auf das Schlüsselsymbol in der Chrome-URL-Leiste klicken und, wenn er das Kontokennwort des Betriebssystems kennt, das zuletzt bekannte Kennwort anzeigen, das in eine Kennworteingabe eingegeben wurde. Soweit ich weiß, muss das Formular nicht einmal eingereicht werden. Das Aktualisieren der Seite vor dem Einreichen reicht jetzt noch nicht einmal aus. Meine Theorie ist also, dass es jetzt sein muss, Tastenanschläge direkt in einen beliebigen Eingabetyp = Passwort aufzuzeichnen und keine Dom-Elemente nachträglich zu lesen.
J. Allen
Daher wird Chrome mit einem eigenen Kennwort-DOM-Logger geliefert. Fantastisch. Das ist genau das, was jeder brauchte. Die Funktion des Webbrowsers ist defekt. Firefox und Edge haben dieses Problem nicht. Es kann nicht viel getan werden, außer der Hoffnung, dass Google die Nicht-Funktion fallen lässt, es sei denn, jemand möchte verrückt werden und ein Passwortfeld vollständig in Javascript emulieren.
CubicleSoft
0

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 = "";
Walle Cyril
quelle
0

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">
Natdrip
quelle
0

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

user4406260
quelle
-1

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

Saqib Khan
quelle
-1

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

document.getElementById("password").setAttribute("type", "hidden");
document.getElementById("save").click();
Jose Mesquita
quelle
-1

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>
S. Francis
quelle
@AristeidisKaravas Mehrere Banking-Apps im Web verwenden diese Methode, um sicherzustellen, dass das tatsächliche Passwort niemals gespeichert wird. Sie füllen das Passwortfeld mit beliebigen Zeichen, um den Passwort-Manager des Browsers zu verwirren
S. Francis