Html 如何在网站上显示电子邮件地址以避免垃圾邮件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23002711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show email addresses on the website to avoid spams?
提问by Hyman
I show email on my website as following
我在我的网站上显示电子邮件如下
<a href="mailto:[email protected]">Email</a>
But I read the following while analysing my website using woorank.com, what should I do to avoid this?
但是我在使用woorank.com分析我的网站时阅读了以下内容，我应该怎么做才能避免这种情况？
Malicious bots scrape the web in search of email addresses and plain text email addresses are more likely to be spammed.
恶意机器人抓取网络以搜索电子邮件地址，而纯文本电子邮件地址更有可能被发送垃圾邮件。
采纳答案by Singular1ty
There are multiple different choices for hiding emails on websites, commonly using either the HTML entity version of the email address (as Aziz-Saleh suggested), but from an actual web designpoint of view, just putting the email address like that on a website isn't the most user friendly thing to do.
在网站上隐藏电子邮件有多种不同的选择，通常使用电子邮件地址的 HTML 实体版本（如 Aziz-Saleh 建议的），但从实际网页设计的角度来看，只需将电子邮件地址放在网站上不是最用户友好的事情。
For instance, the mailto:link automatically triggers the browser to open the user's Email Application of choice - but consider this. Not everybody hasa dedicated email application. For instance, I don't use Outlook (I'm a Windows user), and unless I have Windows Live Mail installed, my computer can't open that link. I thinkChrome can open the links into GMail if you're signed in, but I would need to check that.
例如，该mailto:链接会自动触发浏览器打开用户选择的电子邮件应用程序 - 但请考虑这一点。并非每个人都有专用的电子邮件应用程序。例如，我不使用 Outlook（我是 Windows 用户），除非我安装了 Windows Live Mail，否则我的计算机无法打开该链接。如果您已登录，我认为Chrome 可以打开 GMail 中的链接，但我需要检查一下。
Ultimately, by using mailto:, you are potentially alienating a portion of your userbase that will not be able to use that link in the first place.
最终，通过使用mailto:，您可能会疏远一部分最初无法使用该链接的用户群。
I would suggest using email forms, and there are plenty of easy-to-follow tutorials available for both PHP and your language of JSP, such as this link here: Sending Email in JSPand even on StackOverflow
我建议使用电子邮件表单，并且有很多易于遵循的教程可用于 PHP 和您的语言JSP，例如这里的链接：在 JSP 中甚至在StackOverflow上发送电子邮件
By using your server to send the email, you get tighter control over how the email is generated, what data the user is allowed to put in, and you could even send them a return email (generated by the server) to confirm that you have received their message. This is a tried-and-tested real-world method of allowing customers and visitors to contact you, whilst still giving you protection and control over the entire process.
通过使用您的服务器发送电子邮件，您可以更严格地控制电子邮件的生成方式、允许用户放入哪些数据，您甚至可以向他们发送一封回复电子邮件（由服务器生成）以确认您拥有收到了他们的消息。这是一种久经考验的真实世界方法，允许客户和访客与您联系，同时仍然为您提供保护和控制整个过程。
TL;DR: Raw mailto:links might alienate people without dedicated email programs, whereas if you use JSP forms, you can control how they contact you, with what information (you can use fields and the HTML5 requiredattribute to mandate certain input fields) and you can even respond with a do-not-replyemail so they know their message was heard (just don't forget to ask for their email address)
TL;DR：原始mailto:链接可能会疏远没有专用电子邮件程序的人，而如果您使用 JSP 表单，您可以控制他们与您联系的方式，提供哪些信息（您可以使用字段和 HTML5required属性来强制要求某些输入字段），并且您可以甚至用do-not-reply电子邮件回复，让他们知道他们的消息被听到了（只是不要忘记询问他们的电子邮件地址）
回答by JazzyP
In the past I have seen this done with javascript. Basically you assign the email address to javascript variables and change the contents of an element using these. You can also provide a fallback for users with javascript disabled which points them in the direction of a form if you need to. Here's an example
在过去，我曾看到过使用 javascript 完成此操作。基本上，您将电子邮件地址分配给 javascript 变量并使用这些变量更改元素的内容。如果需要，您还可以为禁用 javascript 的用户提供后备，将他们指向表单的方向。这是一个例子
var user = 'foo',
domain = 'bar.com',
element = document.getElementById('email');
element.innerHTML = user + '@' + domain;
//OR
//'<a href="mailto:' + user + '@' + domain + '">Email</a>'
This way bots never see the email address as they do not load javascript.
这样，机器人永远不会看到电子邮件地址，因为它们不会加载 javascript。
回答by Jani Hyyti?inen
Well, you can figure out a different way every day. Here's one using jQuery.
好吧，你可以每天想出不同的方法。这是一个使用 jQuery 的。
<a class="mail" href="mailto:[email protected]">e-mail</a>
Then handle the click with jQuery.
然后用 jQuery 处理点击。
$('a.mail').on('click', function(){
var href = $(this).attr('href');
$(this).attr('href', href.replace('badmail.', ''));
});
The reason I like this is that I can let the spammers spam the dummy mail domain thinking they got yet another e-mail harvested. If I was maintaining my own spam filter, I could collect samples to my bad bucket.
我喜欢这个的原因是我可以让垃圾邮件发送者向虚拟邮件域发送垃圾邮件，以为他们又收到了一封电子邮件。如果我维护自己的垃圾邮件过滤器，我可以将样本收集到我的坏桶中。
Also, this approach allows you to render the page quite clean with dynamic data and simply have the javascript snippet only once on the whole site to handle the real user clicks.
此外，这种方法允许您使用动态数据非常干净地呈现页面，并且只需在整个站点上只使用一次 javascript 片段来处理真实的用户点击。
Works also on mobiles.
也适用于手机。
回答by Aziz Saleh
Solution 1:
解决方案1：
You can use many publicly available email address encoders like (first result on google):
您可以使用许多公开可用的电子邮件地址编码器，例如（google 上的第一个结果）：
http://www.wbwip.com/wbw/emailencoder.html
http://www.wbwip.com/wbw/emailencoder.html
This encodes the emails into their character entity value, this will require more logic form scrapers to decode it.
这将电子邮件编码为它们的字符实体值，这将需要更多的逻辑表单抓取器来解码它。
So an email like: [email protected]becomes test@gmail.comwhich can be used in a mailto as well.
因此，像电子邮件：[email protected]成为test@gmail.com能够在一个mailto被使用。
Solution 2:
解决方案2：
Use an online email to image converter (again first result on google):
使用在线电子邮件到图像转换器（再次在 google 上获得第一个结果）：
http://www.email2image.com/Convert-Email-to-Image.aspx
http://www.email2image.com/Convert-Email-to-Image.aspx
To make it as an image. Other services enable you to do this automatically via an API like:
使其成为图像。其他服务使您能够通过 API 自动执行此操作，例如：
https://www.mashape.com/seikan/img4me-text-to-image-service#!endpoint-Main
https://www.mashape.com/seikan/img4me-text-to-image-service#!endpoint-Main
回答by Eoin
The trouble with the JavaScript solutions is that people with JS turned off will also not see the email address. Albeit a minority you need a combination of techniques for the best results.
JavaScript 解决方案的问题是关闭 JS 的人也看不到电子邮件地址。尽管是少数，但您需要多种技术组合才能获得最佳效果。
Many of these techniques are detailed here, but I have provided the solutions only: https://www.ionos.co.uk/digitalguide/e-mail/e-mail-security/protecting-your-e-mail-address-how-to-do-it/
此处详细介绍了其中许多技术，但我仅提供了解决方案：https: //www.ionos.co.uk/digitalguide/e-mail/e-mail-security/protecting-your-e-mail-address-怎么做/
Comments
注释
<p>If you have any questions or suggestions, please write an e-mail to:
us<!-- abc@def -->er@domai<!-- @abc.com -->n.com.
</p>
Hidden Spans
隐藏跨度
<style type="text/css">
span.spamprotection {display:none;}
</style>
<p>If you have any questions or suggestions, please write an e-mail to:
user<span class="spamprotection">CHARACTER SEQUENCE</span>@domain.com.
</p>
Reverse StringsThis may not be friendly for multilingual sites.
反向字符串这对于多语言站点可能不友好。
<style type="text/css">
span.ltrText {unicode-bidi: bidi-override; direction: rtl}
</style>
<p>If you have any questions or suggestions, please write an e-mail to:
<span class="ltrText"> moc.niamod@resu</span>.
</p>
JavaScript as in many other answers
JavaScript 和许多其他答案一样
<script type="text/javascript">
var part1 = "user";
var part2 = Math.pow(2,6);
var part3 = String.fromCharCode(part2);
var part4 = "domain.com"
var part5 = part1 + String.fromCharCode(part2) + part4;
document.write("If you have any questions or suggestions, please write an e-mail to:
<href=" + "mai" + "lto" + ":" + part5 + ">" + part1 + part3 + part4 + "</a>.");
</script>
ROT13 EncryptionJavaScript dependant but also helps with GDPR as it's encrypted.
ROT13 加密依赖于 JavaScript，但也有助于 GDPR，因为它是加密的。
<script type="text/javascript">
function decode(a) {
return a.replace(/[a-zA-Z]/g, function(c){
return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13)
? c : c - 26);
})
};
function openMailer(element) {
var y = decode("znvygb:[email protected]");
element.setAttribute("href", y);
element.setAttribute("onclick", "");
element.firstChild.nodeValue = "Open e-mail software";
};
</script>
<a id="email" href=" " onclick='openMailer(this);'>E-mail: please click</a>
CSS OnlyBorrowed from here: Protect e-mail address with CSS only
仅 CSS借用自此处：仅使用 CSS 保护电子邮件地址
<!doctype html>
<html>
<head>
<title>Protect e-mail with only css</title>
<style type="text/css">
.e-mail:before {
content: attr(data-website) "<script>(function whatever(){var s='@',n='nabil',k='kadimi.com',e=n+s+k,l='<a href=mailto:{{[email protected]}}>{{[email protected]}}</a>'.replace(/{{.+?(}})/g,e);document.write(l)})()</script>
40" attr(data-user);
unicode-bidi: bidi-override;
direction: rtl;
}
</style>
</head>
<body>
<span class="e-mail" data-user="nohj" data-website="moc.liamg"></span>
</body>
</html>
回答by Nabil Kadimi
Personally, I came up with this, pretty straightforward and kinda funny, I throw this code where I want my email address to appear:
就个人而言，我想出了这个，非常简单而且有点有趣，我把这段代码放在我希望我的电子邮件地址出现的地方：
<script>
(function whatever() {
var s = '@'
, n = 'nabil'
, k = 'kadimi.com'
, e = n + s + k
, l = '<a href=mailto:{{[email protected]}}>{{[email protected]}}</a>'.replace(/{{.+?(}})/g, e)
;
document.write(l);
})();
</script>
Expanded
展开
<script>(function whatever(){var s='@',n='nabil',k='kadimi.com',e=n+s+k,l='<a href=mailto:{{[email protected]}}>{{[email protected]}}</a>'.replace(/{{.+?(}})/g,e);document.write(l)})()</script>Demo
演示
<a href="mailto:info@example.com">info@example.com</a>
回答by AlexPrinceton
I use email encoders like http://www.wbwip.com/wbw/emailencoder.html. Just put your address to the source and between the "a" tags. Something like this
我使用电子邮件编码器，如http://www.wbwip.com/wbw/emailencoder.html。只需将您的地址放在来源和“a”标签之间。像这样的东西
##代码##It is encoding of [email protected]
它是 [email protected] 的编码
回答by A. Riesbeck
Google actually provides a service for this. Free to use and works pretty well: Mail ReCaptcha
谷歌实际上为此提供了一项服务。免费使用且运行良好：Mail ReCaptcha
回答by Ryan
I've been using CloudFlare's free Email Address Obfuscation feature:https://support.cloudflare.com/hc/en-us/articles/200170016-What-is-Email-Address-Obfuscation-
我一直在使用CloudFlare 的免费电子邮件地址混淆功能：https : //support.cloudflare.com/hc/en-us/articles/200170016-What-is-Email-Address-Obfuscation-
Email harvesters and other bots roam the Internet looking for email addresses to add to lists that target recipients for spam. This trend results in an increasing amount of unwanted email.
Web administrators have come up with clever ways to protect against this by writing out email addresses (i.e., help [at] cloudflare [dot] com) or by using embedded images of the email address. However, you lose the convenience of clicking on the email address to automatically send an email.
By enabling Cloudflare Email Address Obfuscation, email addresses on your web page will be obfuscated (hidden) from bots, while keeping them visible to humans. In fact, there are no visible changes to your website for visitors.
To prevent unexpected website behavior, email addresses are not obfuscated when they appear in:
- Any HTML tag attribute, except for the
hrefattribute of theatag.- Other HTML tags
- Any page that does not have a MIME type of "text/html" or "application/xhtml+xml"
电子邮件收集器和其他机器人在 Internet 上漫游，寻找电子邮件地址以添加到以垃圾邮件收件人为目标的列表中。这种趋势导致不需要的电子邮件数量不断增加。
Web 管理员通过写出电子邮件地址（即 help [at] cloudflare [dot] com）或使用电子邮件地址的嵌入图像，想出了聪明的方法来防止这种情况发生。但是，您失去了单击电子邮件地址以自动发送电子邮件的便利。
通过启用 Cloudflare 电子邮件地址混淆，您网页上的电子邮件地址将被机器人混淆（隐藏），同时保持它们对人类可见。事实上，对于访问者来说，您的网站没有明显的变化。
为防止出现意外的网站行为，电子邮件地址在出现在以下位置时不会被混淆：
- 所有的HTML标签属性，除了
href在属性a标签。- 其他 HTML 标签
- 任何没有 MIME 类型“text/html”或“application/xhtml+xml”的页面
I'm not affiliated with CloudFlare. I just appreciate all that they offer for free.
我不隶属于 CloudFlare。我只是感谢他们免费提供的一切。
回答by Usman
Put your email address on a transparent image in png or gif format and display that image on your web pages. Only a human reader would know the image is showing an email address. This will prevent bots from finding your email address on your website.
将您的电子邮件地址放在 png 或 gif 格式的透明图像上，并在您的网页上显示该图像。只有人类读者会知道图像显示的是电子邮件地址。这将防止机器人在您的网站上找到您的电子邮件地址。
