web-dev-qa-db-fra.com

Comment désactiver la bulle de sauvegarde du mot de passe en chrome à l'aide de Javascript?

Je dois pouvoir empêcher la bulle Enregistrer le mot de passe de s'afficher après la connexion d'un utilisateur.

Autocomplete = off n'est pas la solution.

Je n'ai pas trouvé d'article qui offre une solution sécurisée à ce problème. Est-il vraiment impossible de désactiver la bulle de mots de passe dans Chrome?

javascripthtmlangularjsgoogle-chromeinternet-explorer-8
36
Cognitronic

J'ai trouvé qu'il n'y a pas de moyen "supporté" de le faire.

Ce que j'ai fait était de copier le contenu du mot de passe dans un champ caché et de supprimer les entrées de mot de passe AVANT de le soumettre.

Comme il n'y a pas de champs de mots de passe sur la page lors de la soumission, le navigateur ne demande jamais de la sauvegarder.

Voici mon code javascript (utilisant jquery):

function executeAdjustment(){       
        $("#vPassword").val($("#txtPassword").val());
        $(":password").remove();        
        var myForm = document.getElementById("createServerForm");
        myForm.action = "executeCreditAdjustment.do";
        myForm.submit();
    }
19
Leon

Après des heures de recherche, j’ai proposé ma propre solution, qui semble fonctionner sous Chrome et Safari (mais pas dans Firefox ou Opera, et je n’ai pas testé IE). L'astuce consiste à entourer le champ de mot de passe de deux champs factices.

<input type="password" class="stealthy" tabindex="-1">
<input type="password" name="password" autocomplete="off">
<input type="password" class="stealthy" tabindex="-1">

Voici le CSS que j'ai utilisé:

.stealthy {
  left: 0;
  margin: 0;
  max-height: 1px;
  max-width: 1px;
  opacity: 0;
  outline: none;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  top: 0;
  z-index: -1;
}

Remarque: Les champs de saisie factices ne peuvent plus être masqués avec display: none comme beaucoup l'ont suggéré, car les navigateurs le détectent et ignorent les champs masqués, même si les champs eux-mêmes ne sont pas masqués mais sont placés dans un wrapper masqué. D'où la raison pour laquelle la classe CSS rend essentiellement les champs de saisie invisibles et non cliquables sans les "masquer".

16
Vadim

Ajoutez <input type="password" style="display:none"/> en haut de votre formulaire. La saisie semi-automatique de Chrome remplira la première entrée de mot de passe trouvée et l'entrée précédente. Cette astuce ne remplira donc que l'entrée invisible qui n'a pas d'importance.

4
erikkallen

La meilleure solution consiste à simuler le mot de passe saisi avec le texte saisi en remplaçant la valeur par des astérisques ou des points manuellement.

3
Issam Zoli
<input type="textbox" id="UserID" />
<input type="password" style="display:none"/>
<input type="textbox" id="password" />

<script>
  function init() {
       $('#password').replaceWith('<input type="password" id="password" />');
  }     
</script>

testé dans Firefox et Chrome fonctionnant comme prévu.

2
Ramakrishnan M

Je n'ai trouvé aucune alternative avec tous les avantages dont j'avais besoin, j'ai donc créé un nouveau. 

HTML

<input type="text" name="password" class="js-text-to-password-onedit">

jQuery (remplacez par Vanilla JS avec la même logique si vous n'utilisez pas jQuery)

$('.js-text-to-password-onedit').focus(function(){
    el = $(this);
    el.keydown(function(e){
      if(el.prop('type')=='text'){
        el.prop('type', 'password');
      }
    });
    // This should prevent saving Prompt, but it already doesn't happen. Uncomment if nescessary.
    //$(el[0].form).submit(function(){
    //  el.prop('readonly', true);
    //});
});

Avantages:

  • Ne déclenche pas l'invite
  • Ne déclenche pas le remplissage automatique (pas de chargement de page, ni de changement de type)
  • N'affecte que les entrées réellement utilisées (autorisant le clonage/la modélisation d'éléments non perturbés dans des environnements complexes)
  • Sélecteur par classe
  • Simple et fiable (pas de nouveaux éléments, conserve les événements js attachés, le cas échéant)
  • Testé et fonctionne sur les derniers Chrome 61, Firefox 55 et IE11 à compter d'aujourd'hui
1
Alph.Dev

Ma propre solution jQuery avec PrimeFaces. Travail testé dans Chrome et Internet Explorer mais dans Mozilla Firefox (mais pas dans Firefox)

<script  type="text/javascript" charset="utf-8">
$(function(){
    $('#frmLogin').on('submit',function(e){

        $(PrimeFaces.escapeClientId('frmLogin:usuario')).replaceWith('<label id="frmLogin:usuario1" type="text" name="frmLogin:usuario1" autocomplete="off" class="form-control" maxlength="8"  tabindex="2"/>');
        $(PrimeFaces.escapeClientId('frmLogin:password')).replaceWith('<label id="frmLogin:password1" type="password" name="frmLogin:password1" autocomplete="off" value="" tabindex="3" class="form-control"/>');
        $(PrimeFaces.escapeClientId('frmLogin:password1')).attr("autocomplete","off");
        $(PrimeFaces.escapeClientId('frmLogin:usuario1')).attr("autocomplete","off");
        $(PrimeFaces.escapeClientId('frmLogin:password_hid')).attr("autocomplete","off");
        $(PrimeFaces.escapeClientId('frmLogin:usuario_hid')).attr("autocomplete","off");

    });
});
</script>

 

