Как скрыть emailУ вас есть свой сайт и вы хотите указать адрес электронной почты на сайте для того, чтобы посетители могли легко связаться с вами и вместе с тем вы хотите, чтобы спам-боты не смогли распознать ваш 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", "&#46;", "&#64;"];
  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. Скрывайте адрес электронной почты за капчей, а чтобы пользователи смогли увидеть его, они должны правильно ввести капчу.

 

оригинал статьи на английском языке

comments powered by HyperComments
Понравился материал - нажмите, пожалуйста, на кнопку
=)