PARTY HARD
Email javascript

Protéger ses adresses mail du spam avec Javascript/jQuery

tuto javascript dev spam jquery mail
Il y a plus de 15 ans

Ce post est consacré au fléau du 21ème siècle, le mal incarné, qui mange les enfants et viole vos femmes : le mail spam.

Ayant eu la bien mauvaise idée de placer un lien vers une de mes boites mail en clair sur l'ensemble de mes projets web, j'ai la chance de recevoir (par centaines) de sympathiques offres pour voir mon membres tripler de volume ou encore pour virer ma bidoche disgracieuse en seulement 2 jours (et 7000€, certes).

Bref, je ne vais pas épiloguer sur le sujet, si vous êtes sur le net depuis plus de deux jours, vous savez très bien de quoi je parle.

Il existe deux alternatives crédibles pour éviter ce problème lorsque vous souhaitez mettre à disposition un contact mail.

  • Créer un formulaire d'envoi sur votre site, ce qui, avec PHP, ne demande que peu de temps et permet de ne pas avoir à afficher votre adresse. Avec un simple captcha, vous sécurisez parfaitement votre contact. Simple et efficace (pour en savoir plus, voir les liens à la fin de ce post).
  • Profiter de la faiblesse des bots, avec une solution enfantine, à base de javascript, c'est cette solution que je vais détailler plus bas.

 

Vous savez peut-être qu'une des choses que les "bots" (robots) ne savent pas faire en lisant les pages, c'est utiliser le langage Javascript. En effet, si vous chargez des informations en javascript sur votre site, celles-ci ne seront jamais lues par le bot de Google par exemple.

Les bots "chercheurs d'emails" ne sont pas plus doués. L'idée s'impose donc d'elle-même :

Placer dans son code html existant une adresse email "truquée" que nous rendrons valide pour l'utilisateur lambda à l'aide de javascript.

Pour cela, je vous propose encore une fois d'utiliser jQuery, la libraire javascript qui me fait aimer javascript, et plus précisément ce tout petit bout de code :

function antiMailSpam(){
        $("a.mail").each(function(){
            var href = $(this).attr('href');
            if(href.indexOf('mailto:')!=-1){
                href = href.replace('|','@');
                var text = $(this).text().replace('|','@');
                $(this).attr('href',href);
                $(this).text(text);               
            }
        });
}

Il suffit d'appeler cette fonction une fois votre page chargée. Elle se charge alors de trouver tous les liens ayant la classe "mail", de vérifier qu'ils ont bien pour but d'envoyer un email (en utilisant mailto) et de remplacer le caractère "|"  (qui est interdit dans les adresses e-mail normales) par notre bon vieux "@". L'adresse devient alors valide pour les utilisateurs, et les bots ne se préoccuperont même pas de ce lien.

Côté HTML, c'est très simple, il suffit de ne pas oublier de placer la classe "mail" dans le lien.

<a class="mail" href="mailto:myemailadress|gmail.com">
      contactez moi : myemailadress|gmail.com
</a>

Vous voilà tranquilles pour un petit moment !

Et en plus, on peut en parler !