it-swarm.com.de

So verhindern Sie, dass ein Browser ein Kennwort 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. Aber es funktioniert nicht in den neuesten Browsern wie Chrome 55, Firefox 38+, IE 11 ... etc.

Was ist die beste Lösung dafür?

34
Sree

Danke, dass Sie mir eine Antwort gegeben haben. Ich folgte dem untenstehenden Link

Deaktiviere die Browser-Funktion "Passwort speichern"

Ich habe das Problem behoben, indem ich den Eingaben readonly & onfocus="this.removeAttribute('readonly');" neben autocomplete="off" nur die unten angegebenen Eingaben hinzufügte.

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

24
Sree

Dies ist in modernen Browsern nicht möglich, und das aus gutem Grund. Moderne Browser bieten Passwort-Manager, mit denen Benutzer stärkere Passwörter verwenden können, als dies normalerweise der Fall wäre.

Wie von MDN erklärt: So deaktivieren Sie die automatische Autovervollständigung von Formularen :

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

Darüber hinaus ermöglicht der Browser dem Benutzer die Wahl eines Master-Passworts, das der Browser zum Verschlüsseln gespeicherter Anmeldedaten verwendet.

In-Browser-Kennwortverwaltung wird im Allgemeinen auch ohne ein Master-Kennwort als ein Gewinn für die Sicherheit angesehen. Da Benutzer sich keine Passwörter merken müssen, die der Browser für sie speichert, können sie stärkere Passwörter wählen, als sie es sonst tun würden.

Aus diesem Grund unterstützen viele moderne Browser autocomplete="off" nicht für Anmeldefelder:

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

  • Wenn eine Site autocomplete="off" für die Eingabefelder für Benutzername und Kennwort festlegt, bietet der Browser an, sich an diese Anmeldung zu erinnern. 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 in Benutzerverwaltungsseiten verhindern möchte, auf denen ein Benutzer ein neues Kennwort für eine andere Person als sich selbst angeben kann, sollte autocomplete="new-password" angegeben werden, obwohl dies noch nicht in allen Browsern unterstützt wurde.

26
4castle

Hier ist eine reine HTML/CSS - Lösung für Chrome, die in Version 65.0.3325.162 (Official Build) (64-Bit) getestet wurde.

Setzen Sie die Eingabe type="text" und verwenden Sie CSStext-security:disc, um type="password" nachzuahmen.

<input type="text" name="username">
<input type="text" name="password" style="text-security:disc; -webkit-text-security:disc;">
  • Hinweis: Funktioniert in FireFox, aber CSSmoz-text-security ist Veraltet/Entfernt. Um dies zu beheben, erstellen Sie einen CSSfont-face, der nur aus Punkten besteht, und verwenden Sie font-family: 'dotsfont';

    Quelle: Liefert die Eingabe Typ = Text, um wie folgt aussehen Typ = Passwort

    Die Quelle oben enthält einen Link zu einer Problemumgehung für die Eigenschaft CSSmoz-text-security und -webkit-text-security.

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

    Soweit ich getestet habe, funktioniert diese Lösung für Chrome, FireFox Version 59.0 (64-Bit), IE Version 11.0.9600 sowie für IE Emulatoren ie5 und größer.

4
Natro90

Sie sollten in der Lage sein, eine gefälschte versteckte Kennwortbox 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>
3
Simon Briggs

Standardmäßig gibt es keine richtige Antwort, um das Speichern des Passworts in Ihrem Browser zu deaktivieren. Aber zum Glück gibt es einen Ausweg und es funktioniert auf fast allen Browsern.

Um dies zu erreichen, fügen Sie eine Dummy-Eingabe direkt vor der eigentlichen Eingabe mit autocomplete = "off" und einem benutzerdefinierten Stil hinzu, um sie auszublenden und tabIndex bereitzustellen. Die automatische Vervollständigung des Browsers (Chrome) füllt die erste gefundene Passworteingabe und die vorherige Eingabe aus. Mit diesem Trick wird also nur eine unsichtbare Eingabe ausgefüllt, 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>
2
Gaurav Singh

versuchen Sie dies, es kann Ihnen helfen. Weitere Informationen finden Sie unter Eingabetyp = Passwort, Browser nicht an das Passwort erinnern

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

0
HirenMangukiya

Sie können Ihre Benutzer dazu auffordern, das Speichern des Kennworts für Ihre Site zu deaktivieren. Dies kann browser- oder originweit erfolgen.

Etwas anderes können Sie tun, um zu erzwingen, dass die Eingaben nach dem Laden der Seite (und nachdem der Browser die Felder automatisch ausgefüllt hat) leer sind. Setzen Sie dieses Skript am Ende des <body>-Elements.

