javascript - 在网站上混淆电子邮件地址的最佳方法是什么？

Question

在过去的几天里，我一直在努力更新我的个人网站。我个人网站的网址是（我的名字）.（我的姓氏）.com，因为我的姓氏很不寻常，我有幸拿到了这个域名。我的电子邮件地址是（我的名字）@（我的姓氏）.com。所以说真的，当它归结为猜测时，这并不是很难。

无论如何，我想将一个 mailto: 链接集成到我的网站中，以便人们可以与我联系。而且，尽管我的电子邮件地址不是很难猜到，但我宁愿它不被垃圾邮件机器人收集，这些机器人只是爬取网站的电子邮件地址模式并将它们添加到他们的数据库中。

混淆我的电子邮件地址的最佳方法是什么，最好是链接形式？我知道的方法有：

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

它有效，但这也意味着一旦我的网站进入谷歌，我就会在垃圾邮件中翻滚，因为垃圾邮件机器人很容易找出我的电子邮件地址。

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

这是不太理想的，因为不仅访问者无法单击它向我发送电子邮件，而且更智能的垃圾邮件机器人可能能够检测到图像包含的字符。

我知道可能没有完美的解决方案，但我只是想知道每个人都认为什么是最好的。如有必要，我绝对愿意使用 JavaScript，因为我的网站已经使用了大量的 JavaScript。

score 115 · Accepted Answer

我将字符编码为 HTML 实体（类似这样）。它不需要启用 JS，并且似乎已经阻止了大部分垃圾邮件。我想一个智能机器人可能仍然会收获它，但我没有遇到任何问题。

score 86 · Accepted Answer

就个人而言，我已经放弃隐藏我的电子邮件地址。我发现寻找更好的垃圾邮件过滤解决方案比担心混淆更容易。您可能会花费数天时间试图找到混淆地址的最佳方法，然后只需一个人将您的地址出售给垃圾邮件发送者，所有这些工作都毫无用处。

score 69 · Accepted Answer

当前接受的解决方案是创建一个允许用户向您发送电子邮件的联系表单。如果您从中收到大量垃圾邮件（我的网站上没有），那么您可以添加一个验证码以防万一，此时您将远离“唾手可得的果实”。

事实是，如果您提供了一个链接，用户可以单击该链接以在“收件人：”字段中使用您的地址弹出打开他们的电子邮件客户端，那么计算机能够从页面中破译电子邮件地址，因此可以垃圾邮件机器人。

score 45 · Accepted Answer

您提到这是针对您的个人网站的。在我的个人网站（例如，bobsomers.com）上，我只有一段这样说：

在新网站上线之前与我联系的最佳方式是给我发送电子邮件。我的电子邮件地址是我在这个网站上的名字。如果您无法从该提示中弄清楚，那么您可能会发现电子邮件比找出我的地址更具挑战性。

人们似乎能够很好地解决这个问题，因为我一直收到合法的电子邮件。有时最好的解决方案不需要编写任何代码。:)

score 28 · Accepted Answer

一种混淆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>

score 15 · Accepted Answer

显然使用 CSS 来改变文本的方向效果很好。该链接还测试了许多其他混淆方法。

无论你使用什么，都不可避免地会被打败。您的主要目标应该是避免惹恼您的用户。

score 12 · Accepted Answer

不要在这里使用任何混淆技术，因为这可能是电子邮件收割者首先要找出人们如何混淆电子邮件的地方。如果您必须在网站上显示您的电子邮件地址，请不要只是逐字复制其他人的方法；以某种其他网站没有使用过的独特方式对其进行混淆，以便收割者在访问您的网站之前不会知道您的方法。

score 10 · Accepted Answer

我的其实很简单：

<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>');
    });

score 8 · Accepted Answer

你可以像谷歌一样在谷歌代码（和组）上做。显示电子邮件的部分内容和可点击部分（“...”）。单击表示您想知道该电子邮件，并要求您填写验证码。之后，您可以看到电子邮件（和其他人？）。

score 7 · Accepted Answer

我维护的一个网站使用一种有点简单的 JavaScript 方法（希望）将垃圾邮件程序拒之门外。

电子邮件链接调用一个 JS 函数：

功能发送电子邮件（名称，域）{
    location.href = 'mailto:' + 名称 + '@' + 域；
}

为了确保只有启用了 JS 的用户才能看到该链接，请将它们写出来：

函数 writeEmailLink(realName, name, domain) {
    document.write('<a href="javascript:sendEmail(\''
      + 名称 + '\', \'' + 域 + '\')">');
    document.write(realName);
    document.write('</a>');
}

使用一个JS函数写出一个调用另一个的链接意味着有两层保护。

