Je sais qu'il y a eu beaucoup d'écrits sur ce site sur la confusion dans les e-mails. Mais récemment, j'ai découvert ce joli petit CSS-trick que je n'avais jamais rencontré auparavant.

Il affiche l'adresse e-mail (ici : [email protected]), mais malheureusement, il ne génère pas de clic mailto:// 链接。如果有人将其输入为 href et bien sûr, l'adresse sera disponible pour que le bot puisse la récupérer à nouveau.

J'ai donc ajouté une petite routine JavaScript qui ajoute un écouteur d'événement à tous les éléments .e-mail :

// Email de-obfuscation, start mail client, copy email to clipboard:

document.querySelectorAll('.e-mail').forEach(e => { 

    // get the encoded email address from ::after and decode:

    function getDecodeEmail(event) {
        z=event.currentTarget;
        y=getComputedStyle(z,'::after');
        x=y.getPropertyValue('content');
        // reverse string rtl
        v=x.split("").reverse().join("");
        // remove all "
        return v.replace(/['"]+/g, '');
    };
    
    // onClick start mail client with decoded email address:

    e.addEventListener("click", event => {
        // prevent href=#
        event.preventDefault();
        // get the (reversed) email address of the calling anchor
        v=getDecodeEmail(event);
        //window.location.href="mailto:"+v;
        // former statement doesn't fire in SE code snippets, 
        // but you can try here: https://jsfiddle.net/jamacoe/Lp4bvn13/75/
        // for now, let's just display the link:
        alert("mailto:"+v);
    });

    // right mouse click copies email to clipboard:

    e.addEventListener("contextmenu", event => {
        // prevent href=#
        event.preventDefault();
        // get the (reversed) email address of the calling anchor
        v=getDecodeEmail(event);
        // copy v to clipboard
        navigator.clipboard.writeText(v);
        // just to check:
        navigator.clipboard.readText().then( clipText => alert(clipText) );
        // former statements don't work in SE code snippets,
        // but you can try here: https://jsfiddle.net/jamacoe/Lp4bvn13/75/

    });
});

.e-mail::after {
  content: attr(data-mailSvr) "
<a class=e-mail data-mailUsr=resu data-mailSvr=moc.niamod href=""></a>
40" attr(data-mailUsr);
  unicode-bidi: bidi-override;
  direction: rtl;
}

D'une part, je suis très content de cette solution. Mais d’un autre côté, je pense que mon javascript détruit l’élégance et la simplicité du HTML/CSS. Est-ce que quelqu'un sait comment compléter cette méthode d'obscurcissement des e-mails, en utilisant uniquement du CSS + HTML pur, ce qui donne lieu à des liens cliquables et visibles qui répondent à toutes les exigences courantes (c'est-à-dire compatible avec un lecteur d'écran, entièrement obscurci, correctement formaté, clic droit pour copier) ?