У вас есть свой сайт и вы хотите указать адрес электронной почты на сайте для того, чтобы посетители могли легко связаться с вами и вместе с тем вы хотите, чтобы спам-боты не смогли распознать ваш e-mail на странице и спамер не смогли присылать спам вам на электронную почту.
Спам-боты используют обычные регулярные выражения (regular expession) в своей работе, чтобы распознавать адрес электронной почты на вашем сайте, если адрес опубликован в виде обычного текста, но вы можете обмануть ботов, скрыв ваш адрес электронной почты с помощью простых CSS и JavaScript методов. В этой статье мы их и рассмотрим.
1. Скрыть E-mail, используя CSS
1-1. CSS псевдо-классы
Можно использовать псевдо-элементы ::before и ::after для добавения имени пользователя и имени домена по обоим сторонам символа @. Боты, которые обычно не видят CSS, смогут обнаружить только знак @, в то время как браузеры будут показывать полный адрес электронной почты, который, в данном случае, является john@gmail.com.
<style type="text/css">my-email::after {
content: attr(data-domain);
}
my-email::before {
content: attr(data-user);
}</style>
<!-- Впишите ниже в data-user и data-domain ваш логин email и домен -->
<my-email data-domain="gmail.com" data-user="john">@</my-email>
Еще один вариант предложил @orlie, в котором также запись делается еще больше не понятной. И также используются псевдо-элементы.
<style type="text/css">my-email::after {
content: attr(data-domain);
}
my-email::before {
content: attr(data-user) "\0040";
}</style>
<!-- Впишите ниже в data-user и data-domain ваш логин email и домен -->
<my-email data-domain="gmail.com" data-user="john"></my-email>
Недостатком этого подхода является то, что пользователи не смогут скопировать ваш адрес электронной почты и им придется записывать его вручную.
Если вы хотите использовать псевдо-элементы и хотите, чтобы пользователи могли копировать email, то можете попровать использовать следующий подход:
<style type="text/css">.domain::before {
content: "\0040"; /* Unicode character for @ symbol */
}</style>
john<span class="domain">abc.com</span>
1.2 Изменить направление текста
Можно написать адрес электронной почты в обратном порядке (test@abc.com изменить на moc.cba@tset) и затем используя unicode-bidi и с помощью css-свойства direction изменить направление текста. Таким образом адрес на странице будет показан в нормальном виде. Текст можно будет копировать, но он будет скопирован в обратном направлении
<style type="text/css">.reverse {
unicode-bidi: bidi-override;
direction: rtl;
}</style>
<!-- тут впишите адрес email задом наперед -->
<span class="reverse">moc.cba@nhoj</span>
1.3 Скрыть с помощью display:none
Можно добавить дополнительные символы/слова в адрес e-mail, чтобы запутать спам-ботов и скрыть их с помощью css-свойства display:none. Таким образом на экран выведется правильный адрес e-mail, а спам-боты увидят неправильный адрес e-mail.
<style type="text/css">#dummy {
display: none;
}</style>
<!-- Добавте любое количество слов, которые будут невидимыми -->
john<span id="dummy">REMOVE</span>@abc<span id="dummy">REMOVE</span>.com
2. Скрыть e-mail, используя Javascript
2.1 Использование события "onClick"
Можно создать mailto гиперссылку для e-mail адреса и заменить на текст некоторые символы – точки и знак @. Затем добавить событие onClick для этой ссылки, которое будет делать замена неправильного текста на правильные символы.
<a href="mailto:infoATproverstkaDOTcomDOTua" onclick="this.href=this.href
.replace(/AT/,'@')
.replace(/DOT/,'.')">Связаться со мной</a>
2.2 Случайный массив
Разбейте название своего e-mail на несколько частей и создайте массив из этих частей. В javascript соедините ячейки массива в нужном порядке и выведите на страницу, используя свойство .innerHTML
<script>
var parts = ["john", "abc", "com", ".", "@"];
var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
document.getElementById("email").innerHTML=email;
</script>
3. WordPress + PHP
Если вы используете CMS WordPress, то у вас есть возможность использовать функцию antispambot() для кодирования вашего e-mail адреса. Функция кодирует символы в адресе в цифровой вид (символ @ становится @, буква а – а) и при этом они будут правильно отображаться в браузере.
<?php echo antispambot("john@abc.com"); ?>
E-mail адрес также можно преобразовать с помощью специального сервиса.
И, наконец, если вы действительно хотите, чтобы спам-боты не смогли увидеть ваш адрес электронной почты, не ставте его на страницы вашего сайта =) или используйте reCaptcha от компании Google. Скрывайте адрес электронной почты за капчей, а чтобы пользователи смогли увидеть его, они должны правильно ввести капчу.
