Afficher email et numéro de téléphone sans risque

Hello,

Quel est le moyen le plus sûr pour afficher un email sur une page web ? J’ai vu beaucoup de "toto[arobase]email.com" … Est-ce qu’il y a moyen d’avoir un rendu propre sans risque de se faire spam?

Merci

Bonjour,

Non, si l’adresse mail est reconnaissable, alors elle sera scrappée. Le mieux est un formulaire de contact avec antispam.

Et si l’adresse email apparaît sous forme d’image, et non de texte ?

Dans ce cas ce n’est pas accessible : les malvoyants, les personnes qui pour une raison x ou y n’ont pas pu charger l’image, etc.

Il n’y a pas de méthode qui marche à 100%.
Mais une méthode relativement sûre est de normaliser le numéro avec son indicatif, puis d’afficher l’indicatif en image avec le drapeau du pays avec un texte alternatif à l’indicatif qui serait par exemple 🇦🇹 Indicatif Autriche +49 ou 🇫🇷 Indicatif France +33.

Par-contre, vérifie que tu as bien le droit de le faire. C’est une donnée personnelle et pour la publier publiquement tu dois avoir obtenu le consentement de l’utilisateur.

Je rejoins @ache que tu ne dois afficher que ton email à toi ou des adresses de contacts dédiés du site. Pour les membres/etc, (donc données personnelles) c’est interdit.

Je rejoins @Moté qu’il vaut mieux avoir un formulaire de contact et que la plupart des contournements posent des problématiques d’accessibilité quand ils ne sont pas en plus inutiles (les gens n’ont pas conscience que les robots décodent les textes dans les images par exemple.)

Ce commentaire est initialement pour partager un lien que la discussion m’a rappelée : https://css-tricks.com/how-to-safely-share-your-email-address-on-a-website/ (c’est en anglais par contre.)

En fonction de ton public, c’est une méthode qui ne fonctionne pas. D’une part parce que la « normalisation » d’un numéro de téléphone au format international n’est pas triviale si ce numéro n’est pas déjà dans ce format. Mais surtout pour une question d’usabilité. Pour les numéros français, 01 23 45 67 89 sera compris, +33 1 23 45 67 89 l’est déjà beaucoup moins (je donne souvent mon numéro sous ce format, j’ai fréquemment des retours en ce sens). 🇫🇷 1 23 45 67 89, même avec un texte alternatif (qu’il faut penser à aller voir, ce qui peut être non naturel sur mobile) sera probablement incompris par la plupart des gens.

+1 SpaceFox. La protection contre les robots ne devrait pas se faire au détriment de l’usabilité ou de l’accessibilité.

La solution utilisée par la solution de protection des mails de Cloudflare est d’encoder le mail et de le décoder en JS, en proposant éventuellement un lien alternatif pour le trouver si le JS est désactivé (si on veut supporter la navigation sans JS).

La majorité des bots de scrapping ne font pas tourner JavaScript (car ça coûte bien plus cher : récupérer juste un fichier texte vs faire tourner tout un navigateur). À défaut, on peut bloquer plus ou moins efficacement les bots (par UA, bloc d’IP, …).

Cette méthode a également l’avantage de ne pas poser de problème d’accessibilité, vu que les visiteurices (avec JS) voient un lien mailto: normal.

Le code source ressemble à cela :

<a href="/cdn-cgi/l/email-protection#ee868b828281ae828783859b8f9ac08d8183">
  <span class="__cf_email__" data-cfemail="83ebe6efefecc3efeaeee8f6e2f7ade0ecee">
    [email&#160;protected]
  </span>
</a>

<!-- plus bas -->
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>

Leur script de décodage ressemble à cela — en gros c’est juste une série de chiffres XOR.

// Ce code appartient à Cloudflare (j’ai juste renommé les variables et fonctions
// et ajusté un peu le code pour qu'il soit meilleur dé-minifié).
// Je le partage juste pour l’exemple.
//
// Dans l'idée, il lit le hash comme une série de nombres hexadécimaux à deux
// chiffres. Le premier nombre (deux premiers caractères, donc) sert de clef
// pour déchiffrer le reste en faisant un xor sur chaque autre nombre (paire
// de caractères toujours).

function read_hex_nun_in_hash(hash_string, offset) {
    let hash = hash_string.substr(offset, 2)
    return parseInt(hash, 16)
}

function decode_email(href, hash_index) {
    let decoded_email = ''
    const key = read_hex_nun_in_hash(href, hash_index)

    for (let i = hash_index + 2; i < href.length; i += 2) {
        const decoded_char = read_hex_nun_in_hash(href, i) ^ key
        decoded_email += String.fromCharCode(decoded_char)
    }

    try {
        decoded_email = decodeURIComponent(escape(decoded_email))
    } catch (err) {
        console.error(err)
    }

    return decoded_email
}

On peut l’essayer sur l’exemple ci-dessus avec :

decode_email("/cdn-cgi/l/email-protection#ee868b828281ae828783859b8f9ac08d8183", "/cdn-cgi/l/email-protection#".length) 

C’est pour l’idée, hein, brut de décoffrage. À adapter à ton usage, le cas échéant.

Bonjour En mettant un premier mail invisible à l’utilisateur (visible uniquement par les bots) et un second visible par l’utilisateur

Tout ce qui arrive au premier est considéré comme spam et bloqué du deuxième