Obfusquer les adresses mails dans vos pages via javascript (jQuery)

07/02/2008
Astuces et conseils, WebDev et Design Allez aux commentaires

Voici comment empêcher les adresses mails se trouvant dans vos pages de se faire spammer par des bots. Et en fait c'est plutôt de la dèsobfuscation (houlà) par javascript 😉

Bon, si vous n'êtes pas spécialement parano méfiant, ce tutoriel risque de n'avoir que peu d'interet pour vous 😉

Pourquoi et comment ?

Tout simplement parce que de nombreux robots scannent les sites à la recherche d'adresses mail visibles. Et que vous en avez marre de voir votre boite à spam déborder depuis que vous avez laissé votre mail de contact sur votre site.

Sur de nombreux site, on voit des adresses mail écritent de cette façon: p.dupond[at]example[point]com
Alors effectivement ça empêche de se faire spammer puisque les caractères "@" et "." n'y apparaissent pas. Mais par contre ce n'est pas très ergonomique pour le visiteurs qui voudraient vous envoyer un email. Donc, via javascript, on vas remplacer les "faux caractères" par ceux d'origine. Et comme les robots n'interprètent pas le javascript (ou très mal), fini le spam tout en gardant des adresses fonctionnelles.

Mise en place

  • 1. On inclu la librairie jQuery dans la page (si ce n'est pas déjà fait) entre les balises HTML <head> et </head>
<script src="jquery-latest.pack.js" type="text/javascript"></script>
  • 2. On ajoute le bout de javascript suivant pour rendre nos adresses mail exploitables

Les portions de code suivantes sont à ajouter soit entre des balises <script type="text/javascript"> //le code ici </script>, soit dans un fichier .js
Par contre il doit impérativement ce trouver après jQuery.

$(document).ready(function(){//on attend que la page soit chargée
        //Pour tous les liens commençant par "mailto" ou les span ayant une class "wmail"
        $('a[href^="mailto"], span.wmail').each(function (i) {
                //Remplacment du texte dans l'élément
                var temp = $(this).html();
                temp = temp.replace("[atte]","@");
                temp = temp.replace("[p]",".");
                $(this).html(temp);
                //Si il y a un attribut "href", on remplace le texte dans l'attribut
                if($(this).attr("href")){
                        var temphref = $(this).attr("href");
                        temphref = temphref.replace("[atte]","@");
                        temphref = temphref.replace("[p]",".");
                        $(this).attr("href",temphref);
                }
        })
});
 

Le modèle pour ce code est: p.dupond[atte]example[p]com

Et donc, écrivez vos adresses mail comme ceci

Pour une adresse mail de type lien (mailto):

<a href="mailto:p.dupond[atte]example[p]com">p.dupond[atte]example[p]com</a>

Pour une adresse mail en texte simple:

<span class="wmail">k_ny1999[atte]example[p]com</span>

Donc pour les liens, c'est automatique, mais pour les mail en texte simple, il faut l'entourer d'une balise span avec une classe "wmail".
Pour changer les valeurs par défaut [atte] et [p], il vous suffit d'éditer un peu le code javascript.

Conclusions

Voilà, ça n'a rien d'exceptionnel, mais cette solution est simple et efficace !

-----

Articles relatifs

  • Effectivement ça marche, mais moi j’aurais plutôt tendance à conseiller d’utiliser gmail, le spamfilter est quand même uber fort =D

    Mais j’suis content de voir que t’es un utilisateur de JQuery \o/

  • k-ny

    @Palleas

    Effectivement pour les utilisateurs de Gmail, le spam n’est qu’un mauvais souvenir ! Mais il est loin d’être dominant, car c’est fou le nombre de personnes qui continuent d’utiliser leur adresse mail fournie par leur FAI !

    Ps: bonne chance avec symphony, moi je suis en train de tenter le coup avec Jelix ^^

  • J’hésite à continuer avec Symfony, c’est une grosse usine à gaz quand même :/

    Jelix ca vaut quoi ? (Ya mon adresse msn en commentaire, des fois que tu ne voudrais pas que ça parte en flood :p)

  • kac

    Ah, tres interessant !
    Mis sur onane.net
    Bonne continuation

  • Tamtam

    Vraiment super !!
    Merci !

  • Pingback: Eviter le spam avec un mailto | Srziers - E-nutile Powa !()

  • Seb

    Merci pour ton petit script 🙂
    Ma petite contribution pour changer le subject:
    temphref = temphref.replace(« [sub] », »subject= »);
    🙂