Comment empêcher un navigateur de stocker un mot de passe
Je dois empêcher les navigateurs de stocker les valeurs de nom d'utilisateur et de mot de passe, car je travaille sur une application Web contenant des données plus sécurisées. Mon client m'a demandé de le faire.
J'ai essayé l'attribut autocomplete="off" dans les champs du formulaire HTML et du mot de passe. Mais cela ne fonctionne pas dans les derniers navigateurs tels que Chrome 55, Firefox 38+, IE 11 ... etc.
Quelle est la meilleure solution pour cela?
Merci de me répondre. J'ai suivi le lien ci-dessous
Désactive la fonctionnalité "Enregistrer le mot de passe" du navigateur
J'ai résolu le problème en ajoutant simplement les attributs readonly & onfocus="this.removeAttribute('readonly');" en plus de autocomplete="off" aux entrées comme indiqué ci-dessous.
<input type="text" name="UserName" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
<input type="password" name="Password" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
Cela fonctionne bien pour moi.
Ce n'est pas possible dans les navigateurs modernes, et pour une bonne raison. Les navigateurs modernes offrent des gestionnaires de mots de passe, qui permettent aux utilisateurs d’utiliser des mots de passe plus puissants qu’ils ne le feraient habituellement.
Comme expliqué par MDN: comment désactiver le remplissage automatique de formulaire :
Les navigateurs modernes implémentent la gestion intégrée des mots de passe: lorsque l'utilisateur entre un nom d'utilisateur et un mot de passe pour un site, le navigateur propose de le mémoriser pour l'utilisateur. Lorsque l'utilisateur visite à nouveau le site, le navigateur remplit automatiquement les champs de connexion avec les valeurs stockées.
De plus, le navigateur permet à l'utilisateur de choisir un mot de passe principal qu'il utilisera pour chiffrer les informations de connexion stockées.
Même sans mot de passe principal, la gestion des mots de passe dans le navigateur est généralement considérée comme un gain net pour la sécurité. Étant donné que les utilisateurs ne doivent pas se souvenir des mots de passe que le navigateur enregistre pour eux, ils sont en mesure de choisir des mots de passe plus puissants qu'ils ne le feraient autrement.
Pour cette raison, de nombreux navigateurs modernes ne prennent pas en charge
autocomplete="off"pour les champs de connexion:
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. Si l'utilisateur accepte, il remplira automatiquement ces champs lors de sa prochaine visite sur la page. .Si un site définit
autocomplete="off"pour les 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 y consent, il remplira automatiquement ces champs lors de sa prochaine visite sur la page.C'est le comportement dans Firefox (depuis la version 38), Google Chrome (depuis 34) et Internet Explorer (depuis la version 11).
Si un auteur souhaite empêcher le remplissage automatique des champs de mot de passe dans les pages de gestion des utilisateurs où un utilisateur peut spécifier un nouveau mot de passe pour une personne autre que lui-même,
autocomplete="new-password"doit être spécifié, bien que la prise en charge de cette opération ne soit pas encore implémentée dans tous les navigateurs.
Voici une solution pure HTML/CSS pour Chrome testée dans Version 65.0.3325.162 (Build officiel) (64 bits).
Définissez l'entrée type="text" et utilisez CSStext-security:disc pour imiter type="password".
<input type="text" name="username">
<input type="text" name="password" style="text-security:disc; -webkit-text-security:disc;">
Remarque: Fonctionne dans FireFox mais CSS
moz-text-securityest Déconseillé/Supprimé. Pour résoudre ce problème, créez un CSSfont-facecomposé uniquement de Points et utilisezfont-family: 'dotsfont';.La source: Récupère le type d'entrée = texte qui ressemble à type = mot de passe
La source ci-dessus contient un lien vers une solution de contournement pour les propriétés CSS
moz-text-securityet-webkit-text-security.Pour autant que j'ai testé cette solution fonctionne pour Chrome, FireFox version 59.0 (64 bits), IE version 11.0.9600 ainsi que IE Emulateurs ie5 et plus.
Vous devriez pouvoir créer un faux mot de passe caché pour l’empêcher.
<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>
Par défaut, il n’ya pas de réponse appropriée pour désactiver l’enregistrement du mot de passe dans votre navigateur. Mais heureusement, il existe un moyen de contourner et cela fonctionne sur presque tous les navigateurs.
Pour ce faire, ajoutez une entrée fictive juste avant l'entrée réelle avec autocomplete = "off" et un style personnalisé pour la masquer et fournir tabIndex. La saisie semi-automatique du navigateur (Chrome) remplit la première entrée de mot de passe trouvée et l'entrée précédente. Cette astuce permet donc de remplir uniquement une entrée invisible qui n'a pas d'importance.
<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>
essayez ceci peut être vous aider, pour plus d'informations, visitez Type d'entrée = mot de passe, ne laissez pas le navigateur se souvenir du mot de passe
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">Une chose que vous pouvez faire est de demander à vos utilisateurs de désactiver l’enregistrement du mot de passe pour votre site. Cela peut être fait à l'échelle du navigateur ou de l'origine.
Sinon, vous pouvez forcer les entrées à être vides après le chargement de la page (et une fois les champs remplis par le navigateur). Placez ce script à la fin de l'élément <body>.
userIdInputElement.value = "";
userPasswordInputElement.value = "";
Je pense que ce n'est pas possible dans les derniers navigateurs . La seule façon de le faire consiste à prendre un autre champ de mot de passe caché et à l'utiliser dans votre logique après avoir pris une valeur du champ de mot de passe visible lors de la soumission et mettre une chaîne fictive dans le champ de mot de passe visible .Dans ce cas, le navigateur peut stocker une chaîne factice au lieu du mot de passe actuel.
J'avais besoin de cela il y a quelques années pour une situation spécifique: deux personnes connaissant leurs mots de passe réseau accèdent au même ordinateur en même temps pour signer un contrat légal. Vous ne voulez pas que les mots de passe soient sauvegardés dans cette situation car la sauvegarde d'un mot de passe est une question juridique et non technique, où la présence physique et temporelle des deux personnes est obligatoire. Je conviens maintenant que cette situation est rare, mais de telles situations existent et les gestionnaires de mots de passe intégrés aux navigateurs Web ne sont d'aucune aide.
Ma solution technique à ce qui précède consistait à permuter entre les types password et text et à faire correspondre la couleur d'arrière-plan à la couleur du texte lorsque le champ est un champ de texte brut (en continuant ainsi à masquer le mot de passe). Les navigateurs ne demandent pas de sauvegarder les mots de passe stockés dans des champs de texte brut.
plugin jQuery:
Code source pertinent du lien ci-dessus:
(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));
Démo:
https://barebonescms.com/demos/admin_pack/admin.php
Cliquez sur "Ajouter une entrée" dans le menu, puis faites défiler vers le bas de la page le "Module: Arrêtez le gestionnaire de mots de passe".
Bien que la solution donnée ci-dessus soit très correcte, si vous avez absolument besoin de cette fonctionnalité, vous pouvez imiter la situation avec une entrée personnalisée à l'aide de champs de texte et de javascript.
Pour une utilisation sécurisée, vous pouvez utiliser n’importe quelle technique de chiffrement. Ainsi, vous éviterez ainsi le comportement du navigateur en matière d'enregistrement du mot de passe.
Si vous voulez en savoir plus sur l'idée, nous pouvons en discuter sur le chat. Mais le Gist est discuté ci-dessus et vous pouvez avoir l'idée.
< 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');
});
}
Une solution serait de générer des noms d'entrées aléatoires et de travailler avec eux.
Ainsi, les navigateurs se verront présenter le formulaire new à chaque fois et ne pourront pas pré-renseigner les champs de saisie . Si vous nous fournissez un exemple de code (avez-vous une application spa js ou un rendu côté serveur) je serais heureux de vous aider dans la mise en œuvre.
Cordialement,
J'ai lu toutes les réponses et j'étais presque prêt à ne pas le faire moi-même, car j'ai déjà vu quelques réponses ici, mais j'ai ensuite décidé de résumer tout ce qui précède.
La réponse courte, basée sur le langage HTML et les règles, est que vous ne pouvez pas. Mais c’est une réponse que seuls les paresseux utilisent. Tous les programmeurs expérimentés savent que créer un logiciel signifie que 90% du temps est hors du commun.
Les langages de programmation sont comme les outils du menuisier, ils ne dictent pas les résultats finaux, ils aident simplement le menuisier à s’y rendre.
Avec notre problème, il y a deux solutions: HTML pur et Javascript. Vous devez d’abord comprendre comment le navigateur détermine quel type d’entrée vous avez. Il est toujours à la recherche d'une paire de texte et mot de passe, email et mot de passe et, dans de rares occasions, téléphone et mot de passe.
Selon la réponse de Gaurav Singh, la solution HTML pure consiste à placer un champ de saisie factice (masqué) au-dessus du mot de passe, que le navigateur essaiera de lier au champ de mot de passe. Certains navigateurs connaissent déjà ce type de solution de contournement. Par conséquent, le champ masqué ne fonctionne plus. Dans ce cas, il vous suffit d'ajouter quelques règles CSS pour positionner l'entrée fictive en dehors de l'écran et lui attribuer une taille de 0 px.
La solution Javascript est utilisée pour générer et présenter les champs à l'utilisateur après le chargement du document, cas dans lequel le navigateur ne fait plus attention. Cela dépend vraiment du niveau de sécurité que vous souhaitez (vraiment) et de la quantité de traçage du code (si vous ne connaissez pas le code JS pouvant être tracé complètement) que vous souhaitez mettre en place.
Édition ultérieure: j’ai oublié de mentionner que pour que cela fonctionne, vous ne pouvez pas utiliser la soumission classique dans un formulaire, vous devez envoyer les valeurs par JS, AJAX ou autrement, mais cela peut être tracé.
Personnellement, j'aime bien utiliser l'entrée factice, simplement parce que cela ne pose pas de problème de sécurité. À propos, sécuriser une page de connexion est une tâche simple, compliquée seulement par les "spécialistes" qui disent que ce n'est pas le cas. Le seul vrai problème de la procédure de connexion est la sécurité du script de traitement, afin de s’assurer que l’utilisateur n’essaye pas d’y injecter quelque chose. À part ça, il n'y a rien du tout.
J'espère que ça aide !
Même plus tard, éditez:
Désolé, j'ai oublié de mentionner cela, pour la solution HTML. Vous avez besoin d'au moins 2-3 entrées de mot de passe factices, sinon le navigateur choisira simplement celui-ci. Il me semble que les navigateurs font de leur mieux pour récupérer vos données… un peu étrange.
Voici ma solution il y a 1 jour (à compter de la date de ce message) Il ajoute des écouteurs à l'id de mot de passe sélectionné et ne s'appuie pas sur des champs de formulaire cachés sont des règles CSS spécifiques à Webkit.
J'ai dû coller le code ici mais voir la version Fiddler pour obtenir le code HTML complet et sa description.
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>
code HTML
<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');
}
}
});
fonctionne bien pour le champ mot de passe pour éviter de se souvenir de son historique