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 paterne 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 couteuses 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

1
2
.myemail:after { content: "foo\\40bar.com"; }
<span class="myemail">email: </span>

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 droit-à-gauche.

1
2
.myemail { unicode-bidi:bidi-override; direction: rtl; }
<span class="myemail">moc.rab@oof</span>

Ç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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<p>Contactez moi à <span id="emailblock">activez le javascript pour lire l'adresse</span></p>

<script type="text/javascript">
  // recupere tous les emails de la page
  var node = document.getElementById("emailblock");
 
  // fabrique l'adresse
  var a = "bar";
  var b = "@";
  var c = ".";
  var d = "com";
  var e = "foo";
  var full = e+b+a+c+d;
 
  // cree un lien mailto
  var lien = document.createElement("a");
  lien.setAttribute("href","mailto:"+full);
  var texte = document.createTextNode(full)
  lien.appendChild(texte);
  while(node.hasChildNodes())
  {
    node.removeChild(node.childNodes[0]);
  }
  node.appendChild(lien);
 
  // remet le texte à l'endroit
  node.style.direction = "ltr";
</script>

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, suivit d’un arobase, suivit 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 (pas idéal pour les entreprises donc) 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

tags : captcha email javascript spam tutorial
4 votes
15/10/2011 16:58
Ecrit par mart-e - Afficher l'article originel
Vus : 1974
Publié par mart-e : 65