Как скрыть E-mail на сайте

Как скрыть 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. Скрывайте адрес электронной почты за капчей, а чтобы пользователи смогли увидеть его, они должны правильно ввести капчу.

 

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

Loading Disqus Comments ...
Loading Facebook Comments ...

Добавить комментарий

Ваш адрес email не будет опубликован.

ОШИБКА: Sorry, human verification failed.