Stop aux pourriels (spams)

Introduction du cours

Vous avez créé votre site, et vous y avez ajouté votre adresse e-mail pour que vos visiteurs puissent vous contacter ?

Grosse erreur !!! Maintenant, tous les fournisseurs de Viagra et de Tamiflu ainsi que tous les casinos on-line vont vous harceler de mails pour vous pourrir la vie que vous achetiez leurs produits... :colere:

Dans ce tutoriel, je vais vous expliquer quelques techniques pour empêcher ces vilaines entreprises de vous envoyer des e-mails publicitaires.

Le pourriel en quelques motsC'est quoi, un pourriel ?

Le pourriel est en fait le nom français pour désigner le spam.

Citation : Wikipedia

Le spam, mot d'origine anglaise, désigne les communications électroniques massives, notamment de courrier électronique, sans sollicitation des destinataires, à des fins publicitaires ou malhonnêtes.
http://fr.wikipedia.org/wiki/Spam

Pourquoi MON adresse e-mail ?

Ce n'est pas votre adresse e-mail qui intéresse les spammeurs mais n'importe quelle adresse e-mail. Ils ont donc créé des programmes chargés de surfer sur Internet et de récupérer tout ce qui ressemble à une adresse e-mail. Ensuite, ils n'ont plus qu'à envoyer des messages à toutes les adresses qu'ils ont récupérées.

Ce qui définit une adresse e-mail

Le moyen le plus simple de repérer une adresse e-mail est de rechercher l'arobase -> @. Il y est indispensable. Mais d'autres facteurs peuvent aider ces programmes à détecter les adresses e-mail comme par exemple la balise <a href="mailto:....."> qui permet de créer un lien cliquable vers une adresse e-mail.