userIdInputElement.value = "";
userPasswordInputElement.value = "";
0
Walle Cyril

Das ist 100% Arbeit zum Entfernen eines Wertes von TExtBox

input type="password" readonly onfocus="this.removeAttribute('readonly')"

Wenn wir schreibgeschützt verwenden, als wir dieses Attribut entfernen können, können wir den TextBox-Wert entfernen.

Warum funktioniert die automatische Vervollständigung nicht? Weil Ihr Browser nicht unterstützt wird

0
Paresh Shiyal

Ich denke, dass dies in aktuellen Browsern nicht möglich ist ... Nur wenn Sie dies tun können, nehmen Sie ein anderes verstecktes Kennwortfeld und verwenden Sie es für Ihre Logik, nachdem Sie den Wert aus dem sichtbaren Kennwortfeld übernommen haben, und übergeben Sie den Dummy-String in das sichtbare Kennwortfeld. In diesem Fall kann der Browser eine Dummy-Zeichenfolge anstelle des tatsächlichen Kennworts speichern.

0
Ratnakar Reddy

Ich brauchte dies vor einigen Jahren für eine bestimmte Situation: Zwei Personen, die ihre Netzwerkkennwörter kennen, greifen gleichzeitig auf dieselbe Maschine zu, um eine rechtliche Vereinbarung zu unterzeichnen. Sie möchten keines dieser Passwörter in dieser Situation speichern, da das Speichern eines Passworts ein rechtliches Problem ist und kein technisches Problem, bei dem die physische und zeitliche Anwesenheit beider Personen zwingend erforderlich ist. Nun, ich stimme zu, dass dies eine seltene Situation ist, aber es gibt solche Situationen, und integrierte Kennwortmanager in Webbrowsern sind nicht hilfreich.

Meine technical -Lösung für das Obige bestand darin, zwischen den Typen password und text zu tauschen und die Hintergrundfarbe an die Textfarbe anzupassen, wenn das Feld ein reines Textfeld ist (wodurch das Kennwort weiterhin ausgeblendet wird). Browser bitten nicht, Kennwörter zu speichern, die in Klartextfeldern gespeichert sind.

jQuery-Plugin:

https://github.com/cubiclesoft/php-flexforms-modules/blob/master/password-manager/jquery.stoppasswordmanager.js

Relevanter Quellcode aus dem 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 unteren Seitenrand zu "Modul: Stop Password Manager".

0
CubicleSoft

Die oben angegebene Lösung ist zwar sehr korrekt, aber wenn Sie die Funktion unbedingt benötigen, können Sie die Situation mit benutzerdefinierten Eingaben mithilfe von Textfeldern und Javascript nachahmen.

Zur sicheren Verwendung können Sie eine beliebige Verschlüsselungstechnik verwenden. Auf diese Weise umgehen Sie das Kennwortspeicherverhalten des Browsers. 

Wenn Sie mehr über die Idee erfahren möchten, besprechen wir dies im Chat. Aber der Gist wird oben besprochen und Sie können die Idee bekommen.

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

Eine Möglichkeit wäre, Zufallsnamen zu generieren und damit zu arbeiten.

Auf diese Weise wird den Browsern jedes Mal das Formular new angezeigt, und die Eingabefelder können nicht vorbelegt werden .. Wenn Sie uns Beispielcode zur Verfügung stellen (haben Sie eine js spa app oder ein serverseitiges Rendering)? Gerne helfe ich Ihnen bei der Umsetzung.

Grüße,

0
user4754887

Ich habe alle Antworten gelesen und war fast bereit, es nicht selbst zu tun, da ich hier bereits ein paar Antworten gesehen habe, aber dann habe ich beschlossen, alle oben genannten zusammenzufassen.

Die kurze Antwort, basierend auf der HTML-Sprache und den Regeln, ist, dass Sie nicht können. Dies ist jedoch eine Antwort, die nur die Faulen verwenden. Jeder mittelqualifizierte Programmierer weiß, dass das Erstellen von Software 90% der Zeit bedeutet, über den Tellerrand zu schauen.

Programmiersprachen sind wie die Schreinerwerkzeuge, sie diktieren nicht die Endergebnisse, sie helfen nur dem Schreiner, dorthin zu gelangen.

Bei unserem Problem gibt es zwei Lösungen: reines HTML und Javascript. Zuerst müssen Sie verstehen, wie der Browser herausfindet, welche Art von Eingabe Sie haben. Es wird immer nach einem Paar aus Text und Passwort, E-Mail und Passwort sowie in seltenen Fällen nach Telefon und Passwort gesucht.

