Catégories
Tutorial

Comment cacher une adresse email de la vue des spammeurs

Il arrive souvent que l’on ai besoin de mettre une adresse email sur une page web. Que ce soit une grosse entreprise ou une page perso, il peut être utile de donner la possibilité aux lecteurs de nous contacter. Il est donc tentant de mettre un simple lien <a href="mailto:foo@bar.com">foo@bar.com</a>
Cependant, c’est sans compter les robots collecteurs d’emails attirés par le symbole @ tel la SABAM par une boum d’écolier. Si l’on ne veut pas se retrouver avec la boite mail remplie de courriers pour vous expliquer comment avoir un gros zizi pour 200 balles (retenez les enfants, l’amour c’est has been, c’est la taille qui importe), il vaut mieux éviter ces gens.

Il y a plusieurs techniques couramment utilisées qui sont, à mes yeux, à déconseiller :

Les mauvais exemples

foo[AT]bar.com : oui cette méthode arrêtera le robot de ma grand mère codé en Fortran (vous aimeriez avoir une grand mère qui code en Fortran hein ?) mais pas celui du mafieux russe qui fait de la collecte d’email son fond de commerce.

Il existe beaucoup de variations de cette technique qui rendent plus ou moins difficile la collecte (tel que le « REMOVETHIS » au milieu de l’adresse) mais sont aussi facilement contournables. Ça me scie à chaque fois de voir que cette technique est couramment utilisée sur les mailing lists avec des variations très simples, il suffit qu’un robot adapte un peu son algo et c’est toutes les adresses de la liste qui y passent… Un pattern assez compliqué peut être efficace mais sans doute pas très agréable pour l’utilisateur.

De plus ces emails ne sont pas cliquables et même un copier-coller nécessite un peu de retouche, pas très confortable pour les utilisateur.

L’image : l’on peut mettre l’adresse email dans une image et l’affichée sur la page. Il existe des techniques très efficaces de reconnaissance de caractère (du à la popularité des captchas) mais elles sont trop coûteuses en temps pour que le robot prenne la peine à essayer de le déchiffrer.
Cette technique est donc efficace mais très contraignante pour l’utilisateur qui ne peut ni cliquer ni faire de copier-coller et bloque les utilisateurs n’affichant pas les images (aveugles et browser en mode texte).

Le formulaire : plutôt que d’afficher l’adresse, on donne à l’utilisateur un formulaire à remplir. A cela je dis non aussi car :
– pas aussi confortable qu’un client mail
– mal construit, on peut l’utiliser comme relais pour spam (à éviter à tout prix!)
– on peut toujours vous spammer par formulaire (rhaa hors de ma vue toi avec ton captcha)

Bon maintenant qu’on a vu ce qu’il ne fallait pas faire, voici plusieurs techniques que je trouve plus intéressantes.

Pour donner un moyen de contact, je pense qu’il faut être le plus transparent possible avec la grande majorité des d’utilisateurs tout en restant possible dans les cas anormaux (un utilisateur de Lynx est un cas anormal).

HTML/CSS

Qu’est ce que la grande majorité des navigateurs comprennent : bravo le css (facile c’était marqué juste au dessus) ! Et ça tombe bien, il existe deux balises qui peuvent nous être utile :

:after : propriété pour afficher quelque chose après un élément
[cc lang= »html »].myemail:after { content: « foo40bar.com »; }
email: [/cc]
Simple et pratique mais ne fonctionne pas pour tout le monde. Une idée ? Et oui encore ce brave Internet Explorer qui ne le supporte qu’à partir de la version 8! Et évidement, marche pas du tout pour ceux sans CSS.
Remarquez aussi l’utilisation du 40 au lieu de @. Ce n’est pas infaillible mais rendra un peu plus difficile le boulot des vautours vendeurs de viagra.

