Protéger une adresse email contre la récupération
Posté : 18 juil. 2006, 21:40
Un ami m'a récemment demandé s'il était possible d'afficher une adresse email et la rendre cliquable sans pour autant la laisser à la merci du premier robot spammer venu.
Après une courte réflexion, je me suis dit qu'il était possible d'adopter un format similaire à celui des microformats et utiliser du Javascript pour créer l'hyperlien dynamiquement. Voici ce à quoi je suis arrivé:
Comme vous le voyez, le nom d'utilisateur et le domaine de l'adresse email sont contenus dans des <span>. Plutôt que d'afficher une arobase, j'ai utiliser le NCR équivalent @ (au cas où le forum ne l'affiche pas correctement, je rappelle qu'il s'agit de & # 6 4 ; sans les espaces). Par défaut, le lien pointe vers "mailto:", c'est-à-dire une adresse vide. Une fois la page chargée, une routine recherche tous les liens de la classe mail_contact et recalcule le lien à partir des informations contenues dans les <span>. Et si Javascript est désactivé, l'adresse email reste visible et cliquer dessus lancera votre client mail mais l'adresse de destination ne sera pas pré-remplie. J'ai ajouté un style en CSS, mais ce n'est pas obligatoire. Testé et fonctionnel sous IE6, Firefox 1.5.0.4 et Opera 9.
Et puisque je n'aime pas faire les choses à moitié voici la version XHTML, qui manipule le DOM plutôt qu'utiliser l'élément non-standard innerHTML :
À noter que cette version semble ne pas fonctionner sous IE6.
Considérez ces deux exemples domaine public. Vous pouvez les réutiliser, les modifier, les redistribuer et les revendre avec ma bénédiction.
Après une courte réflexion, je me suis dit qu'il était possible d'adopter un format similaire à celui des microformats et utiliser du Javascript pour créer l'hyperlien dynamiquement. Voici ce à quoi je suis arrivé:
Code : Tout sélectionner
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<style type="text/css">
.mail_contact { font-weight: bold; }
.mail_contact .username { color: green; }
.mail_contact .domain { color: red; }
.mail_contact .subject { display: none; }
</style>
<script type="text/javascript">
window.onload = function () {
var links = document.getElementsByTagName('a');
for (var i = 0, len = links.length; i < len; ++i)
{
if (links[i].className == 'mail_contact')
{
nodes = links[i].childNodes;
for (var j = 0, j_max = nodes.length; j < j_max; ++j)
{
if (nodes[j].tagName == 'SPAN')
{
if (nodes[j].className == 'username' || nodes[j].className == 'domain')
{
links[i].href += nodes[j].innerHTML;
}
else if (nodes[j].className == 'subject')
{
links[i].href += '?subject=' + escape(nodes[j].innerHTML);
}
}
else
{
links[i].href += nodes[j].textContent;
}
}
}
}
}
</script>
</head>
<body>
<a href="mailto:" class="mail_contact"><span class="username">user</span>@<span class="domain">example.com</span><span class="subject">Sujet du mail</span></a>
</body>
</html>Et puisque je n'aime pas faire les choses à moitié voici la version XHTML, qui manipule le DOM plutôt qu'utiliser l'élément non-standard innerHTML :
Code : Tout sélectionner
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<style type="text/css">
mail { font-weight: bold; }
mail username { color: green; }
mail domain { color: red; }
mail subject { display: none; }
</style>
<script type="text/javascript">
window.onload = function ()
{
// Récupère toutes les balises <mail>
var elements = document.getElementsByTagName('mail');
for (var i = 0, i_max = elements.length; i < i_max; ++i)
{
var node = elements[i];
// On récupère la première balise de chaque: <username>, <domain>, <subject>
var username = node.getElementsByTagName('username')[0];
var domain = node.getElementsByTagName('domain')[0];
if (username && domain && username.textContent && domain.textContent)
{
// Adresse email formée à partir des balises
var addr = username.textContent + '@' + domain.textContent;
// On crée un nouvel élément <a>
var anchor = document.createElement('a');
// On définit le lien associé
anchor.href = 'mailto:' + addr;
// Est-ce qu'un sujet est défini ?
var subject = node.getElementsByTagName('subject')[0];
if (subject && subject.textContent)
{
// On ajoute le sujet du mail dans le lien
anchor.href += '?subject=' + escape(subject.textContent);
// On met le sujet du mail en titre du lien
anchor.setAttribute('title', subject.textContent);
}
// On fait une copie de l'élément <mail> et de tous ses descendants,
// qu'on attache à notre élément <a>
anchor.appendChild(node.cloneNode(true));
// On remplace l'élément <mail> par notre nouvel élément <a>
node.parentNode.replaceChild(anchor, node);
}
}
}
</script>
</head>
<body>
<mail><username>user</username>@<domain>example.com</domain><subject>Sujet du message</subject></mail>
</body>
</html>Considérez ces deux exemples domaine public. Vous pouvez les réutiliser, les modifier, les redistribuer et les revendre avec ma bénédiction.