dimayakovlev.ru


Способ защиты адреса электронной почты при помощи JavaScript

Публикация адресов электронной почты на страницах веб-сайта в явном виде это прямой путь для попадания их в базы данных спам-рассылок. Существуют разные способы защиты адресов электронной почты, предлагаю рассмотреть один, с использованием JavaScript, который я нахожу интересным, простым в реализации, легко переносимым, а главное - работающим в реальных условиях.

Допустим, на веб-странице есть гиперссылка, при клике по которой должно открываться окно почтовой программы с предложением создать новое письмо с заполненным адресом получателя. В атрибуте href для такой гиперссылки после префикса mailto: задаётся адрес электронной почты получателя письма.

<p>
  <a href="mailto:emailfromwebsite@site.com">Написать письмо</a>
</p>

Как видно в этом примере, адрес электронной почты получателя письма указан в явном виде, поэтому он легко обнаруживается и парсится роботом, массово собирающим адреса электронной почты со страниц веб-сайтов.

Вариант защиты адреса электронной почты от такого парсинга, который я предлагаю рассмотреть, заключается в том, чтобы вместо указания адреса электронной почты в явном виде в HTML-коде, подставлять его в атрибут href при клике по гиперссылке. Причём сам адрес электронной почты будет храниться в data-* атрибутах соответствующего HTML-элемента, разделённый на две части - data-username и data-domain.

<p>
  <a data-username="emailfromwebsite" data-domain="site.com" href="#">Написать письмо</a>
</p>

Для обработки события клика по гиперссылке используется JavaScript. Как именно реализовать обработку события, где разместить код - зависит от принятой в рамках проекта организации кода JavaScipt.

Чтобы не усложнять пример, я буду использовать JavaScript внутри атрибута onclick HTML-элемента a, к которому привязано событие.

<p>
  <a data-username="emailfromwebsite" data-domain="site.com" href="#" onclick="this.href = 'mailto:' + this.dataset.username + '@' + this.dataset.domain">Написать письмо</a>
</p>

В результате обработки события onclick для HTML-элемента a будет установлено значение атрибута href, составленное из префикса mailto: и значений data-* атрибутов data-username и data-domain. После этого произойдёт выполнение стандартного действия для клика по гиперссылке.

Можно пойти дальше и усложнить задачу, например, обфусцировать части адреса электронной почты перед выводом их в HTML-коде на стороне сервера, или дополнительно разделить имя домена на поддомены.

Не существует идеального способа обеспечить безопасность адресов электронной почты на страницах веб-сайта, но принять меры для избежания их публикации в явном виде необходимо.