Posté le 12 Juillet 2007 à 13:08
Vous le savez, il ne faut jamais laisser une adresse email en clair sur une page web si on ne veut pas qu'un spambot la repère et que sa boîte de réception soit envahie de spams en tout genres.Les solutions couramment utiliser pour contourner ce problème sont de remplacer le @ par [at], ou de mettre son adresse email sur une image par exemple.
Mais la première ne marche pas très bien : c'est facile de dire à un programme de détecter aussi bien les [at], _at_ et compagnie que les @.
Quand à la seconde méthode elle n'est pas pratique car il n'est du coup pas possible pour les visiteurs de copier-coller l'adresse email.
Une autre solutions est d'utiliser un JavaScript. C'est ce que j'ai fait jusqu'à maintenant. Mon adresse email n'apparait que dans dans un fichier .js et y est encodé en ROT13. Je l'affiche avec une fonction qui décode l'adresse sur le coup. Cette méthode viens du blog de Allan Odgaard.
Le code JavaScript de la fonction avec mon adresse email est :
→ Code : adresse email encodée en ROT13
1 2
3
4
function encoded_email (elem_id) {
var email = document.createTextNode("cnoyb.enhml@tznvy.pbz".replace(/[a-zA-Z]/g, function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}));
document.getElementById(elem_id).appendChild(email);
}
La méthode des entités XML
Si vos pages sont en XHTML, et donc basée sur XML et non SGML, vous pouvez étendre un peu la DTD de XHTML pour y ajouter des entités.Une entité XML c'est quoi ?
Une entité XML est une sorte de raccourci vers une chaîne de caractère prédéfinie, il y en a déjà cinq de déclaré dans XML :<pour <>pour >&pour &"pour "'pour '
é pour é...).Et bien c'est ce que nous allons utiliser pour protéger notre adresse email. Une fois cette protection mise en place il suffira d'écrire
&contact; pour afficher notre adresse email avec un lien mailto: !Comment étendre la DTD de XHTML ?
Cela se fait au moment de la déclaration du DOCTYPE au début de votre fichier. Par exemple pour XHTML 1.1, le DOCTYPE est le suivant : → Code : DOCTYPE de XHTML 1.1
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Une entité se déclare en utilisant la syntaxe suivante :
→ Code : syntaxe de déclaration d'une entité dans une DTD
1 <!ENTITY entity-name "entity-value">
&contact;.Par exemple pour moi ça donne :
→ Code : exemple de déclarations des trois entités
1 2
3
<!ENTITY myname "pablo.rauzy">
<!ENTITY gmail "gmail.com">
<!ENTITY contact "<a href='mailto:&myname;@&gmail;'>&myname;@&gmail;</a>">
Donc au final on a le code suivant :
→ Code : extension de la DTD
1 2
3
4
5
6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
[
<!ENTITY myname "pablo.rauzy">
<!ENTITY gmail "gmail.com">
<!ENTITY contact "<a href='mailto:&myname;@&gmail;'>&myname;@&gmail;</a>">
]>
Et voilà le travail ! Maintenant il vous suffit d'utiliser l'entité
&contact; pour afficher un lien vers votre adresse email : &contact;.Ce lien s'affiche bien alors que j'ai juste écris
&contact;, vous pouvez le voir dans la source de la page (par contre comme une grosse partie est générée par PHP donc l'indentation du code est plus que foireuse :-p).Vous pouvez bien sûr utiliser cette technique pour plein d'autres choses.
&logo; pourrait afficher un petit logo, &truc; pourrait afficher un truc (si si !)... On peut aussi s'en servir pour les éléments de présentations : &separateur; pourrait être /, -, |, • selon votre humeur par exemple :-p. Un autre exemple d'utilisation tout bête : &message.info; affiche un message d'information qu'on peut modifier à un endroit seulement (la déclaration de l'entité) et qui sera automatiquement mis à jour partout sur le site :-)
Ombre :
Personellement, j'ai utilisé le code html suivant :
Avec ce script, pour le livre d'or du site de MamaCass. Ça a l'air de fonctionner. ;-)
Et c'est accessible aussi... ;-)
Par contre la phrase qui m'a fait quelque chose c'est , parce que (j'ai honte) je n'y avais pas du tout pensé, tout content que j'étais d'avoir trouvé cette méthode.
Ombre :
Sinon ta méthode est vraiment chouette, ça marche aussi avec xhtml 1.0 et l'envoi en text/html?
Ombre :
Pourquoi tu dis ça??? Elle est accessible ta méthode non? Quand j'ai dit ça je voulais dire que la méthode utilisée sur le livre d'or était accessible, comme la tienne. Rien de négatif donc. ;-)
Ou alors tu voulais dire que tu n'avais pas pensé à l'accessibilité? ;-)
Gabriel Hautclocq :
Ton astuce ne fonctionne pas sous internet explorer.
Pour les autres navigateurs que IE, il faut que la page soit servie en application/xhtml+xml (c'est à dire dans l'entête http elle même, voir la fonction header de php), pas seulement dans la balise meta.
Pour faire fonctionner cette astuce sous IE, il faut regarder l'exemple de ce site : http://www.informit.com/library/content.aspx?b=STY_XML_21days&seqNum=157
En fait il s'agit de faire un document xml important la dtd du XHTML (même principe qu'un bon vieux application/xhtml+xml de toute façon)
Mais du coup cela ne fonctionne plus pour Safari et Chrome. Quel casse tête...
Benoit Colin :
Je peux proposer une autre soluce, en combinant une image (pour avoir l'adresse mail en visuel), qui comporte un texte ALT pour les navigateurs restreints, et un coup de javascript pour orienter le clic vers un mailto:
Une démo est visible ici
Bon ouais c'est pas terrible :-D...
Je connaissais la solution de l'image, mais je ne trouve pas ça pratique car on ne peut pas sélectionner le texte ou un bout du texte :-/. Par contre c'est efficace ça c'est sûr :-).
Benoit Colin :