<h:inputSecret id="password" value="#{loginMB.password}" class="form-control" 
    placeholder="Contraseña" tabindex="3"  label="Contraseña" autocomplete="off" disabled="#{loginMB.bdisabled}"/>
    <p:inputText value="#{loginMB.password_hid}" id="password_hid" type="hidden" />
0
Edgard Jaime Hernandez Montero

J'ai subverti ceci en utilisant 2 zones de texte standard. Un pour contenir le mot de passe actuel et un pour fonctionner en tant que masque. J'ai ensuite défini l'opacité de la zone de mot de passe sur 0 et la zone de texte du masque est désactivée, mais la couleur d'arrière-plan est définie sur le blanc, ce qui la rend active. Ensuite, je place la zone de mot de passe sur la zone de masque. Dans une fonction jscript, je mets à jour la valeur textuelle du masque pour afficher une chaîne de caractères '*' avec chaque pression de touche dans la zone de mot de passe. Deux inconvénients: le curseur clignotant peut maintenant apparaître en fonction de votre navigateur. Cela se voit dans IE, mais pas Chrome ou Firefox. Il y a un peu de retard lorsque l'utilisateur tape.

Mon extrait de code est en asp:

$(window).ready(function() {
  var pw = $('#txtPassword');
  var mask = $('#txtMask');
  $(pw).css('opacity', '0');
  $(pw).keyup(function() {
    var s = '';
    for (var i = 0; i < $(pw).val().length; i++)
      s = s + '*';
    mask.val(s);
  })
});
style... .password {
  font-family: monospace;
  position: absolute;
  background-color: white;
}
Asp.net code:
<asp:TextBox runat="server" CssClass="password" Width="300" ID="txtMask" ClientIDMode="Static" MaxLength="30" Enabled="false" />
<asp:TextBox runat="server" CssClass="password" Width="300" ID="txtPassword" ClientIDMode="Static" MaxLength="30" />

0
GDev

La seule chose qui a fonctionné pour moi a été d'ajouter un espace à la valeur de l'entrée après la préparation du document, puis de supprimer l'espace lorsque l'utilisateur s'est concentré sur l'entrée.

$('.login-input').val(' ');
$('.login-input').on('focus', function() {
    $(this).val('');
});

Simple et facile. Fonctionne sur Chrome 64. Dans Firefox, il suffit d’ajouter l’attribut autocomplete="off" à l’entrée.

0
Sevban Öztürk

J'ai traité cela avec le balisage suivant.

#txtPassword {
  -webkit-text-security: disc;
}
<form autocomplete="off">
  <input type="text" name="id" autocomplete="off"/>
  <input type="password" id="prevent_autofill" autocomplete="off" style="display:none" tabindex="-1" />
  <input type="password" name="password" id="txtPassword" autocomplete="off"/>
  <button type="submit" class="login100-form-btn">Login</button>
</form>

0
Prasanna Jathan

J'ai eu deux problèmes avec la façon dont les navigateurs vous imposent le comportement de leur mot de passe lorsque vous travaillez sur une page de connexion réservée au support dans une page normale (la connexion au support ne doit jamais être enregistrée):

  1. Le navigateur vous recommandera une connexion à partir du reste de la page, ce qui vous gênera.
  2. Le navigateur vous demandera de sauvegarder le mot de passe technique entré.

J'ai donc combiné deux solutions trouvées sur différents postes de stackoverflow et j'ai pensé les poster ici. J'utilise jQuery, mais le principe peut également être traduit en JavaScript.

Tout d’abord, faites que votre champ de mot de passe commence par un champ de texte et que JavaScript soit modifié ultérieurement - cela donne une bonne chance que le navigateur ne propose pas de mot de passe enregistré.

Deuxièmement, juste avant de soumettre le formulaire, définissez de nouveau le mot de passe sur un champ de texte, mais masquez-le d'abord afin que le mot de passe ne soit pas visible. Cela pourrait sembler plus joli en ajoutant un autre champ de texte lorsque le champ de mot de passe disparaît, mais ce n'est que cosmétique.

<form id="techForm" action="...">
<input type="text" id="username" name="username">
<input type="text" id="password" name="password"> <!-- this needs to start as a text field -->
<input type="submit" name="submit" value="submit">
</form>
<script type="text/javascript">
$(function()
{
  $('#password').on('focus', function()
  {
    $(this).prop('type', password');  // this stops pre-saved password offers
  });
  $('#techForm').on('submit', function()
  {
    $('#password').hide().prop('type', 'text');  // this prevents saving
  });
});
</script>

Cela a fonctionné pour moi sur Firefox et Chrome à partir du 12/09/2017.

0
semmelbroesel