Как я могу скрыть адреса электронной почты на веб-сайтах, чтобы предотвратить спам?

Непонятный JavaScript

Метод

Я это часто вижу.

My email is <strong id="secret1"></strong>

var parts = ["secret", "my", 64, "il.com", "gma"];
document.getElementById("secret1").textContent = parts[1] + parts[0] + String.fromCharCode(parts[2]) + parts[4] + parts[3];

скрипка

Плюсы

Это лучше, чем обычный текст, и символ @ нигде на вашей странице не отображается.

Минусы

Теперь существуют безголовые браузеры, которые запускают JavaScript и просматривают динамическую страницу вместо исходного кода html.

::до и после

Метод

Используя псевдоселекторы в CSS, мы можем отображать контент после элемента. Он никогда не добавлялся в DOM, так что это чисто визуально.

My email is <strong id="secret2">mysecret</strong>

#secret2::after {
    content: '@gmail.com';
}

скрипка

Плюсы

Если вы не забудете использовать ::after вместо :after, вы можете запретить пользователям IE ‹9 отправлять вам электронные письма.

Минусы

Пользователь не может выбрать содержимое псевдоэлемента. В приведенном выше примере они должны будут ввести "@ gmail.com" при письме вам.

Форма обратной связи

Метод

Предоставьте контактную форму и используйте сценарий на стороне сервера, чтобы отправить вам электронное письмо.

<h1>Contact Us</h1>

<form action="contact.php" method="POST">
    <label for="subject">Subject</label>
    <input type="text" name="subject">
    <label for="email">Email</label>
    <input type="email" name="email">
    <label for="body">Message</label>
    <textarea name="body" cols="30" rows="10"></textarea>
    <input type="submit">
</form>

скрипка

Плюсы

• вы никогда не показываете свой адрес электронной почты, если не решите ответить
• вы можете ограничить оценку формы и ввести капчу
• вы можете регистрировать IP-адреса и блокировать все, что рассылает вам спам
• вы можете предоставить пользователю полезные параметры (например, множественный выбор «о чем это»)
• можно использовать капчи
• вы можете привязать сообщения к учетным записям пользователей и предоставлять обновления на сайте вместе с архивом предыдущих разговоров
• может регистрировать информацию браузера (например, пользовательский агент) для более быстрой технической поддержки

Минусы

• это кажется безличным
• требуется язык на стороне сервера
• требуется больше времени для реализации