Як приховати E-mail на сайті

1. 1. Приховати E-mail, використовуючи CSS
2. 1.2 Змінити напрямок тексту
3. 1.3 Приховати за допомогою display: none
5. 2.2 Випадковий масив
6. 3. WordPress + PHP

У вас є свій сайт і ви хочете вказати адресу електронної пошти на сайті для того, щоб відвідувачі могли легко зв'язатися з вами і разом з тим ви хочете, щоб спам-боти не змогли розпізнати ваш e-mail на сторінці і спамер не змогли надсилати спам вам на електронну пошту.

Спам-боти використовують звичайні регулярні вирази (regular expession) в своїй роботі, щоб розпізнавати адресу електронної пошти на вашому сайті, якщо адреса опублікований у вигляді звичайного тексту, але ви можете обдурити ботів, приховавши свою адресу електронної пошти за допомогою простих CSS і JavaScript методів . У цій статті ми їх і розглянемо.

1. Приховати E-mail, використовуючи CSS

1-1. CSS псевдо-класи

Можна використовувати псевдо-елементи :: before і :: after для добавенія імені користувача та імені домена по обом сторонам символу @. Боти, які зазвичай не бачать CSS, зможуть виявити тільки знак @, в той час як браузери будуть показувати повну адресу електронної пошти, який, в даному випадку, є [email protected].

<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 Змінити напрямок тексту

Можна написати адресу електронної пошти в зворотному порядку ([email protected] змінити на 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 адреси. Функція кодує символи в адресі в цифровий вигляд (символ @ стає @, буква а - а) і при цьому вони будуть правильно відображатися в браузері.

&lt;? Php echo antispambot ( "[email protected]"); ?>

E-mail адреса також можна перетворити за допомогою спеціального сервісу .

І, нарешті, якщо ви дійсно хочете, щоб спам-боти не змогли побачити вашу адресу електронної пошти, які не ставте його на сторінки вашого сайту =) або використовуйте reCaptcha від компанії Google. Приховуйте адреса електронної пошти за капчі, а щоб користувачі змогли побачити його, вони повинні правильно ввести капчу.

оригінал статті на англійській мові