direction : pas très connue (normal elle sert pas à grand chose), cette propriété permet de changer le sens d’affichage de gauche-à-droite pour de droite-à-gauche.
[cc lang= »html »].myemail { unicode-bidi:bidi-override; direction: rtl; }
moc.rab@oof[/cc]
Ça fonctionne avec Internet Explorer (alléluia) mais pose quand même 2, 3 problèmes avec ie6 si vous l’imbriquez avec d’autres propriétés (c’était trop beau).
J’aime beaucoup cette méthode car très efficace pour beaucoup de monde (à non pas ie4 déso) et même les gens qui n’affichent pas le css verront quelque chose. Bon il faut que les navigateurs texte comprennent qu’il faut inverser mais vous pouvez toujours expliquer cela dans une balise qui ne s’affichera que pour eux (en appliquant le style display:none).
Le risque que le robots inverse l’adresse n’est pas nul mais suffisamment faible.

foo<!– blabla –>@<span style="display:none;">bar.</span>com : variante de la première méthode déconseillée en cachant aux yeux de l’utilisateur certaines parties mais pas pour le robot. Le commentaire est facilement contournable pour le robot mais la deuxième partie beaucoup moins, avec un peu d’imagination on peut être paré. L’email est facilement déchiffrable pour ceux en mode texte si l’on connait un peu le html/css.

Bon par contre aucune des trois méthodes ne permet de rendre le lien cliquable

Javascript

Qu’est ce que presque autant de gens ont : le javascript! Via un petit bout de code, vous pouvez faire apparaitre dynamiquement l’adresse email.

[cc lang= »html »]

Contactez moi à activez le javascript pour lire l’adresse


[/cc]

Expliquer

Et qu’est ce que en principe tout le monde possède : un cerveau!
Pourquoi simplement ne pas expliquer comment former l’adresse email avec une phrase du style « pour me contacter, mon adresse est : foo, suivi d’un arobase, suivi de bar.com ». A varier selon votre imagination et faites le en alexandrins si possible.

C’est un peu extrême, pas très professionnel mais compréhensible par tous et si, un jour, un crawler est capable de déchiffrer ça, le spam ne sera pas votre plus gros problème.

Combiner

La technique que je considère comme la plus efficace est de mixer le tout! Du javascript pour avoir quelque chose de très compatible avec beaucoup de gens et être très confortable (lien cliquable) avec derrière du CSS et/ou du texte pour ceux qui ne supportent pas le javascript .
J’ai mis un exemple sur gitorious, n’hésitez pas a me proposer des améliorations.

Conclusion

Toutes ces méthodes sont évidement à adapter selon vos besoins et vos lecteurs, le cas d’un blog perso ou une mailing list est différent d’une entreprise. Il en existe d’autres également efficace, entre autre en travaillant coté serveur avec du php ou ajax.
Est-ce que vous éviterez tout le spam ? Bien sur que non, mais vous éviterez déjà une source…

Inspiration : Methods to hide email addresses from page source

9 réponses sur « Comment cacher une adresse email de la vue des spammeurs »

Une autre solution qui ne nécessite ni HTLM ni JS est d’utiliser unicode dans le code HTML.
Ainsi la séquence (il faut retirer le point à chaque fois, j’en ai mis car sinon le code est – justement – décodé par wordpress)
&.#116;&.#111;&.#116;&.#111;&.#064;&.#116;&.#097;&.#116;&.#097;&.#046;&.#099;&.#111;&.#109;
écrite dans le source affichera toto@tata.com à l’écran.

Merci, très intéressant.

Personnellement, j’utilise la méthode « expliquer » (machin suivi de truc).

Je suis déjà tombé sur un site où l’auteur avait utilisé le CSS « direction: rtl », ça perturbe beaucoup car on voit le texte dans le bon sens, mais dès qu’on commence à sélectionner ça fait n’importe quoi (ça sélectionne dans le sens inverse du déplacement de la souris), et le copier-coller n’est pas utilisable (ça copie dans le mauvais sens).

Merci pour l’article.
Personnellement j’utilise les services de spamgourmet.com et parfois combiné avec la vieille technique du machin[at]truc(dot)com et je ne reçois aucun spam 🙂

@Virtualmix: tu en recevras, tu en recevras 😉

Par contre que ces conseils n’empechent personne de configurer au mieux les ACLs de son serveur. Ca fera ceinture et bretelles!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *