Лучший способ скрыть адрес электронной почты на веб-сайте?

Последние несколько дней я работал над обновлением своего личного веб-сайта. URL моего личного веб-сайта (мое имя). (Моя фамилия) .com, так как моя фамилия довольно необычная, и мне посчастливилось выбрать доменное имя. Мой адрес электронной почты (мое имя) @ (моя фамилия) .com. Так что на самом деле, когда дело доходит до предположения, это не очень сложно.

В любом случае, я хочу интегрировать ссылку mailto: на свой сайт, чтобы люди могли связываться со мной. И, несмотря на то, что мой адрес электронной почты не очень сложно угадать, я бы предпочел, чтобы его не собирали спам-боты, которые просто сканируют веб-сайты в поисках шаблонов адресов электронной почты и добавляют их в свою базу данных.

Как мне лучше всего скрыть свой адрес электронной почты, желательно в виде ссылки? Я знаю следующие методы:

<a href="mailto:x@y.com">e-mail me</a>

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

<img src="images/e-mail.png" />

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

Я знаю, что, вероятно, нет идеального решения, но мне просто интересно, что все считают лучшим. Я определенно готов использовать JavaScript, если это необходимо, так как мой сайт уже использует его огромное количество.

Я кодирую символы как объекты HTML ( что-то вроде этого ). Он не требует включения JS и, похоже, остановил большую часть спама. Я полагаю, что умный бот все еще может его собрать, но у меня не было никаких проблем.

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

В настоящее время принято решение создать контактную форму, позволяющую пользователям отправлять вам электронные письма. Если вы получаете много спама от этого (а на моем сайте этого нет), то вы можете добавить капчу в качестве меры предосторожности, и тогда вы будете далеко от «низко висящего плода».

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

Вы упомянули, что это для вашего личного сайта. На моем личном сайте (например, bobsomers.com) у меня есть параграф, в котором написано следующее:

Лучший способ связаться со мной до открытия нового сайта - это отправить мне электронное письмо. Мой адрес электронной почты - это мое имя на этом сайте. Если вы не можете понять это из этого намёка, что ж, электронная почта может показаться вам более сложной задачей, чем определение моего адреса.

Люди, кажется, прекрасно это понимают, так как я все время получаю настоящую электронную почту. Иногда лучшие решения не требуют написания кода. :)

Легкий способ обфускации hrefпривязки - это кодировать ее в base64:

> btoa('mailto:email@example.com')
< "bWFpbHRvOmVtYWlsQGV4YW1wbGUuY29t"

А затем включите его жестко:

<a href="javascript:window.location.href=atob('bWFpbHRvOmVtYWlsQGV4YW1wbGUuY29t')">E-Mail</a>

Или динамически на стороне сервера, например, в PHP:

<a href="javascript:window.location.href=atob('<?= base64_encode("mailto:email@example.com") ?>')">E-Mail</a>

В сочетании с реверсией строки это может сэкономить спам:

<a href="javascript:window.location.href=atob('<?= base64_encode("mailto:email@example.com") ?>')" style="unicode-bidi: bidi-override; direction: rtl;"><?= strrev("email@example.com") ?></a>

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

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

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

Вы можете поступить так же, как Google, в Google Code (и в группах). Отобразите часть сообщения электронной почты и активную часть («...»). Нажатие на это означает, что вы хотите узнать адрес электронной почты, и вас попросят ввести капчу. После этого электронная почта (и другие?) Станут вам видны.

у меня на самом деле просто:

<h3 id="email">hello@gmail.com</h3><!-- add a fake email -->


    $(document).ready(function(){
//my email in reverse :)
            var s = 'moc.elibomajninbew@htiek';
            var e = s.split("").reverse().join("");
            $('#email').html('<a href="mailto:'+e+'">'+e+'</a>');
    });

Я использую обфускацию JavaScript, посмотрите, например, на это:

http://www.jottings.com/obfuscator/

Один веб-сайт, который я поддерживаю, использует несколько упрощенные средства JavaScript (надеюсь) для защиты от спам-ботов.

Ссылки электронной почты вызывают функцию JS:

function sendEmail (имя, домен) {
    location.href = 'mailto:' + имя + '@' + домен;
}

Чтобы ссылку могли видеть только пользователи, у которых включен JS, напишите их так:

function writeEmailLink (realName, name, domain) {
    document.write ('<a href = "javascript: sendEmail (\' '
      + имя + '\', \ '' + домен + '\') "> ');
    документ.write (настоящее имя);
    document.write ('</a>');
}   

Использование одной JS-функции для записи ссылки, вызывающей другую, означает, что существует два уровня защиты.

Как сказано выше, я также использую обфускацию JavaScript с веб-сайта jottings .

Веб-страница генерирует некоторый JavaScript, который можно улучшить. mailto:Текстовая строка в незашифрованном виде и идентифицировать роботами (которые могли бы обнаружить это и распутывание этой строки), но если кто -то входит в jottings.com веб - странице адрес электронной почту формы mailto:addr@site.tldвместо addr@site.tldа затем удаляет текстmailto:из сгенерированного JavaScript внезапно появляется какой-то JavaScript, который не выглядит так, как будто он вообще имеет какое-либо отношение к электронной почте - просто случайный JavaScript, которым заполнена сеть. Можно еще больше улучшить это, избавившись от текста ссылки - я заменил свой на изображение моего адреса электронной почты, которое было написано довольно неясным шрифтом. Затем, на случай, если этот метод на jottings.com станет популярным, я рандомизировал имена переменных в выходном JavaScript, чтобы роботу было сложно обнаружить экземпляр кода JavaScript, созданного с помощью заметок.

Очевидно, что некоторые из этих улучшений могут быть встроены в сам механизм создания набросков, и, поскольку код доступен в открытом доступе, это будет относительно легко.

Пример может прояснить это. Я использовал Обфускатор Jottings по ссылке выше, чтобы скрыть mailto:foo@bar.com(обратите внимание, я обманываю исходное намерение веб-сайта с заметками, вводя строку mailto:foo@bar.comвместо foo@bar.com) с текстом «Отправить мне электронное письмо», который превратился в этот Javascript:

<script type="text/javascript" language="javascript">
<!--
// Email obfuscator script 2.1 by Tim Williams, University of Arizona
// Random encryption key feature by Andrew Moulden, Site Engineering Ltd
// This code is freeware provided these four comment lines remain intact
// A wizard to generate this code is at http://www.jottings.com/obfuscator/
{ coded = "3A1OTJ:rJJ@VAK.GJ3"
  key = "J0K94NR2SXLupIGqVwt8EZlhznemfaPjs7QvTB6iOyWYo3rAk5FHMdxCg1cDbU"
  shift=coded.length
  link=""
  for (i=0; i<coded.length; i++) {
    if (key.indexOf(coded.charAt(i))==-1) {
      ltr = coded.charAt(i)
      link += (ltr)
    }
    else { 
      ltr = (key.indexOf(coded.charAt(i))-shift+key.length) % key.length
      link += (key.charAt(ltr))
    }
  }
document.write("<a href='mailto:"+link+"'>Send Me Email</a>")
}
//-->
</script><noscript>Sorry, you need Javascript on to email me.</noscript>

Получив его обратно, я вставляю его в редактор и:

1. удалить mailto:
2. заменить текст ссылки указателем на изображение моего адреса электронной почты
3. переименовать все переменные
4. замените раздел "noscript" другой ссылкой на изображение адреса электронной почты

Я получаю вот что:

<script type="text/javascript" language="javascript">
<!--
// Email obfuscator script 2.1 by Tim Williams, University of Arizona
// Random encryption kkeoy feature by Andrew Moulden, Site Engineering Ltd
// This kudzu is freeware provided these four comment lines remain intact
// A wizard to generate this kudzu is at http://www.jottings.com/obfuscator/
{ kudzu = "3A1OTJ:rJJ@VAK.GJ3"
  kkeoy = "J0K94NR2SXLupIGqVwt8EZlhznemfaPjs7QvTB6iOyWYo3rAk5FHMdxCg1cDbU"
  shift=kudzu.length
  klonk=""
  for (variter=0; variter<kudzu.length; variter++) {
    if (kkeoy.indexOf(kudzu.charAt(variter))==-1) {
      lutu = kudzu.charAt(variter)
      klonk += (lutu)
    }
    else {
      lutu = (kkeoy.indexOf(kudzu.charAt(variter))-shift+kkeoy.length) % kkeoy.length
      klonk += (kkeoy.charAt(lutu))
    }
  }
document.write("<a href='"+klonk+"'><img src='contactaddressimage.png' alt='Send Me Email' border='0' height='62' width='240'></a>")
}
//-->
</script>
<noscript>
    <img src="contactaddressimage.png" border="0" height="62" width="240">
    <font face="Arial" size="3"><br>&nbsp;</font></p>
</noscript>

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

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

Его три лучших пути были:

1. Изменение направления кода с помощью CSS
2. Использование отображения CSS: нет
3. ROT13 шифрование

Предостережение - это было опубликовано два года назад. Спам-боты, возможно, стали умнее.

Если вы работаете с PHP, вы можете бесплатно скачать скрипт, который сделает это автоматически. Он называется «Частный папа», и мы используем его для нашей собственной онлайн-службы потокового аудио. Всего одна строка кода, и она работает сразу после установки ... вы можете скачать ее здесь

Другой подход может заключаться в использовании структуры JavaScript и привязке данных / модели к элементам HTML. В случае AngularJS элементы HTML будут записаны как:

<a href="mailto:{{contactEmail}}"><span>{{contactEmail}}</span></a>

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

<a href="mailto:{{contactEmail | decode}}"><span>{{contactEmail | decode}}</span></a>

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

просто другой подход.

Используется JQuery, но при необходимости может быть легко перенесен на простой JS. Возьмем следующий блок HTML. Этот пример, который я предоставил, также предназначен для tel:ссылок для телефонных звонков.

<a class="obfuscate" 
 href="mailto:archie...trajano...net">
 archie...trajano...net
</a>
<a class="obfuscate"
 href="tel:+One FourOneSix-EightFiveSix-SixSixFiveFive">
 FourOneSix-EightFiveSix-SixSixFiveFive
</a>

и преобразуйте его в правильные ссылки с помощью Javascript.

$ (". obfuscate"). each (function () {

$ (это) .html ($ (это) .html ()
.replace ("...", "@"). replace (/\.\.\./ g, ".")
.replace (/ One / g, "1")
.replace (/ Two / g, "2")
.replace (/ Three / g, "3")
.replace (/ Four / g, "4")
.replace (/ Five / g, "5")
.replace (/ Six / g, "6")
.replace (/ Seven / g, "7")
.replace (/ Eight / g, "8")
.replace (/ Девять / g, "9")
.replace (/ Zero / g, "0"))

$ (это) .attr ("href", $ (this) .attr ("href")
.replace ("...", "@"). replace (/\.\.\./ g, ".")
.replace (/ One / g, "1")
.replace (/ Two / g, "2")
.replace (/ Three / g, "3")
.replace (/ Four / g, "4")
.replace (/ Five / g, "5")
.replace (/ Six / g, "6")
.replace (/ Seven / g, "7")
.replace (/ Eight / g, "8")
.replace (/ Девять / g, "9")
.replace (/ Zero / g, "0"))

})

Я задокументировал это более подробно здесь https://trajano.net/2017/01/obfuscating-mailto-links/

Алгоритм де / обфускации довольно прост, поэтому писать тоже не так сложно (нет необходимости в синтаксическом анализе base64)

Решение вызова Ajax

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

HTML

<a class="obfmail" href="#" rel="info">click here to show email address</a>

или

<a class="obfmail" href="#" rel="info">
    <img src="img/click-to-show-email.jpg">
</a>

jQuery

$(document).one'click', '.obfmail', function(e) {
    e.preventDefault();
    a = $(this);
    addr = a.attr('rel');
    $.ajax({
        data: { 
            email: addr
        },
        url : "/a/getemail",
        type: "POST",
        dataType: 'json',
        success: function(data) {
            a.html(data.addr);
            a.attr('href', 'mailto:' + data.addr);
        }
    });
});

PHP

if($_POST['email']) {
    ...
    return json_encode(array(
        code     => '200',
        response => 'success',
        addr     => 'info@domain.ltd'
    ));
}

