Une prise de contact sans prise de tête

La facilité de communication est essentielle sur un site web, et offrir aux visiteurs la possibilité de prendre contact en est un aspect crucial. Cependant, la mise en place d'un formulaire de contact peut être chronophage, et les spams générés par les bots représentent un défi majeur. Bien que la solution de reCAPTCHA de Google soit efficace, elle soulève des préoccupations en matière de conformité avec le RGPD (Règlement général sur la protection des données) et peut affecter la vitesse de chargement du site.

Mais il existe une solution simple : fournir une adresse e-mail directement. Cela permet aux clients de conserver les messages envoyés dans leur boîte mail. Mais comment rendre cette adresse e-mail invisible aux spambots qui scrutent le web à la recherche d'adresses à exploiter ? C'est là qu'intervient l'obfuscation d'e-mail, une technique astucieuse visant à protéger cette information cruciale tout en maintenant la facilité d'accès pour les utilisateurs légitimes. Dans cet article, nous explorerons cette approche et son rôle dans la préservation de la communication fluide sur les sites web.

Le problème des formulaires de contact

Tout le monde est familier des formulaires de contact. Mais pour que celui-ci ne rebute pas le visiteur, il faut qu’il soit clair et qu’il ait peu de champs. Une fois que le visiteur a envoyé son message, il n’en conserve aucune trace dans sa boîte mail. C’est quelque chose que, personnellement, je regrette un peu.

Côté développeur, il faut que les entrées des champs soient sécurisées. Et puis il faut un message d’erreur, au cas où. Et puis il faut filtrer les spams. Et que faire si le visiteur souhaite vous envoyer une pièce jointe ? Il faut rajouter une couche de complexité supplémentaire.

Alors oui, si on travaille sur un CMS, on peut ajouter un plugin qui s’occupe de tout. Mais, là encore, c’est une couche de complexité supplémentaire. On n’est jamais à l’abri du risque d’un dysfonctionnement après une mise à jour.

Google ReCaptcha n’est pas conforme à la RGPD

C’est bien là le plus gros problème. Google récupère le message envoyé par le visiteur pour l’analyser. Que fait-il des données ?

Alors faut-il encore demander le consentement de l’utilisateur avant l’envoi du formulaire ? Et s’il ne le donne pas ?

Un autre point problématique est le fait que le script de Google ReCaptcha ralentit sensiblement le chargement du site et dégrade la note qui lui est attribuée par Google Pagespeed Insight. Alors que faire ?

La solution

La solution, c’est de fournir directement votre adresse mail de contact au visiteur (de toutes façons, vous y êtes obligé dans les mentions légales… 😏). Pas de chichi. Vous voulez m’écrire ? Voilà mon adresse. Les fournisseurs de service mail se chargent de sécuriser les échanges eux-mêmes.

Seulement voilà, si vous faites ça, en quelques semaines vous serez inondé de spam. Il faut donc cacher cette adresse aux robots. On peut écrire quelque chose du genre contact[at]mon-entreprise[point]com. Mais les spambots devenant de plus en plus perfectionnés, vous n’aurez pas une efficacité de 100 %. Et vous compliquez la vie de votre visiteur.

Alors, il y a mieux ! 😊.

La solution que je vous propose a été longuement testée et est très efficace. La contourner n’est pas très compliquée, mais pour les spambots, ce n’est pas rentable. Cette solution a l’avantage d’être extrêmement simple et élégante – bref, tout ce qu’on aime chez SitUp.

Encrypter l’adresse mail au moment de la génération de la page sur le serveur

Au niveau du serveur, on va encrypter l’adresse mail avec le chiffrage de César (que nous saluons au passage) aussi connu sous le doux nom de rot13.

Le principe est simple. On prend une chaîne de caractères en entrée (notre adresse e-mail) et on décale de 13 rangs toutes les lettres. Ainsi, a devient n, b devient o et ainsi de suite. On ne touche pas aux caractères qui ne sont pas des lettres (le point, l’arrobase et d’éventuels chiffres, dans notre cas).

Pourquoi décaler les lettres de 13 rangs ? Parce que quand on applique deux fois cet algo à une chaîne de caractères, on retombe sur la chaîne de départ. Autrement dit, la fonction de décryptage est la même que la fonction d’encryptage. Élégant, qu’on vous disait. 😎

Une fonction native de PHP fait ça pour nous.

str_rot13("contact@mon-entreprise.com")
// output : pbagnpg@zba-ragercevfr.pbz

C’est cet e-mail encrypté qui sera vu par les robots.

Décrypter l’e-mail pour le visiteur

Bien-sûr, il n’est pas question de montrer l’adresse tel quel au visiteur. On va donc utiliser JavaScript pour la décoder et l’afficher en clair. C’est précisément cette opération qui n’est pas rentable pour les spambots.

JavaScript ne propose pas nativement de fonction rot13, mais quelques lignes suffisent.

function rot13(email) {
    return email.replace(/[a-z]/gi,
		letter => String.fromCharCode(
			letter.charCodeAt(0) + (letter.toLowerCase() <= 'm' ? 13 : -13)
			)
		);
}

Décortiquons un peu ce qu’il se passe :

• On recherche dans l’email tous les caractères de type lettre, gi permettant de ne pas tenir compte de la casse de la lettre et de sélectionner toutes les occurences (’cest-à-dire chacune des lettres)
• Pour chaque lettre, on obtient son code utf-16 via letter.charCodeAt(0)
• Pour les lettres entre a et m, on ajoute 13 à ce code (ce qui transformera a en n, etc.)
• Pour les lettres entre m et z, on retranche 13.
• Puis, à partir de ce code utf-16, on obtient la lettre correspondante via FromCharCode

Il ne nous reste plus qu’à passer notre adresse e-mail à cette fonction et à afficher le résultat à l’endroit désiré. L’utilisateur ne verra rien, et on peut garder un lien actif de type mailto:xxx.

Simple, ergonomique, sûr. Que demander de plus ? 😊

Cette solution a été choisie sur de nombreux sites, notamment celui de Font Awesome. Preuve de son efficacité et de sa pertinence.