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