web-dev-qa-db-fra.com

Empêcher le navigateur de se souvenir des informations d'identification (mot de passe)

Après le traitement d’un formulaire de connexion, est-il possible d’empêcher le navigateur d’offrir la possibilité de mémoriser le mot de passe?

Je sais que cela a été demandé et obtenu une réponse ici, mais aucune des réponses n'a fonctionné jusqu'à présent, même l'un d'entre eux a suggéré d'utiliser:

autocomplete="off"

Mais cela n'a pas fonctionné non plus.

J'utilise AngularJS et Jade comme moteur de templates (je ne suis pas sûr que ce soit pertinent ou non), y a-t-il un moyen de le faire?

javascriptangularjspasswordspugprivacy
6
DannyG

si un site définit autocomplete = "off" pour un formulaire et que celui-ci comporte des champs de saisie du nom d'utilisateur et du mot de passe, le navigateur proposera toujours de se souvenir de cette connexion et, si l'utilisateur accepte, il remplira automatiquement ces champs la prochaine fois. l'utilisateur visite cette page.

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Vous devez également définir autocomplete="off" sur votre entrée ainsi que sur votre formulaire.

Notes de version de Google Chrome:

L'interface utilisateur de Google Chrome pour la demande de saisie semi-automatique varie selon que la saisie semi-automatique est désactivée ou non sur les éléments en entrée, ainsi que leur forme. Plus précisément, lorsqu'un formulaire a pour fonction de complétion automatique et que le champ Complément automatique de son élément d'entrée n'est pas défini, si l'utilisateur demande des suggestions de remplissage automatique pour l'élément d'entrée, Chrome peut afficher un message indiquant que "la complétion automatique a été désactivée pour ce formulaire". En revanche, si le formulaire et l'élément d'entrée ont la fonction de saisie semi-automatique désactivée, le navigateur n'affichera pas ce message. Pour cette raison, vous devez définir la saisie semi-automatique sur Désactivée pour chaque entrée pour laquelle la saisie semi-automatique est personnalisée.

4
Preston Van Loon

Je suggérerais d'utiliser Javascript pour créer un nombre aléatoire. Transmettez ce nombre aléatoire à votre action serveur en utilisant un champ caché, puis incorporez ce nombre aléatoire dans les noms des champs "login" et "mot de passe".

Par exemple. (code psuedo, la syntaxe exacte dépend de si vous utilisez PHP, jQuery, Javascript pur, etc.)

<script>
var number = Math.random();
var login_name = 'name_'+number;
var pass_Word = 'pass_'+number;
</script>
<input name='number' value="number" type='hidden'>
<input name="login_name" type='text'>
<input name="pass_Word" type='password'>

Votre serveur lit le champ "numéro", puis l’utilise pour lire la valeur numérique "nom_" et la valeur numérique "pass_".

Peu importe que l'utilisateur enregistre ou non son mot de passe dans le navigateur, car chaque fois que l'utilisateur se connecte, les champs nom et mot de passe sont différents.

3
UncaAlby

C’est un problème très ennuyant pour moi en tant que développeur. Le problème que j'ai est que, bien que je comprenne la "gêne" qu'un utilisateur ne puisse pas faire en sorte que son navigateur se souvienne de son mot de passe et que je ne veuille pas "désactiver" complètement cette fonctionnalité, il arrive que je veuille le désactiver. pour juste un certain champ de mot de passe. Exemple pour moi d'être une boîte de dialogue 'réinitialiser votre mot de passe'. Je veux les obliger à ressaisir leur ancien mot de passe et bien sûr taper le nouveau deux fois. Selon mon expérience, peu importe comment je nomme cet "ancien" mot de passe, il est automatiquement renseigné avec le mot de passe "mémorisé" (de toute façon dans Firefox 49.0.1). C’est peut-être là que je me trompe, mais c’est mon expérience, elle le remplit, peu importe le fait que le nom de cette entrée soit différent de celui du champ de saisie 'login'. Le comportement que je vois est essentiellement que le navigateur semble dire "Cet utilisateur a mémorisé un mot de passe pour ce site, aussi remplissez maintenant chaque case" input type = 'password' "avec ce mot de passe, peu importe le nom. Il me semble que cela devrait être basé sur l'attribut 'name', mais pour moi (sur plusieurs sites sur lesquels j'ai travaillé), cela ne semble tout simplement pas être le cas.

Ma solution:

  1. Colorez ce champ de mot de passe avec la même couleur que l’arrière-plan de votre entrée afin que les «points de mot de passe» soient essentiellement invisibles au chargement de la page.

  2. onload, onblur, après un délai d'attente ou comme vous le souhaitez, utilisez JQuery ou JS pour définir la valeur de ce champ de mot de passe sur rien (vide), puis définissez la couleur du champ comme il est supposé être.

    $("#old_password").val('').css('color','black);
1
MinnesotaSlim

Puisque vous utilisez AngularJS, vous pouvez laisser le champ sans nom et accéder aux données qu'il contient via le modèle:

Login: <input ng-model="login" type="text" />
Password: <input ng-model="password" type="password" autocomplete="off" />

et dans votre fichier javascript:

$scope.doLogin = function() {
    var dataObj = {
        login: $scope.login,
        password: $scope.password
    };
    var res = $http.post('/login', dataObj);
}

Testé dans IE10 et Chrome 54

1
madgangmixers

Cet article est un peu vieux maintenant, mais j'ai trouvé une solution qui fonctionne pour moi (du moins avec Chrome version 56), je la partagerai ici.

Si vous supprimez les attributs name et password de votre input, Chrome ne vous demandera pas de sauvegarder le mot de passe. Ensuite, il vous suffit d'ajouter les attributs manquants par code juste avant de soumettre le formulaire:

<!-- Do not set "id" and "name" attributes -->
Login: <input type="text">
Password: <input type="password">
<!-- Handle submit action -->
<input type="submit" onclick="login(this)">

Puis en Javascript:

function login(submitButton) {
    var form = submitButton.form;
    // fill input names by code before submitting
    var inputs = $(form).find('input');
    $(inputs[0]).attr('name', 'userName');
    $(inputs[1]).attr('name', 'password');
    form.submit();
}

J'espère que cela aidera. Testé sur Chrome 56 uniquement.

1
Olivier Levrey

J'ai découvert que Firefox 52.0.2 est incroyablement déterminé à se souvenir des valeurs d'auto-complétion. J'ai essayé presque tout ce qui est suggéré ci-dessus, y compris la modification des attributs de nom en valeurs aléatoires. La seule chose qui fonctionne pour moi est de définir les valeurs sur "" avec Javascript après que le navigateur se soit familiarisé avec le formulaire.

Mon cas d’utilisation est chanceux dans la mesure où je n’ai pas à recourir à des astuces CSS pour éviter un éclair de confusion de valeurs de formulaire auto-complétées (comme proposé par @MinnesotaSlim ci-dessus) car mon formulaire est masqué jusqu’à ce qu’il clique sur un bouton; ensuite, il est affiché via un modal Bootstrap. Par conséquent (avec jQuery),

$('#my-button').on("click",function(){        
   $('#form-login input').val("");
});
// this also works nicely
$('#my-modal').on("show.bs.modal",function(){
    $('#form-login input').val("");
})

Et j'imagine que vous pourrez peut-être obtenir le même effet en masquant initialement votre formulaire, puis, dans votre événement de chargement de document, manuellement le navigateur, puis en affichant le formulaire.

0
David