Il va donc falloir masquer, transformer, crypter, brûler, zigouiller (désolé, je m'emporte) ces données pour empêcher les logiciels de récupérer notre adresse e-mail, tout en la laissant lisible et accessible pour vos visiteurs. ^^

Les techniques xHTML et CSSTout d'abord : pas de href="mailto:..."

Comme je l'ai dit tout à l'heure, nous devons éviter de laisser apparaître l'arobase @. En xHTML, on ne pourra donc pas faire grand-chose pour masquer votre adresse e-mail si vous utilisez la balise <a href="mailto:votre_e-mail"> car il n'y a aucun moyen de la masquer tout en gardant le lien cliquable opérationnel. Donc, on l'oublie...

Écrire votre adresse e-mail différemment

Notre but sera donc de faire comprendre à l'utilisateur quelle est votre adresse. Vous pouvez par exemple l'écrire en y ajoutant des espaces, en remplaçant le signe @ ou encore en y ajoutant des éléments superflus. Comme par exemple :

• mon_nom @ mondomaine.com ;

• mon_nom[at]mondomaine.com ;

• supprimez_ceci.mon_nom@mondomaine.com.supprimez_aussi_ceci.

Mais à l'heure actuelle, les programmes sont plus intelligents qu'on le croit. Ils arrivent à comprendre certaines de ces techniques, comme par exemple [at] pour dire @. En général, ces programmes parlent anglais et ne comprennent pas le français, pourquoi donc ne pas utiliser ceci, par exemple :

• mon_nom [arobase] mondomaine.com ;

• mon_nom [chez] mondomaine.com ;

• mon_nom_AROBASE_mondomaine_POINT_com ;

• ou encore même, pourquoi pas : m0n_ad®?$$e[AT]m0nd0m@ïn?.©om.

Mais surtout, n'hésitez pas à expliquer à vos visiteurs ce qu'ils doivent modifier dans votre adresse pour pouvoir vous en envoyer. Et aussi de leur dire que vous faites ça pour éviter le SPAM. Pour qu'ils ne vous prennent pas pour des fous si vous écrivez ceci :lol: :
mon_nom_123456@mondomaine.SANS_LES_CHIFFRES.com.

Les possibilités sont infinies, laissez libre cours à votre imagination.

Mais il faut quand même avouer que ce n'est pas très esthétique, tout ça...

Ajouter des balises <span>

Au lieu d'ajouter des caractères inutiles qui perturberont vos visiteurs, pourquoi ne pas ajouter des balises <span> à la place ? Elles fragmentent votre adresse e-mail sans pour autant modifier son affichage aux utilisateurs...

Regardez donc ces deux exemplesmon<span></span>_nom<span></span>@mondo<span></span>maine.c<span></span>om <br /> mon<span>_nom</span>@mon<span>do</span>main<span>e.c</span>om

Dans les 2 cas, on a ajouté des balises <span> pour troubler les logiciels à la recherche d'adresses e-mail, sans troubler le visiteur qui lui ne voit pas les balises.

Dans une image

Rien de tel qu'une image pour écrire votre adresse. Les programmes ne vont pas scanner toutes les images pour vérifier qu'une adresse e-mail ne s'y cache pas.

Mais n'allez surtout pas balancer votre adresse e-mail dans le texte alternatif de l'image :p ; ou alors, pour garder une accessibilité à tous, utilisez la technique précédente pour le texte alternatif.

Notez qu'une adresse e-mail en tant qu'image ne peut être agrandie sur certains navigateurs, et certaines personnes ayant des troubles de la vision ne peuvent donc pas la lire.

Dans l'exemple précédent, le visiteur est obligé de retaper l'adresse e-mail lui-même, il ne peut pas faire un copier - coller de votre adresse. Et si je vous dis que j'ai une autre technique pour ça, vous me croyez ?

Regardez donc cet exemple :magicien:mon_nom<img src="arobase.png" alt="@" />mondomaine<img src="point.png" alt="." />com

Ce qui nous donne : mon_nom@mondomaine.com

On crée tout d'abord deux images pour les caractères @ et . Ensuite, vous n'avez plus qu'à remplacer ces deux caractères par les balises img en ajoutant le @ et le . dans l'attribut alt (texte alternatif) de vos images. Ainsi, lorsque vous sélectionnez l'adresse e-mail, que vous la copiez puis la collez dans votre programme de messagerie, l'adresse s'affiche correctement sans avoir à y apporter des modifications. C'est-y pas beau ça ??? ^^

Étant donné que nous affichons le contenu de l'image à l'intérieur de l'attribut alt, certains robots seront probablement capables de lire votre adresse e-mail. :(

nalreV suov-zelraP

Non, je vous assure, ce n'est pas du patois néo-zélandais, bien que ça en ait l'air. Essayez de le lire à l'envers... C'est beaucoup mieux, n'est-ce pas ?

Si vous n'avez pas tout de suite réussi à déchiffrer le titre, ça veut aussi dire que les programmes recherchant les adresses e-mail non plus.
Il existe des propriétés xHTML ou CSS qui permettent de définir si un texte se lit de gauche à droite ou de droite à gauche.

Voyons d'abord comment le faire en xHTML<bdo dir="rtl">moc.eniamodnom@mon_nom</bdo>

La balise BDO permet de définir le sens d'un texte. Le paramètre dir peut être :

• ltr (left to right) ;

• rtl (right to left).

Et maintenant, en CSS<style type="text/css"> .verlan { unicode-bidi: bidi-override; direction: rtl; } </style> <span class="verlan">moc.eniamodnom@mon_nom</span>

La propriété CSS unicode-bidi permet de définir si on peut changer ou non le sens du texte. Il peut prendre plusieurs valeurs dont Bidi-Override qui lui dit d'appliquer la valeur de la propriété direction.
La propriété CSS direction permet de définir la direction du texte, comme par exemple rtl (right to left).

Lorsqu'on copie le texte affiché à l'envers, votre ordinateur le copie tel qu'il est affiché dans le code source, et non pas à l'envers. Dans le cas ci-dessus par exemple, l'adresse est affichée mon_nom@mondomaine.com, mais lorsqu'on copie ce texte, c'est en fait moc.eniamodnom@mon_nom que nous copions... Ça peut être embêtant pour vos visiteurs !

En décimales

Lorsque vous écrivez vos pages web, vous écrivez en général en caractères ASCII. Mais ce n'est pas la seule façon d'écrire du texte. Vous pouvez également l'écrire en décimales. Chaque caractère ASCII a une équivalence décimale. (Et aussi une équivalence binaire pour que l'ordinateur puisse les comprendre, mais là je m'éloigne du sujet principal...)
Et la fonction qui permet d'écrire en décimales est : &# suivi de la valeur décimale.

Exemple : &#64 serra retranscrit par le navigateur en @.

Pour connaître le code décimal d'un caractère ASCII, il vous faut une table de correspondances, par exemple celle de Wikipédia : http://fr.wikipedia.org/wiki/ASCII.
C'est le numéro de la colonne "Code en base" : 10 qu'il faut prendre pour avoir le code décimal.

Grâce à cette technique, vous pouvez utiliser le mailto:, mais certains programmes sont capables de lire le décimal. Cette technique contre donc certains robots, mais pas tous !!!

Exemple une fois que toute l'adresse à été convertie&#109&#111&#110&#95&#110&#111&#109&#64&#109&#111&#110&#100&#111&#109&#97&#105&#110&#101&#46&#99&#111&#109 <br /> ou <br /> monnom&#64mondomaine.com

Vous pouvez également convertir le mailto: pour essayer de ne pas trop attirer l'attention des robots. :o

Bon, c'est mon jour de bonté. Voici ce que ça donne<a href="&#109&#97&#105&#108&#116&#111&#58monnom&#64mondomaine.com">monnom&#64mondomaine.com</a> Les techniques JavaScript

Notez que si vous utilisez du JavaScript, votre adresse ne s'affichera pas forcément chez tous vos visiteurs. Eh oui, pour preuve : vous n'avez qu'à désactiver le JS dans les paramètres de votre navigateur internet, et constater que… rien ne sera affiché pour les exemples ci-dessous… :'(

Bonne nouvelle : grâce au JavaScript, on va pouvoir créer des liens cliquables vers votre adresse e-mail, comme le href="mailto:..."

Fragmenter l'adresse e-mail

Le principe est simple : vous allez séparer votre adresse e-mail en plusieurs morceaux, pour ensuite les reconstituer avec du JavaScript.

Regardez cet exemple, je vous l'explique juste aprèsvar nom = 'mon_nom'; var domaine = 'mondomaine'; var extension = 'com'; var $adresse_mail = nom+'@'+domaine+'.'+extension; //Création de l'adresse e-mail document.write('<a href="mailto:'+$adresse_mail+'"> Contactez-moi</a>'); //Création du lien On l'intègre dans notre page web<script type="text/javascript"> var nom = 'mon_nom'; var domaine = 'mondomaine'; var extension = 'com'; var adresse_mail = nom+'@'+domaine+'.'+extension; </script> <p> <script type="text/javascript"> document.write('<a href="mailto:'+adresse_mail+'"> Contactez-moi</a>'); </script> </p>

Dans cet exemple, on remplit 3 variables séparées (vous pouvez en faire plus), puis on compose notre adresse e-mail avec nos variables, et enfin on affiche le résultat sur notre page à l'aide de la méthode write. Au final, nous avons un lien cliquable vers notre adresse e-mail que les navigateurs (pour autant que le JavaScript soit activé) peuvent interpréter.

Si un programme doué d'une certaine intelligence recherche une adresse e-mail, il pourra éventuellement trouver l'adresse nom@domaine.extension, en y supprimant les + et les ', mais ne se doutera pas que cela ne représente en fait que le nom de vos variables.

Si vous êtes paranos

Vous pouvez cumuler cette technique avec l'autre technique XHTML qui consiste à écrire votre adresse en décimales. Vous pouvez soit reconstruire votre adresse e-mail avec les &# suivi du nombre décimal de votre caractère, ou alors à l'aide de la méthode String.fromCharCode qui convertit une série de chiffres décimaux en un caractère ASCII.

Exempledocument.write('<a href="mailto:'+String.fromCharCode(109,111,110,95,110,111,109,64,109,111,110,100,111,109,97,105,110,101,46,99,111,109)+'"> Contactez-moi</a>');

La méthode String.fromCharCode prend comme argument un ou plusieurs codes décimaux puis vous retourne la suite de caractères correspondants.

Rappel : table de correspondances, http://fr.wikipedia.org/wiki/ASCII.

Mais vous n'allez quand même pas vous amuser à rechercher la correspondance de chacune des lettres de votre adresse e-mail, quand même ? :waw: Si ?

Mais pourtant vous êtes des AS de la programmation maintenant, non...?? :euh:
Bon d'accord, j'ai compris... Je vais vous donner un coup de main ! Mais c'est bien parce que vous êtes des zér0s.

Voici le code// Chaîne que vous souhaitez encoder en décimales var chaine_alpha = '<a href="mailto:mon_nom@mondomaine.com>Contactez-moi</a>'; var chaine_decimale = ""; // Répète la boucle 56 fois (la longueur de la chaine_alpha) en ajoutant 1 à i après chaque passage. for (i=0; i<chaine_alpha.length; i++) { // On ajoute le caractère suivant en décimal suivi d'une virgule. chaine_decimale = chaine_decimale+chaine_alpha.charCodeAt(i)+","; } // On supprime la dernière virgule, pour ce faire on récupère le contenu de la chaîne à // partir de la position 0 jusqu'à la position 202 (longueur de la chaine_decimale - 1) chaine_decimale = chaine_decimale.substr(0, chaine_decimale.length-1); // Affiche la fonction JavaScript qu'il vous faudra ajouter à votre programme pour qu'il affiche votre chaine_alpha encodée. document.write("document.write(String.fromCharCode("+chaine_decimale+"));");

La propriété .length vous permet de connaître la longueur d'une chaîne.
La...