Google chrome remplit automatiquement toutes les entrées de mot de passe
Mon problème
J'ai dû activer google pour le remplissage automatique pour une connexion sur mon site. Cependant, il tente maintenant de remplir automatiquement ces données de connexion chaque fois que je souhaite modifier les informations de mon compte ou celles d'un autre utilisateur (en tant qu'administrateur). Il remplit mes données dans des endroits étranges. Le problème semble être que Chrome remplit automatiquement toute entrée avec un type de mot de passe, puis quelle que soit l'entrée précédant le (voir l'image ci-dessous)}. Si je mets une zone de sélection avant, elle ne sera pas automatiquement remplie.
Je ne veux évidemment pas avoir à effacer le mot de passe/le téléphone chaque fois que je modifie un utilisateur. Je ne veux pas non plus que mes utilisateurs aient à le faire lorsqu'ils modifient leur propre compte. Comment puis-je l'enlever?
Ce que j'ai essayé (sans succès)} _
- Ajout de autocomplete = "off" au formulaire, ainsi que des entrées de téléphone et de mot de passe.
- Ajout de valeur = "" aux deux entrées
- Changer le nom = de la saisie du mot de passe. J'ai essayé pw, pass, mot de passe et fromage (incase chrome reprenait son nom)
- Ajout de autocomplete = "off" via la jquery .attr
Ce que j'ai trouvé
J'ai constaté que Google ignorait intentionnellement l'auto-complétion: Google ignorait l'auto-complétée
J'ai trouvé un autre utilisateur qui posait une question similaire, mais la solution ne fonctionne pas pour moi: Disable Chrome Autofill
J'ai également trouvé un autre utilisateur qui travaillait avec la création d'un champ de mot de passe caché prenant l'auto-complétion google. Je préférerais une solution plus propre, car dans mon cas, j'aurais également besoin d'une entrée cachée au-dessus pour éviter à la fois le remplissage automatique: Désactiver la saisie automatique en chrome sans désactiver la saisie semi-automatique
En HTML5 avec l'attribut autocomplete, il existe une nouvelle propriété appelée "nouveau mot de passe" que nous pouvons utiliser pour résoudre ce problème. Suivre fonctionne pour moi.
<input id="userPassword" type="password" autocomplete="new-password">
current-password: Permet au navigateur ou au gestionnaire de mots de passe d'entrer le mot de passe actuel du site. Cela fournit plus d'informations que "activé", car il permet au navigateur ou au gestionnaire de mots de passe de savoir utiliser le mot de passe actuellement connu pour le site sur le terrain, plutôt qu'un nouveau.
new-password: Permet au navigateur ou au gestionnaire de mots de passe de saisir automatiquement le nouveau mot de passe du site. Cela peut être généré automatiquement en fonction des autres attributs du contrôle, ou peut simplement indiquer au navigateur de présenter un widget de type "nouveau mot de passe suggéré".
Voir: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
Parfois, même autocomplete = off would n'empêche pas de renseigner informations d'identification dans des champs incorrects, mais pas dans le champ utilisateur ou pseudonyme.
Correction: le navigateur remplit automatiquement en mode lecture seule et définit l'écriture sur le focus
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
(focus = clic de souris et tabulation dans les champs)
Mise à jour: Mobile Safari définit le curseur dans le champ, mais n'affiche pas le clavier virtuel. Le nouveau correctif fonctionne comme avant mais gère le clavier virtuel:
<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
this.removeAttribute('readonly');
// fix for mobile safari to show virtual keyboard
this.blur(); this.focus(); }" />
Démo en direct https://jsfiddle.net/danielsuess/n0scguv6/ // UpdateEnd
Explication: Le navigateur remplit automatiquement les informations d'identification avec un champ de texte incorrect?
@Samir: Chrome remplit automatiquement toutes les entrées avec un type de mot de passe, puis quelle que soit l'entrée précédente
Parfois, je remarque ce comportement étrange sur Chrome et Safari, quand il y a des champs de mot de passe dans même formulaire. Je suppose que le navigateur cherche un champ de mot de passe pour insérer vos informations d'identification enregistrées. Ensuite, il remplit automatiquement nom d'utilisateur dans le champ de saisie de type textlike, qui apparaît avant le champ de mot de passe dans DOM (devinettes dues à l'observation). Comme le navigateur est la dernière instance et que vous ne pouvez pas le contrôler,
Ce correctif ci-dessus en lecture seule a fonctionné pour moi.
Ceci peut être résolu sans piratage, mais ce n'est pas nécessairement intuitif. Chrome prend deux décisions étranges. Premièrement, Chrome ignore autocomplete="off" dans son analyse et, deuxièmement, Chrome suppose que le champ qui précède un champ de mot de passe doit être un champ nom d'utilisateur/adresse de messagerie et qu'il doit être rempli automatiquement en tant que tel.
Il existe des moyens de contourner ce problème en tirant parti de la spécification d'attribut HTML5 autocomplete.
Comme vous le verrez dans le lien ci-dessous, il existe des valeurs standard pour l'attribut autocomplete. Pour éviter que Chrome suppose que le champ avant le mot de passe soit un champ de courrier électronique, utilisez l'une des valeurs officielles (par exemple, tel pour un numéro de téléphone) ou créez une valeur qui n'existe pas dans la liste, mais qui n'est pas non plus off. ou false.
Google vous suggère d'utiliser l'une des valeurs standard avec new- précédé de la valeur, par exemple autocomplete="new-tel". Si vous souhaitez qu'un champ de mot de passe ne se termine pas automatiquement, vous pouvez utiliser autocomplete="new-password", par exemple.
Bien que, techniquement, vous puissiez bien sûr attribuer quelque chose d’aléatoire au hasard sans contexte dans le même sens (par exemple, autocomplete="blahblahblah"), je recommande le préfixe new-, car il permet de donner à tout futur développeur travaillant sur votre code le contexte de ce que vous accomplissez avec cet attribut.
- les fausses entrées ne fonctionnent pas
- autocomplete = "off"/"new-password"/"false" et ainsi de suite ne fonctionnent pas, chrome les ingores tous
Solution qui a fonctionné pour nous:
<script>
$(document).ready(function(){
//put readonly attribute on all fields and mark those, that already readonly
$.each($('input'), function(i, el){
if ($(el).attr('readonly')) {
$(el).attr('shouldbereadonly', 'true');
} else {
$(el).attr('readonly', 'readonly');
}
});
//Remove unnecessary readonly attributes in timeout
setTimeout(function(){
$.each($('input'), function(i, el){
if (!$(el).attr('shouldbereadonly')) {
$(el).attr('readonly', null);
}
});
}, 500);
});
</script>
Chrome a des mises à jour, les fausses entrées ne fonctionnent plus.
Chrome semble se souvenir de tout après une connexion Internet 200 réseau réussie. Toute entrée [type = mot de passe] activée à l'écran sera mémorisée.
J'ai essayé de définir de manière dynamique les entrées pour taper du texte, en effaçant le contenu, elles ne fonctionnent pas toujours, surtout quand il y a un bouton pour obtenir le code de vérification avant de soumettre le formulaire.
Finalement, j'ai compris:
écouter les entrées de focus et les événements de flou,
flou à chaque fois:
var psw1 = $('input[name=psw1]').val();
$('input[name=psw1]').val((new Array(psw1.length)).join('*'));
$('input[name=psw1]').attr('type', 'text');
focus à chaque fois:
$('input[name=psw1]').attr('type', 'password');
$('input[name=psw1]').val(psw1)
l'effet secondaire est évident, le contenu de l'entrée modifierait chaque événement de focus et de flou, mais cette méthode empêche le chrome de mémoriser parfaitement le mot de passe.
Je créerais un champ de mot de passe masqué au lieu de désactiver le remplissage automatique pour Chrome. Désactiver le remplissage automatique pour vous ne le désactive pas pour tout le monde.
Donc j'ai eu ça.
<input type="hidden" name="Password" id="Password" value="Password" /><br />
(Si vous souhaitez simplement le désactiver vous-même, désactivez-le à l'aide des paramètres de chrome.)
Comment le désactiver avec les paramètres chromes:
Click the Chrome menu Chrome menu on the browser toolbar. Select Settings. Click Show advanced settings and find the "Passwords and forms" section. Deselect the "Enable Autofill to fill out web forms in a single click" checkbox.
Les crédits vont à heinkasner pour celui-là.
À part ces deux méthodes, je ne pense pas qu'il soit possible de le désactiver pour tous les utilisateurs.