Il est souvent nécessaire de mettre un lien mailto sur une page. C'est hélas une véritable source de spams. De nombreux articles proposent des façons de s'en prémunir, bien souvent fantaisistes. Essayons de faire mieux.
Les méthodes insatisfaisantes
Remplacer le texte par une image
Cela ne marche pas : l'adresse email est toujours en clair dans le HTML
<a href="mailto:Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.?subject=Lucy in the Sky with Diamonds"><img src="/monimage.jpg"/></a>
N'importe quel robot lira l'adresse dans le lien. Cette méthode peut être efficace pour masquer des numéros de téléphone, mais pas une adresse mail.
Encoder (plus ou moins bien) l'adresse email et la decoder avec un javascript
C'est risqué. un décodage reste souvent facile :
<a href="mailto:johnatlennon.com?subject=Lucy in the Sky with Diamonds">Ecrire</a>
Indice 1 : le lien mailto ; indice 2 : une chaine qui contient "at" et se termine par "com". Tres vite "démontable". Idem pour les substitutions avec un code ascii ou autre.
Faire une redirection
<a href="/mymail.php?obj=Lucy in the Sky with Diamonds">Ecrire</a>
mymail.php :
<?php
$objet = htmlspecialchars($_GET['obj']);
header ("Location: mailto:Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.?subject=$objet");
exit();
?>
Cette méthode générera une " Erreur liée à des redirections " dans la Google search console. Pas terrible en terme de SEO, même si çà fonctionne.
Une méthode qui fonctionne
On commence par masquer le lien, en le rendant anodin et inintéressant aux yeux d'un robot
<a class="jeveuxecrire" data-akikoncause="John" data-dekoikoncause="Lucy in the Sky with Diamonds" href="#">Parlez moi</a>
Il faudra un script qui va faire plusieurs chose :
- lors du click (ce qu'un robot est incapable de faire), on va générer le lien mailto souhaité dans l'attribut href.
- lorsque l'on perd le focus (obligatoirement, puis qu'on suit le lien) on remet l'attribut href à "#'.
A ce niveau on n'a déja masqué toute information intéréssante dans le HTML.
Mais le script est lisible par le robot; il faut donc encoder les adresses mail. Ici avec AES. Ce n'est pas inviolable, mais rien ne permet à un robot de juger que le jeu en vaut la chandelle.
Le sript récupère le pseudo (ici "John") et chercher le transcodage dans un tableau, el l'on décodera ensuite cette chaine. A noter : dans cet exemple le pseudo est aussi utilisé comme clé de codage - décodage.
L'intéret et que le code reste lisible : 'John' on voit à peu près qui c'est, et tous les encodages sont regroupés dans le script, ce qui facilitera la maintenance.
Il ne faudra pas oublier de charger la librairie AES dans la section "head" :
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
Puisn en fin de document le script qui résoudra les adresses (ici en jQquery) :
<script type="text/javascript">
$('.jeveuxecrire').click(function() { //Protection mails et decodage au click
//<a class="jeveuxecrire" data-courriel="John" data-objet="Lucy in the Sky with Diamonds" href="#">Toto</a>
var medestinataires= {
Paul : 'U2FsdGVkX19H4uulqUsl7aYZ52uzi7a5ZYMvoG4AS9bVbydoH3pLeeiVVOAKBOGc6KWXuTN8M/mzghY3DXV+OQ==',
John : 'U2FsdGVkX1+equgvbyf/8950tgSj2nluLf865mZ84cGBsswcFOT9CySy069QPlQq'
};
var sT = CryptoJS.AES.decrypt(medestinataires[$(this).attr('data-akikoncause')],$(this).attr('data-akikoncause')).toString(CryptoJS.enc.Utf8) + $(this).attr('data-dekoikoncause');
// Ajouter ou modifier l'attribut « href » avec l'adresse
$(this).attr('href', sT);
})
$('.jeveuxecrire').focusout(function() {
$(this).attr('href', '#');
})
</script>
Et pour crypter ?
Il nous faut une page à placer dans l'arrière-boutique du site pour générer les codes .
C'est l'ensemble du lien mailto, sans l'objet, qui est à crypter, pas juste l'adresse email "mailto:Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.?subject=" par exemple. Pourquoi ? parce que les chaines "mailto;" et "?subject=" en clair sont une aubaine , C'est un peu comme allumer un gros néon "Cachette secrète" ; n'oubliez pas que le script est aussi lisible que le reste du code HTML.
En prime : bouton pour copier dans le presse papier.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.btn, #ResultText {
background: #666666;
color: white;
} </style>
</head>
<body>
<h2>Encrypter/decrypter avecjQuery</h2>
<br />
<b> Clé de cryptage : </b><input type="text" id="cleEncrypt" value="John" size=20/><br />
<input type="text" id="txtEncrypt" value="mailto:Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.; size=60/>
<input type="button" class="btn" id="btnEncrypt" value="Crypter" /><br />
<input type="text" id="txtDecrypt" value="" size=60/>
<input type="button" class="btn" id="btnDecrypt" value="Décrypter" />
<br /> <p><b>Résultat : <span id="ResultText"></span></b><br /><input type="button" class="btn" id="btnPressePapier" value="Copier dans le presse-papier" /></p>
<script
src="/https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous">
</script>
<script src="/https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/aes.js"></script>
<script> $(document).ready(function () {
$('#btnEncrypt').click(function () {
var encryptText = $('#txtEncrypt').val();
$('#ResultText').text(CryptoJS.AES.encrypt(encryptText,$('#cleEncrypt').val()));
});
$('#btnDecrypt').click(function () {
var decryptText = $('#txtDecrypt').val();
$('#ResultText').text(CryptoJS.AES.decrypt(decryptText,$('#cleEncrypt').val()).toString(CryptoJS.enc.Utf8));
});
$('#btnPressePapier').click(function () {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($('#ResultText').html()).select();
document.execCommand("copy");
$temp.remove();
});
});
</script>
</body>
</html>
