web-dev-qa-db-fra.com

Comment désactiver le paramètre d'invite de mot de passe enregistré de Chrome via JavaScript

 Chrome pop up bubble

Est-il possible de manipuler les paramètres de Chrome à l'aide de JavaScript ou de jQuery? Je souhaite désactiver la bulle contextuelle d'enregistrement du mot de passe à l'aide de JavaScript. Comment faire ça?

javascriptjquerygoogle-chrome
12
Jay Ponkia

Je vais maintenant répondre à ma propre question.

Cela peut être fait à la fois en chrome et en mozilla fire fox.

Pour chrome

Tout d'abord, vous devez obligatoirement supprimer l'attribut "mot de passe" du type d'entrée.

La principale raison derrière cela est lorsque vous prenez input type = "text" et que input type = "password" est affiché dans la fenêtre principale du navigateur. Parce que les navigateurs ont une fonctionnalité intégrée pour afficher cette fenêtre lorsque vous prenez input type = "password".

Nous pouvons maintenant manipuler le chrome à partir de ça.

Voici un exemple

<html>
<head>
   <title> Remove Save Password Pop Up For Chrome </title>
   <style>
       #txtPassword{
           -webkit-text-security:disc;
       }
   </style>
</head>
<body>
   <input type="text" id="txtUserName" />
   <br />
   <input type="text" id="txtPassword" />
   <br />
</body>
</html>

C'est la propriété css qui est utilisée pour transformer le texte en puces.

Pour Mozilla

Vous ne pouvez pas faire cela en mozilla. Parce que -moz-text-security est obsolète. Cela ne fonctionne pas dans Mozilla.

Mais nous pouvons aussi manipuler Mozilla.

Il existe maintenant une liste de codes de caractères au format HTML pris en charge par tous les principaux navigateurs.

De ce code de caractère pour bullet est "•". Lorsque vous écrivez ce code en html, la puce sera imprimée comme ceci "•"

Maintenant, nous pouvons remplacer le champ de texte avec ces puces

Mais il y a une limite à cela. Vous ne pouvez pas imprimer de puces dans la zone de texte. Mais il y a aussi une solution pour cette limitation. Parce que tout est possible dans le monde de la programmation.

Pour cette limitation, nous pouvons faire fake div qui affiche des puces lorsque vous écrivez le mot de passe.

Voici un exemple.

<html>
<head>
  <title> Remove Save Password Pop Up For Mozilla </title>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript">
  <script>
      function RemoveSavedPassword() {
         if (jQuery.browser.webkit == undefined) {
             inputValue = $('.real-input').val();
             numChars = inputValue.length;
             showText = "";
        for (i = 0; i < numChars; i++) {
            showText += "&#8226;";
        }
        $('.fake-input').html(showText);
    }
 }
  </script>
</head>
<body>
    <div class="input-box">
       <label>Enter password:</label>
       <div class="fake-input"></div>
       <input type="text" onKeyUp="RemoveSavedPassword()" class="real-input">
    </div>
</body>
</html>

Maintenant, il y a la magie de CSS. La magie signifie la puissance des attributs de marge, de remplissage, d'opacité et de position que nous pouvons manipuler par l'utilisateur.

Voici le lien :

http://codepen.io/jay191193/pen/bVBPVa

Problème de sécurité

Pour le problème de sécurité de type d’entrée = "texte" au lieu de type d’entrée = "mot de passe", vous pouvez visiter ce lien:

Problème de sécurité lié au changement du type = "mot de passe" en type = "texte"

16
Jay Ponkia

Il n’existe pas de moyen de modifier les paramètres de Chrome directement à partir de JavaScript. La réponse suivante porte donc sur la manière d’empêcher l’apparition de cette boîte de dialogue pour une HTML spécifique form.

D'après ce que j'ai lu, l'attribut HTML5 autocomplete="off" est ignoré dans Chrome. Il ne vous sera pas demandé de sauvegarder le mot de passe même si vous indiquez l'attribut.

Il existe cependant une solution de contournement: si vous définissez le champ password pour qu'il soit en lecture seule jusqu'à ce qu'il soit activé, Chrome ne demandera pas de sauvegarder les informations d'identification. Malheureusement, à ma connaissance, il n’existe pas de bonne solution propre. C’est pourquoi la solution que je vous présente est un peu compliquée.

Consultez le JSFiddle dans Chrome et essayez de soumettre chaque formulaire pour voir la solution à l'action (vous devrez recharger le violon après chaque soumission): https://jsfiddle.net/g0e559yn/2/

Code complet:

/* Chrome does not ask to save the password from this form */

<form id="form1" action="/">
Name:<br />
<input type="text" name="userid" />
<br />
Password:<br />
<input type="password" readonly onfocus="$(this).removeAttr('readonly');" />
<br />
<button type="submit" form="form1" value="Submit">Submit</button>
</form>

/*Chrome asks to save the password from this form */

<form id="form2" action="/">
Name:<br />
<input type="text" name="userid" />
<br />
Password:<br />
<input type="password" name="psw" />
<br />
<button type="submit" form="form2" value="Submit">Submit</button>
</form>
11
Maximillian Laumeister

Je pense avoir trouvé une méthode difficile, mais efficace, pour empêcher le navigateur d’enregistrer le mot de passe Invite Ce n'est peut-être pas une très belle solution, mais cela a fonctionné pour moi.

Fabriqué avec jQuery.

J'espère que ça aide.

$('#modified span').on('click', function(e){
  e.preventDefault();
  $('#modified').submit();
});


//Clear the form on submit
$('form').on('submit', function(){
  $('form input[type="text"], form input[type="password"]').val('');
});
#modified input[type="submit"]{
  pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form>
  <h1>Browser IS asking to save password</h1>
  
  <input type="text" placeholder="Login"/>
  <input type="password" placeholder="Password"/>
  <input type="submit" value="Submit"/>
</form>

<form id="modified">
  <h1>Browser IS NOT asking to save password</h1>
  <input type="text" placeholder="Login"/>
  <input type="password" placeholder="Password"/>
  <span>
    <input type="submit" value="Submit"/>
  </span>
</form>

1
Aterr

Cette méthode fonctionne pour moi en chrome et mozilla, en l’utilisant dans mes projets:

<input type="text" name="email" onfocus="this.removeAttribute('readonly');" id="email" placeholder="Email Address" class="form-control" email="required email" required="">

Ajoutez onfocus="this.removeAttribute('readonly');" dans votre type d'entrée après cela, il ne se souviendra pas du mot de passe enregistré.

0
Bugfixer

Pour Chrome et Firefox 2018

SEULEMENT SI VOUS UTILISEZ AJAX:

Après avoir vérifié si le login et le mot de passe sont ok, effacez le champ de saisie du mot de passe

$.post("/auth", {login: $("#login").val(), pass: $("#password").val(); }, function(data){
   if (data == "auth is ok"){
     // clear password field
     $("#password").val(''); // <-- this will prevent browser to save password
   }
});
0
waza123

J'ai réussi à empêcher ce popup en ajoutant l'attribut type="button" au <button> qui déclenche l'événement.

J'avais compris les navigateurs pour accompagner le message "Voulez-vous enregistrer cet identifiant?" popup avec n'importe quel formulaire, mais je reçois ce popup même si vous utilisez un bouton en dehors d'un <form>. Je suppose que puisque le bouton par défaut est <button type="submit">, un clic sur celui-ci est considéré comme un formulaire soumis même si vous ne l'utilisez pas dans un <form>.

Testé dans les versions récentes de Firefox, Chrome, Edge.

0
Lucas Morgan