The Technoblog

Depuis la version 56 de du navigateur web Chrome édité par Google, les internautes voient une fenêtre d’avertissement lorsqu’un champ « mot de passe » est affiché dans une page qui n’est pas en HTTPS.

Votre Connexion à ce site n’est pas sécurisée

Le champ mot de passe (celui qui affiche des étoiles quand on tape au clavier) est un type particulier de champ de formulaire HTML.

Pour éviter le message d’avertissement anxiogène, la meilleur option est bien entendu de basculer la page web en question en HTTPS. Mais si vous ne pouvez pas, soit pour des raisons techniques (trop d’impact sur le code de votre site), soit pour des raisons économiques (activation du certificat trop cher), soit… parce qu’il n’y a rien de secret derrière votre champ mot de passe, voici 2 astuces pratiques pour contourner l’alerte https de google Chrome (et autres navigateurs).

Eviter l’avertissement sur le champ mot de passe

La première technique de contournement va supprimer le message d’alerte tant que l’internaute n’utilise pas ce champ mot de passe. Cette astuce est particulièrement utile si votre site propose une zone de connexion sur toutes les pages, dans le menu ou l’en-tête du site par exemple.

Pour mettre en oeuvre cette astuce, dans le code source HTML, simplement modifier le type du champ en autre chose que « password », et ajouter un événement javascript « onfocus », qui se chargera de rétablir le bon type de champ de formulaire lorsque l’internaute commence à utiliser ce champ de formulaire. Voici un code HTML complet d’exemple, à adapter à votre page :

After the change, the html input markup will look like:

Avec cette astuce, Google Chrome n’affichera plus de message d’avertissement HTTPS tant que le champ n’est pas utilisé.

Si vous souhaitez faire disparaitre le message d’avertissement en permanence, même lors d’une saisie d’un mot de passe, utiliser la technique suivante :

Faire disparaitre totalement l’avertissement HTTPS de Chrome

La solution ultime pour faire disparaitre l’avertissement sur la saisie de données personnelles sur une page non sécurisée est de… modifier définitivement le type HTML « pasword » du champ de mot de passe pour un autre type. Personnellement, j’ai inventé le type « novapass » pour cet usage, ce qui me permettra de retrouver facilement les champs ainsi modifiés si besoin.

Bien sûr, la conséquence de cela est que le mot de passe ne sera plus masqué automatiquement par des étoiles lors de la saisie par l’internaute. A noter qu’il serait possible de reproduire ce comportement via du code javascript, mais je préfère ne pas pas induire l’internaute en lui faisant croire que la page est sécurisée.

Pour implémenter cette astuce, simplement remplacer le champ password:

Par ce type de code:

J’ai implémenté ces deux astuces sur plusieurs sites web, et tous passent le « Google Chrome 56 test ». Et pour l’heure, aucun des grands navigateurs (Microsoft Edge, Google Chrome, Mozilla Firefox) n’affiche plus d’alerte concernant HTTPS lors de l’affichage d’un formulaire contenant un champ mot de passe…