Для большей безопасности, вы можете изменить с .onпомощью .oneтак$(document).one('click', '.obfmail', function(e) { или даже работой с PHP сгенерированы лексемами, передаваемой в данные по AJAX вызова, чтобы принимать только один вызов функции Ajax , как это:

html: <a class="obfmail" href="#" rel="info" token="w3487ghdr6rc">

jquery:

...
addr = a.attr('rel');
tkn  = a.attr('token');
$.ajax({
    data: { 
        email: addr,
        token: tkn
    }, ...

.

Можно также закодировать возвращенный адрес электронной почты или инвертировать его.

.

Работает нормально и для телефонных номеров!

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

Вместо этого вы могли бы использовать форму для отправки электронной почты за кулисами, чтобы адрес электронной почты был скрыт, и вам не приходилось беспокоиться о бедняках, которые не получат выгоду от mailto.

Если вы говорите на своем сайте, что «Мой адрес электронной почты (мое имя) @ (моя фамилия) .com.», А ваше имя и фамилия чертовски очевидны, это, по-видимому, лучшая защита от спама. ты получишь.

Если кто-то использует Rails, он может использовать actionview-encoded_mail_toгем. ( https://github.com/reed/actionview-encoded_mail_to )

Есть несколько вариантов:

: encode - Этот ключ будет принимать строки «javascript» или «hex». Передача «javascript» будет динамически создавать и кодировать ссылку mailto, а затем оценивать ее в DOM страницы. Этот метод не будет отображать ссылку на странице, если у пользователя отключен JavaScript. Передача "hex" приведет к шестнадцатеричному кодированию email_address перед выводом ссылки mailto.

: replace_at - Если имя ссылки не указано, адрес электронной почты используется для метки ссылки. Вы можете использовать эту опцию, чтобы скрыть email_address, заменив знак @ строкой, заданной как значение.

: replace_dot - Если имя ссылки не указано, адрес электронной почты используется для метки ссылки. Вы можете использовать эту опцию, чтобы скрыть email_address, заменив. в электронном письме со строкой, указанной в качестве значения.

<!-- Multi-Email Obfuscator  -->
<!-- step 1: &#064; = @  -->
<!-- step 2: a scrap element  -->
<!-- step 3: ROT13 encode for .com  -->
info<!-- step 1 -->&#064;<!-- step 2 --><b style="display:none">my</b>domain<!-- step 3 --><script>document.write(".pbz".replace(/[a-zA-Z]/g,function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+13)?c:c-26);}));</script>

Cloudflare предлагает бесплатную услугу обфускации электронной почты . Это может быть вариант, если вы используете Cloudlfare.

Поскольку это решение нигде не упоминается, но у меня работает хорошо:

Я делаю это:

• создать ссылку mailto с поддельным адресом электронной почты. Мне нравится admin@localhost.localdomain по очевидным причинам: спамер может спамить свой собственный ботнет, если этот адрес не отмечен.

• зашифровать реальный адрес электронной почты и поместить его в несвязанный, но обнаруживаемый скрытый диапазон или любой другой элемент, который вам нравится. Очевидно, чтобы запутать электронную почту и скрыть ее от комбайна. В зависимости от структуры вашего проекта вы можете даже захотеть поместить его в переменную JS или Session.

• через секунду создайте обработчик кликов для этих ссылок, который расшифровывает и записывает правильный адрес электронной почты в поддельную ссылку mailto, не предотвращая установки по умолчанию. Я не думаю, что поисковые роботы нажимают на ссылки mailto, но если бы они это сделали, они, вероятно, не стали бы ждать ни секунды, в то время как человек должен был бы быть очень быстрым, чтобы щелкнуть ссылку в первую секунду после загрузки страницы.

Теперь у вас есть полностью функциональная, но запутанная, запутанная и защищенная по времени ссылка mailto.

Рабочий пример php файла:

<html>
<head>
<title>E-Mail Obfuscating</title>
</head>
<body>
<?php
$email = "example@email.org";
echo "<a class='emailLink' href='mailto:admin@localhost.localdomain' >Send me an e-mail!</a>"
    ."<span style='display:none' data-hash='" . base64_encode($email) . "' />";
?>
<script>
<!--
var emailLinks = document.getElementsByClassName("emailLink");
setTimeout(function() {
    for(var i=0; i <emailLinks.length; ++i){
        emailLinks[i].addEventListener("click", function(){
            let encodedEmail = this.nextSibling.getAttribute('data-hash');
            let decodedEmail = atob(encodedEmail);
            this.href = "mailto:" + decodedEmail;
            this.text = decodedEmail;
        });
    }
}, 1000);

-->
</script>
</body>
</html>

Да пребудет с тобой код.

Что если создать ссылку «Свяжитесь со мной», указывающую на каталог, защищенный паролем? Конечно, вы должны дать пропуск для доступа.

«Свяжитесь со мной»> •••••••••••> contact / index.html

После доступа на странице contact / index.html отображается адрес электронной почты, например mailto.

Мое решение - переставить символы с помощью css и заменить элемент при наведении. Пользователь не видит никаких изменений.

const obscureHoverReverseMailTo = input => `<span style="display: inline-flex; color: rgb(0, 0, 238); cursor: pointer; text-decoration: underline;" onmouseover="const newContent = [...this.children].sort((a, b) => a.style.order - b.style.order).map(el => el.innerText).join('');this.outerHTML = \`<a href='mailto: \${newContent}'>\${newContent}</a>\`">${input.split("").map((char, index) => `<span style="order: ${index}">${char}</span>`).sort(() => 0.5 - Math.random()).join("")}</span>`;

const obscureHoverReverseMailTo = input => `<span style="display: inline-flex; color: rgb(0, 0, 238); cursor: pointer; text-decoration: underline;" onmouseover="const newContent = [...this.children].sort((a, b) => a.style.order - b.style.order).map(el => el.innerText).join('');this.outerHTML = \`<a href='mailto: \${newContent}'>\${newContent}</a>\`">${input.split("").map((char, index) => `<span style="order: ${index}">${char}</span>`).sort(() => 0.5 - Math.random()).join("")}</span>`;

document.getElementById("testRoot").innerHTML = obscureHoverReverseMailTo("hello@example.com")

<div id="testRoot"></div>

<input type="text" onkeyup="document.getElementById('testOut').innerHTML = obscureHoverReverseMailTo(this.value)">
<div id="testOut"></div>

вот функция, если вам есть что скрыть:

const obscureHoverReverse = input => `<span style="display: inline-flex" onmouseover="this.outerHTML = [...this.children].sort((a, b) => a.style.order - b.style.order).map(el => el.innerText).join('')">${input.split("").map((char, index) => `<span style="order: ${index}">${char}</span>`).sort(() => 0.5 - Math.random()).join("")}</span>`;

Я согласен с @srobinson в том, что использование онлайн-формы для кодирования в HTML-объекты кажется немного сомнительным. Несколько строк Python сделают это за вас:

def htmlEntities( string ):
    return ''.join(['&#{0};'.format(ord(char)) for char in string])

htmlEntities("barnstable@example.com")

приведенный выше результат:

'barnstable@example.com'

Это barnstable@example.com в кодировке HTML Entities (в одинарных кавычках).

Я использую функцию PHP для генерации некоторого javascript для вывода электронного письма при загрузке страницы. Обратите внимание, что вам не нужно PHP для генерации JS во время выполнения, вы можете сгенерировать JS один раз локально, а затем включить статический JS на свою страницу.

Вы также можете использовать связанную функцию с этим фрагментом ниже, чтобы автоматически скрыть адреса электронной почты в некотором заданном HTML (где $ processingContent - это HTML):

 $emailMatches = array();
 $matchCount = preg_match_all('/(?:[a-zA-Z0-9_\.\-])+\@(?:(?:[a-zA-Z0-9\-])+\.)+(?:[a-zA-Z0-9]{2,4})+/', $processedContent, $emailMatches);

 if($matchCount > 0) {
    $emailMatches = $emailMatches[0];

    foreach($emailMatches as $email) {
    $replacement = createJSMailLink($email);

    $processedContent = str_replace($email, createJSMailLink($email), $processedContent);
 }

Проверьте это .

"Enkoder Form" зашифрует ваш адрес электронной почты и преобразует результат в самооценку JavaScript, скрывая его от роботов, собирающих электронную почту, которые сканируют Интернет в поисках открытых адресов. Ваш адрес будет правильно отображаться в веб-браузерах, но будет практически неразборчив для роботов, собирающих электронную почту.