Protection des adresses courriel dans une page Web

Il n’existe aucune solution magique, une fois publiée dans une page Web, l’adresse courriel peut aisément être capturée, peu importe l’astuce. Remplacer bêtement une adresse en CSS ou en JavaScript affiche en clair l’adresse dans le code, on n’est pas plus avancé. Alors qu’utiliser une image JPEG de son adresse courriel peut être copiée à la main. Même le plus sophistiqué des JavaScript est interprété par le navigateur et donc peut être décortiqué par n’importe qui. En fait, la seule manière de protéger son adresse courriel c’est de ne pas la publier dans une page Web. Utiliser plutôt un formulaire de contact combiné à un petit AJAX et une connexion SSL. Vous aurez alors tout le loisir de répondre ou non à votre interlocuteur et ainsi lui donner ou non votre adresse courriel en toute sécurité. La redirection HTTP est aussi un moyen plutôt fiable mais contrairement au formulaire, vous ne pouvez pas filtrer les interlocuteurs :

<a href="moncourriel.php">Contactez-moi</a>

// Page moncourriel.php
<?php
header ("Location: mailto:monadresse@monserveur.com");
exit();
?>

Ceci dit, il se peut que vous soyez obligé ou simplement parce que cela ne vous gène pas. Soit par ignorance soit parce que vous avez une adresse Hotmail, Gmail qui gère les pourriels pour vous. Sachez toute foi que vous encouragez les polluposteurs à développer des outils et robots collecteurs, de plus en plus puissants, capables de capturer des adresses. Le pourriel est tout de même responsable de plus de 80 % du trafic sur un serveur de courriel. Il arrive souvent que ma propre adresse, munie de l’ensemble des outils pour l’authentifier comme une clé DKIM, se retrouve malgré tout dans les pourriels de Gmail! C’est la galère.

Enfin, si tel est le cas, voici un petit script qui donnera un peu de misère aux méchants polluposteurs. Outre les robots de plus en plus puissants qui peuvent interpréter le JavaScript, changer de IP, se faire passer pour un moteur de recherche, n’oubliez pas que la capture manuelle est toujours possible, peu importe la méthode... Par exemple la vielle méthode monadresse[at]mondomaine[dot]com ne sert plus à rien.

L’idée consiste à ne pas afficher l’adresse directement dans la page Web mais seulement après le chargement de la page à l’aide d’un script. Idéalement en la « codant » pour ensuite la décoder lors de l’interprétation JavaScript. Par exemple encoder l’adresse à l’aide d’entités HTML.

Méthode simple (cette méthode n’est plus du tout efficace !)

Mailto = mailto:
@ = @
Et le point = .

<a href="mailto:monadresse@mondomaine.com">Contactez-moi</a>

Résultat <a href="mailto:monadresse@mondomaine.com">Contactez-moi</a>

Bien entendu, il suffit au robot de chercher le « @ » pour être en mesure de capturer l’adresse ! Chose passablement facile étant donné qu’un navigateur ne fait tout simplement pas la différence.

Méthode JavaScript

Une autre méthode consiste à utiliser une adresse erronée qu’un script JavaScript peut ajuster après le chargement de la page :

<a class="courriel" href="mailto:monadresse@mauvaiscourriel.monserveur.com">Contactez-moil</a>

<script>
$("a.courriel").on("click", function(){
  var href = $(this).attr("href");
  $(this).attr("href", href.replace("mauvaiscourriel.", ""));
});
</script>

Mais l’idéale est de remplacer l’arobas et le point par deux autres symboles pour ne pas attirer l’attention des robots collecteurs ! Encore mieux, utilisez les « attributs de données » pour stocker l’adresse :

<a data-courriel="monadresse|monserveur*com"></a>

De cette façon, le mot-clé mailto n’est pas présent, il n’y a pas de href non plus et aucune adresse avec un arobas... Ça commence à être un peu plus difficile à capturer. Personnellement, j’utilise carrément des mots.

<a class="courriel" data-courriel="monadressearobasmondomainepointcom"></a>

Encore mieux, encoder le tout en entité HTML !

<a class="courriel" data-courriel="
monadressearobasmondomainepointcom"></a>

Pour que le JavaScript puisse détecter l’adresse, utiliser une classe, ici la classe « courriel ».

Le JavaScript (avec jQuery)

<a class="courriel" data-courriel="
monadressearobasmondomainepointcom"></a>

<script>
$(document).ready(function() {
  // Boucle toute les classes .courriel
  $('.courriel').each(function () {
    // récupère l'adresse codée
    var sC = $(this).attr('data-href');
    // Remplace le mot « point » par un point 
    sC = sC.replace(/point/g, '.');
    // Remplacer le mot « arobas » par @
    sC = sC.replace(/arobas/g, '@');
    // Ajouter l'attribut « href » avec l'adresse
    $(this).attr('href', 'mailto:' + sC);
    // Ajouter l'adresse comme texte du lien 
    $(this).text(sC);
  });
});
</script>

Et voilà, le tour est joué !

Même code en pur JavaScript (Vanilla)

<a class="courriel" data-courriel="
monadressearobasmondomainepointcom"></a>

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Boucle toute les classes .courriel
  var oC = document.getElementsByClassName("courriel");
  var i;
  for (i = 0; i < oC.length; i++) {
    // récupère l'adresse codée
    var sC = oC[i].getAttribute("data-courriel");
    // Remplace le mot « point » par un point 
    sC = sC.replace("point", ".");
    // Remplacer le mot « arobas » par @
    sC = sC.replace("arobas", "@");
    // Ajouter l'attribut « href » avec l'adresse
    oC[i].setAttribute("href", "mailto:" + sC);
    // Ajouter l'adresse comme texte du lien 
    oC[i].innerHTML = sC;
  } 
})
</script>

Exemple

Contactez-moi

Conversion entités HTML

Petite fonction pour convertir vos caractères en entités HTML.

<script>
(function(window){
  window.twEntitesHTML = {
    encode : function(str) {
      var buf = [];
      for (var i=str.length-1;i>=0;i--) {
        buf.unshift(["&#", str[i].charCodeAt(), ";"].join(""));
      }
      return buf.join("");
    },
    decode : function(str) {
      return str.replace(/&#(\d+);/g, function(match, dec) {
        return String.fromCharCode(dec);
      });
    }
  };
})(window);
var sChaine = twEntitesHTML.encode("monadressearobasmondomainepointcom");
</script>

Conclusion

Il existe bien d’autres méthodes, par exemple en CSS, de l’inutile .courrielconteneur:after {content: monadresse@monserveur.com;} à l’inversion des caractères d’une adresse courriel affichée à l’endroit par (unicode-bidi: bidi-override; direction: rtl;). Ou encore l’encodage/décodage ROT13 proposé par 1FORMATIK.com. Mais ça revient toujours au même, il suffit d’une personne ou d’un robot capable d’interpréter le JavaScript et le CSS pour contrecarrer l’astuce !

Ce qui est vraiment dommage, pensons-y, une toile sémantique interconnectée, le rêve originel ! Comme le format XML « Foaf » (Friend of a friend) qui met en relation les personnes et leurs intérêts. Le Foaf préfère l’encodage SHA1. Mais là aussi, la méfiance est de mise. Déjà, l’adresse courriel foaf:mbox ne sert pas de courriel, mais plutôt d’identifiant unique, même si l’adresse courriel n’existe pas vraiment ! Il faut croire que tout reste à faire dans le domaine légal des « 6 degrés de séparation » et pour assurer la confiance et la confidentialité des communications sur du Web de demain...