score 6 · Accepted Answer

6

我使用 JavaScript 混淆，例如看一下这个：

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

于 2009-04-14T18:26:47.927 回答

score 5 · Accepted Answer

正如上面的海报所说，我还使用了jottings 网站上的 JavaScript 混淆。

该网页生成一些可以改进的 JavaScript。文本字符串是清晰的mailto:并且可以被机器人识别（它可以发现这个并且不混淆这个字符串），但是如果一个人进入 jottings.com 网页，一个表单的电子邮件地址mailto:addr@site.tld而不是addr@site.tld然后删除文本mailto:从生成的 JavaScript 中，突然有一些 JavaScript 看起来似乎与电子邮件一点关系都没有——只是随机的 JavaScript，其中充满了网络。人们可以通过去掉链接文本来进一步改进这一点——我用我的电子邮件地址的图像替换了我的，它的字体相当模糊。然后，以防 jottings.com 上的这种方法变得流行起来，我随机化了输出 JavaScript 中的变量名称，以使机器人难以发现 jottings 生成的 JavaScript 代码的实例。

显然，这些改进中的一些可以内置到笔记本身的机制中，并且由于代码是公开可用的，这将相对容易。

一个例子可能会使这一点更加清楚。我在上面的链接中使用了 Jottings Obfuscator 来隐藏mailto:foo@bar.com（注意我通过输入字符串mailto:foo@bar.com而不是来欺骗 jottings 网站的初衷foo@bar.com）与文本“Send Me Email”，其中 jottings 变成了这个 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>

取回后，我将其粘贴到编辑器中，然后：

去除那个mailto:
用指向我的电子邮件地址图像的指针替换链接文本
重命名所有变量
用另一个指向电子邮件地址图像的链接替换“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>

score 3 · Accepted Answer

我不知道这有多好。页面完成加载后，您能否不留下您的电子邮件地址并使用 AJAX 调用加载它。不确定垃圾邮件机器人是否可以获取更改后的 HTML，或者它们是否足够聪明以侦听其他 HTTP 流量以尝试选择电子邮件地址，或者它们是否只是在第一次收到页面时扫描页面。

score 2 · Accepted Answer

一个人测试了九种在页面上显示电子邮件地址的不同方式，然后在他的博客上发布了结果。

他最好的三个方法是：

使用 CSS 更改代码方向
使用 CSS 显示：无
ROT13 加密

警告——这是两年前发布的。垃圾邮件机器人可能变得更聪明了。

score 1 · Accepted Answer

如果您使用 PHP，您可以获取一个自动执行此操作的免费脚本。它被称为“私人爸爸”，我们将其用于我们自己的在线音频流服务。只需一行代码，它就可以开箱即用......你可以在这里获取

score 1 · Accepted Answer

另一种方法是使用 JavaScript 框架并将数据/模型绑定到 HTML 元素。在 AngularJS 的情况下，HTML 元素将被写成：

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

插值 {{data}} 绑定使用包含实际电子邮件值的范围变量。此外，还可以使用过滤器来处理电子邮件的解码，如下所示：

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

好处在于 HTML 的编写方式。缺点是它需要脚本支持，有些人可能会拒绝。

只是另一种方法。

score 1 · Accepted Answer

使用 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 () {

$(this).html($(this).html()
.replace("...", "@").replace(/\.\.\./g, ".")
.replace(/One/g, "1")
.replace(/Two/g, "2")
.replace(/三/g, "3")
.replace(/四/g, "4")
.replace(/五/g, "5")
.replace(/六/g, "6")
.replace(/七/g, "7")
.replace(/八/g, "8")
.replace(/9/g, "9")
.replace(/Zero/g, "0"))

$(this).attr("href", $(this).attr("href")
.replace("...", "@").replace(/\.\.\./g, ".")
.replace(/One/g, "1")
.replace(/Two/g, "2")
.replace(/三/g, "3")
.replace(/四/g, "4")
.replace(/五/g, "5")
.replace(/六/g, "6")
.replace(/七/g, "7")
.replace(/八/g, "8")
.replace(/9/g, "9")
.replace(/Zero/g, "0"))

})

我在这里更详细地记录了它https://trajano.net/2017/01/obfuscating-mailto-links/

de/obfuscation 算法非常简单，所以写起来也不会太费力（不需要 base64 解析）