Die reine HTML-Lösung ist, wie von Gaurav Singh beantwortet, ein Dummy-Eingabefeld (versteckt) über dem Passwort zu platzieren, das der Browser mit dem Passwortfeld zu koppeln versucht. Diese Art der Problemumgehung ist einigen Browsern bereits bekannt, sodass das ausgeblendete Feld nicht mehr funktioniert. In diesem Fall fügen Sie einfach einige CSS-Regeln hinzu, um die Dummy-Eingabe außerhalb des Bildschirms zu positionieren und auf eine Größe von 0 Pixel zu bringen.

Die Javascript-Lösung wird verwendet, um die Felder nach dem Laden des Dokuments zu generieren und dem Benutzer zu präsentieren, falls der Browser nicht mehr darauf achtet. Wie es gemacht wird, hängt wirklich davon ab, wie viel Sicherheit Sie möchten (wirklich) und wie viel von der Verfolgung des Codes (falls Sie nicht wussten, dass der JS-Code vollständig verfolgt werden kann) Sie an Ort und Stelle haben möchten.

Später editieren: Ich habe vergessen zu erwähnen, dass Sie, um zu funktionieren, das clasic submit in einem Formular nicht verwenden können, die Werte per JS, AJAX oder auf eine andere Art und Weise senden müssen, aber es ist auch möglich zurückverfolgt werden.

Persönlich verwende ich gerne die Dummy-Eingabe, nur weil es keine Sicherheitsprobleme gibt. Übrigens ist das Sichern einer Anmeldeseite eine einfache Aufgabe, die nur von den "Spezialisten" kompliziert wird, die sagen, dass dies nicht der Fall ist. Das einzige wirkliche Problem des Anmeldevorgangs ist die Sicherheit des Verarbeitungsskripts, um sicherzustellen, dass der Benutzer nicht versucht, dort etwas einzuspritzen. Davon abgesehen gibt es überhaupt nichts.

Ich hoffe es hilft !

Noch später bearbeiten:

Entschuldigung, ich habe vergessen, dies für die HTML-Lösung zu erwähnen. Sie benötigen mindestens 2-3 Dummy-Passworteingaben, andernfalls wählt der Browser nur das tatsächliche Passwort aus. Mir scheint, die Browser geben ihr Bestes, um Ihre Daten auszuwählen ... irgendwie seltsam.

0
Lucian Minea

Hier ist meine Lösung ab dem 1. Tag (ab dem Datum dieses Beitrags). Sie fügt der ausgewählten Kennwort-ID Listener hinzu und verlässt sich nicht auf ausgeblendete Formularfelder. Dies sind webkitspezifische CSS-Regeln.

Ich musste den Code hier einfügen, aber die Fiddler-Version für den vollständigen HTML-Code und die Beschreibung anzeigen.

https://jsfiddle.net/AdamWhateverson/hLbztn0a/

  <script type="text/javascript" id="pwsremover" data-fieldid="my_password">
  if (document.addEventListener) {
    var _PWH = {
      selected: false,
      touched: true,
      init: function() {

        // The script must always have the id of 'pwsremover'
        var pw = document.getElementById('pwsremover');

        // You need set the 'data-fieldid' attribute on the script tag to ensure
        // the id of your password input field is passwed in
        var fi = pw.dataset.fieldid;

        // Convert password to text type
        var ff = document.getElementById(fi);
        ff.type="text";
        var h = ff.outerHTML+"";
        ff.outerHTML = h;

        // Attach event handlers
        var passSelected = false
        document.addEventListener("selectionchange", function(ev) {
          var ae = ev.target.activeElement;
          if (ae.id == "login_pass") {
            var kc = ev.keyCode;
            var ss = ae.selectionStart;
            var se = ae.selectionEnd;
            var sl = Math.max(ae.selectionStart, ae.selectionEnd);
            var il = ae.value.length;
            _PWH.selected = (ss == 0 && se > 0 && sl == il) || ((kc == 8 || kc == 46) && il == 1);
          }
        });
        var el = document.getElementById(fi);
        el.addEventListener("keydown", function(ev) {
          if (((ev.keyCode == 8 || ev.keyCode == 46) && this.value.length == 1) || _PWH.selected) {
            this.value = '';
            this.blur();
            this.focus();
            _PWH.selected = false;
          }
        });
        el.addEventListener("mousedown",function(ev){
            if(_PWH.touched){
                _PWH.touched=false;
                return;
            }
            this.type='text';
        });
        el.addEventListener("touchstart",function(ev){
            this.type='text';
            _PWH.touched = true;
            this.focus(); // ensures the keyboard popsup
        });
        el.addEventListener("focus",function(ev){
            this.type='password';
        });
      }
    }
    // Comment this out to disable
    _PWH.init();
  }
</script>
0

hTML Quelltext

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

jquery-Code

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

        });

funktioniert gut für das Passwortfeld, um zu verhindern, dass sich die Historie daran erinnert

0
Saqib khan