Скрытие email от ботов без скриптов: mailto и доступность

Быстрый ответ

Для скрытия вашего e-mail адреса от ботов рекомендуется использовать JavaScript. Например, вместо прямой ссылки mailto:, JavaScript позволит сгенерировать адрес электронной почты в момент загрузки страницы. Это поможет вам избежать взлома самыми распространенными спам-ботами. Вот пример такого кода:

var userInfo = "user";
var hostInfo = "example.com";
document.getElementById('emailLink').href = "mailto:" + userInfo + "@" + hostInfo;

И соответствующий HTML код:

<a id="emailLink" href="#">Связаться со мной</a>

Реальный адрес электронной почты в исходном HTML-коде страницы не указан. Боты его не обнаружат, однако пользователи увидят кликабельную ссылку mailto: на вашем сайте.

Продвинутые методы защиты от ботов

Псевдоэлементы CSS

Псевдоэлементы CSS могут стать ещё одним барьером для ботов. Вот как это можно сделать просто и эффективно:

.email::before {
  content: "user";
}
.email::after {
  content: "example.com";
}

В HTML коде это выглядит так:

<a href="#" class="email"></a>

JavaScript код для создания ссылки mailto:

document.querySelector('.email').addEventListener('click', function() {
  window.location.href = "mailto:" + this::before.content + "@" + this::after.content;
});

Подробнее об этом расскажет наш спикер на видео

Защита от ботов с использованием PHP

Серверный скрипт обрабатывает email на сервере, что обеспечивает безопасность обработки адреса. Пример кода PHP:

// При обращении пользователя
if(isset($_GET['request_email'])) {
  echo "mailto:user@example.com";
}

Доступность email и его защита

Гарантируя доступность, стоит стремиться к решениям, не полностью зависящим от JavaScript. Используйте для этого ARIA-метки, так адреса электронной почты будут понятны для скринридеров:

<span aria-label="user at example dot com">Связаться со мной</span>

Эффективное борьба со спамом

Серверный фильтр писем и SpamAssassin помогают отсеивать спам ещё до попадания его в почтовый ящик. Используйте это совместно с почтовыми клиентами, управляющими сообщениями, чтобы обеспечить дополнительную защиту:

// обозначение: почтовый ящик =📪, спам = 💣
До применения фильтров: [📪💣] // Ваш почтовый ящик под угрозой спама.
После применения фильтров: [📪🛡️] // Почтовый ящик защищён фильтрами.

Визуализация

Рассматривайте адрес электронной почты как ценность, которую следует оберегать от налётов (ботов):

Обычный способ (небезопасный):
📧: user@example.com  -->  🕵️‍♂️Боты легко похищают ценности!

Скрытый метод (более безопасный):
📧: user(at)example(dot)com  -->  🕵️‍♂️Боты путаются, похищение ценности стало сложнее!

Скрываем email с помощью JavaScript:

document.write('<a href="mai' + 'lto:' + 'user' + '@' + 'example' + '.com">Написать мне</a>');

Визуальный итог процессы скрытия:

До: [📧🔓] // Email на виду у всех.
После: [📧🔒] // Email недоступен для ботов.

Обеспечиваем безопасность своего адреса электронной почты

Вариант "идеального" решения с изображением

Рассмотрите возможность использования изображения с указанием адреса электронной почты. Этот подход менее удобен для использования скринридерами, но может служить временным решением:

<img src="email_address.png" alt="адрес электронной почты" />

Создаем для email лабиринт

Сыграйте в прятки с ботами, используя стратегию динамической подмены ссылок mailto::

var mailtoLink = "mailto:user@@example.com".replace('@@', '@');

Iframes и переадресация: проверенный временем метод

Для пользователей, у которых отключен JavaScript, доступны кликабельные ссылки на e-mail без раскрытия самого адреса:

<a href="/contact.php">Написать мне</a>

Сервер обрабатывает функциональность mailto и перенаправления, причём адрес скрыт на всех этапах этого процесса.

Полезные материалы

1. Использование данных атрибутов – Обучение веб-разработке | MDN — Как работать с данными атрибутов в HTML для управления состоянием элементов DOM.
2. Как защитить адреса электронной почты от ботов на веб-странице? – Stack Overflow — Рассуждения о различных методах обеспечения защиты электронных адресов от спам-ботов.
3. reCAPTCHA — reCAPTCHA от Google, помогающая обеспечить защиту веб-сайтов от спама и мошенничества.
4. Событие onclick – W3Schools — Туториал по событию onclick в JavaScript, который поможет инициировать процессы работы с электронной почтой.
5. H86: Предоставление текстовых альтернатив для ASCII-арта, смайликов и литспика | Техники для WCAG 2.0 — Руководство по созданию текстовых альтернатив адресам электронной почты для обеспечения доступности и безопасности.
6. Honeypot Captcha | You’ve Been Haacked — Техника Honeypot, позволяющая защищать от спам-ботов, не ухудшая при этом пользовательский опыт, особенно актуальна при использовании форм электронной почты.