score 1 · Accepted Answer

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，甚至可以使用您在 ajax 调用中传递给数据的 PHP 生成的令牌，以仅接受一次 ajax 函数调用，如下所示：.one$(document).one('click', '.obfmail', function(e) {

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

jQuery：

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

.

也可以对返回的电子邮件地址进行编码或反转它。

.

电话号码也能正常工作！

score 1 · Accepted Answer

Cloudflare 现在提供免费的电子邮件混淆服务。如果您使用 Cloudlfare，这可能是一个选项。

score 0 · Accepted Answer

老实说，如果您询问 mailto 是否真的是您想要使用的东西，您的问题可能没有实际意义。例如，许多使用 Web 邮件或在浏览器中没有正确设置邮件客户端的人不会从 mailto 中受益。您正在公开您的电子邮件地址以获取对大部分用户不起作用的功能。

您可以做的是使用表单在幕后发送电子邮件，以便隐藏电子邮件地址，您不必担心不会从 mailto 中受益的可怜的 sap。

score 0 · Accepted Answer

如果您在您的网站上说“我的电子邮件地址是（我的名字）@（我的姓氏）.com。”，并且您的名字和姓氏非常明显，这似乎是最好的垃圾邮件防护你会得到的。

score 0 · Accepted Answer

如果有人在使用 Rails，他们可以使用actionview-encoded_mail_togem。( https://github.com/reed/actionview-encoded_mail_to )

有几个选项：

:encode - 此键将接受字符串“javascript”或“hex”。传递“javascript”将动态创建并编码 mailto 链接，然后将其评估到页面的 DOM 中。如果用户禁用了 JavaScript，此方法将不会在页面上显示链接。传递“十六进制”将在输出 mailto 链接之前对 email_address 进行十六进制编码。

:replace_at - 如果未提供链接名称，则使用 email_address 作为链接标签。您可以使用此选项来混淆 email_address，方法是将 @ 符号替换为作为值给出的字符串。

:replace_dot - 如果未提供链接名称，则使用 email_address 作为链接标签。您可以使用此选项通过替换 . 在电子邮件中将字符串作为值。

score 0 · Accepted Answer

<!-- 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>

score 0 · Accepted Answer

由于没有在任何地方提及此解决方案，但对我来说效果很好：

我这样做：

使用虚假电子邮件创建一个 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>

愿代码与你同在。

score 0 · Accepted Answer

如果创建指向受密码保护的目录的“联系我”链接怎么办？当然，您必须提供通行证才能访问。

“联系我” > ••••••••••• > 联系人/index.html

访问后，contact/index.html 页面会显示电子邮件，例如 mailto。

score 0 · Accepted Answer

我的解决方案是使用 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>`;

score 0 · Accepted Answer

我同意@srobinson 的观点，因为使用在线表单对 html 实体进行编码似乎有点可疑。几行python将为您完成：

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

htmlEntities("barnstable@example.com")

以上返回：

'&#98;&#97;&#114;&#110;&#115;&#116;&#97;&#98;&#108;&#101;&#64;&#101;&#120;&#97;&#109;&#112;&#108;&#101;&#46;&#99;&#111;&#109;'

这是 barnstable@example.com 编码为 HTML 实体（用单引号括起来）。

score 0 · Accepted Answer

简单的 JavaScript 无感知机器人通常会查找mailto:和/或@在 HTML 页面内容中。混淆这些关键字将大大减少电子邮件地址抓取的机会。

可以使用Base-64 编码的 URL 模板mailto:%user%@%domain%：

function contact(user, domain = location.hostname) {
  const template = atob('bWFpbHRvOiV1c2VyJUAlZG9tYWluJQ==');
  location.href = template
    .replace('%user%', user)
    .replace('%domain%', domain);
  return false;
}

'bWFpbHRvOiV1c2VyJUAlZG9tYWluJQ=='在哪里btoa('mailto:%user%@%domain%')。

HTML 链接需要更新如下：

<a href="javascript: contact('x', 'y.com')">e-mail me</a>

此外，javascript:地址可以对用户隐藏：

<a href="#" onclick="return contact('x', 'y.com')">e-mail me</a>

这些return语句阻止页面导航到#锚点。

score -1 · Accepted Answer

我使用PHP 函数生成一些 javascript 以在页面加载时输出电子邮件。请注意，运行时不需要PHP 生成 JS，您可以在本地生成一次 JS，然后将静态 JS 包含在您的页面中。

您还可以使用下面这段代码片段的链接函数来自动混淆某些给定 HTML 中的电子邮件地址（其中 $processedContent 是 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);
 }

score -2 · Accepted Answer

看看这个。

“Enkoder 表单”将加密您的电子邮件地址并将结果转换为自我评估的 JavaScript，将其隐藏在爬网寻找暴露地址的电子邮件收集机器人之外。网络浏览器将正确显示您的地址，但电子邮件收集机器人几乎无法辨认。

javascript - 在网站上混淆电子邮件地址的最佳方法是什么？

30 回答 30

Ajax 调用解决方案

Related

Reference