堆棧內存溢出
  簡體   English   中英

僅使用 CSS 保護電子郵件地址

[英]Protect e-mail address with CSS only

 原文  2014-01-29 04:14:28  5   13    html/ css/ spam-prevention/ email-address

問題描述

我想在網頁上保護我的電子郵件地址。

但我不懂 JavaScript 和 PHP。 我只知道 HTML 和 CSS。

所以，請幫助我如何僅使用 CSS 保護我的電子郵件地址。

13 個解決方案

解決方案1
 73 已采納  

這很簡單。 您可以僅使用 HTML 和 CSS 來保護您的電子郵件地址。 您不需要了解 PHP 或 Java 腳本。 試試下面的代碼。

簡單的 HTML 和 CSS 代碼：

<!doctype html>
<html>
<head>
    <title>Protect e-mail with only css</title>
    <style type="text/css">
        .e-mail:before {
            content: attr(data-website) "\0040" 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>

上面代碼的輸出：

jhon@gmail.com

請注意：

這里我只使用了兩個額外的屬性。

1) data-user把你的e-mail id 用戶名反寫。

2) data-website把你的e-mail id 網站倒過來寫。

解決方案2
 19  2014-04-04 03:31:59

試試這個代碼： 

 .e-mail:before { content: "\\006a\\0068\\006f\\006e\\0040\\0067\\006d\\0061\\0069\\006c\\002e\\0063\\006f\\006d"; }
 <span class="e-mail"></span>

這只是以十六進制編碼的電子郵件。

解決方案3
 12  2014-03-31 19:40:27

您可能知道：混淆技術不可能萬無一失，收割機機器人將繼續改進。 有許多反對混淆的論據。

話雖如此，這里有一些額外的技術，而不是你已經提到的相當有趣的技術。

HTML 技術：

  1. 使用html 注釋標志或替換html 實體在幾年前已經被證明是一種非常弱的方法。

  2. 對於大多數用戶來說，使用圖像而不是文本是一種痛苦，包括無法剪切和粘貼的非視力障礙者。 不過效果很好。

  3. 不久前有人提出了一種允許使用超鏈接的有趣的純 HTML 方法。

    <a href="mailto:jhonnotspam@gmail.com?subject=EMAIL ADDRESS NEEDS EDITING&body=Please remove the text 'notspam' from the address before sending your email.">Email me.</a>

CSS 技術：這些當然也不是萬無一失的。 除了你已經提到的：

  1. 使用 CSS display:none 也很有用。 簡單地去除樣式標簽的機器人將在獲取的地址中包含隱藏文本。

    jhon<span style="display:none">-anti-bot-bit</span>@gmail.com.

  2. 可以使用 Web 圖標字體來拉入 @圖標，並且可以以不會絆倒屏幕閱讀器的方式執行此操作。 由於顯而易見的原因，我還沒有看到帶有@ 圖標的網絡圖標字體，但這會起作用。

更新： Font Awesome現在有一個 @ 圖標。 也許有人在看到這篇文章后建議它;-)。

解決方案4
 12  2014-04-01 11:46:20

在 html 中嵌入電子郵件的一種簡單而有效的方法是使用十六進制值！ 例如 john@smith.me 的十六進制值為：

%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65

您可以在 HTML 代碼中使用以下標簽

<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;%6A%6F%68%6E%40%73%6D%69%74%68%2E%6D%65">email me</a>

這是在網頁中嵌入電子郵件的一種非常簡單有效的方法。

您以這種方式隱藏了“maito：”和電子郵件。

您可以使用此工具生成 %64 十六進制代碼

您也可以使用此工具生成十六進制代碼

解決方案5
 10  2015-07-13 22:53:22

您可以結合上面的兩個答案（ Ans1和Ans2 ）使mailto與 css 一起使用以提高可用性。 

 <style type="text/css"> .e-mail:before { content: attr(data-website) "\\0040" attr(data-user); unicode-bidi: bidi-override; direction: rtl; } </style> <a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;%6A%6F%68%6E%40%67%6D%61%69%6C%2E%63%6F%6D"> <span class="e-mail" data-user="nhoj" data-website="moc.liamg"></span> </a>

解決方案6
 3  2017-06-15 12:33:07

您可以使用字體真棒：

在<head> ：

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

在<body> ：

<p>john<i class="fa fa-at"></i>hotmail.com</p>

解決方案7
 2  2014-03-28 13:05:01

如果可能，我會建議使用 JavaScript，而不是 CSS 和 JavaScript，因為它可以操縱 dom。 你可以很容易地用像這樣的代碼來做到這一點

<div onclick="document.write('joe@' + 'joemaller.com')">Email Me</div>

這是一個簡單但並不理想的解決方案。

JFiddle; http://jsfiddle.net/yFKUD/

解決方案8
 1  2014-04-02 07:45:59

使用編碼器格式

編碼站點 url 以轉換數據電子郵件

Hide email using CSS trick (direction property)

演示

Scramble the email - While coding HTML, jumble and write the email address in reverse direction. (a@b.com should be written as moc.b@a). We can then use CSS stylesheet to reverse the email address againwhen rendering. Here's the sample HTML code with CSS.

<style type="text/css"> 
  .backwards {
      unicode-bidi:bidi-override;
      direction: rtl;
   } 
</style>

<span class="backwards">moc.b@a</span>

If someone copies your email address, it will available in the reverse direction. Would not work on older browsers.

如何使用 JavaScript 向垃圾郵件發送者隱藏您的電子郵件地址

Let's look at more advanced methods that use javascipt to hide the email (name@domain.com). Remember to use noscript tags since some users prefer to disable javascript in browsers:
  1. 基本電子郵件腳本
<script language=JavaScript>
<!--
document.write("name" + "@" + "domain.com");
//--> </script>

 2. Basic Mailto: Email Script with Link Text
<script language=JavaScript>
<!--
var user = "name";
var host = "domain.com";
var link = user + "@" + host;
document.write("<a hre" + "f=ma" + "ilto:" + user + "@" + host + ">" + link + "</a>");
//--> </script>

 3. Inline JavaScript
<a href="#" onclick="JavaScript:window.location='mailto:'+'name'+'@'+'domain'+'.com'" >Send me an email</a>
  1. 外部 JavaScript 文件
<script language="JavaScript" src="email-encoding.js"></script>
The external javascript contains the code mentioned in 2 above.

解決方案9
 1  2018-02-01 18:45:47

Flexbox 允許您更改包含元素內項目的順序，我們可以使用它來分隔和重新排序 html 中我們電子郵件地址的部分，但將它們作為一個清晰的整體呈現給用戶。 

 div { display: flex; flex-direction: row-reverse; justify-content: flex-end; }
 <div> <span>example.com</span> <span>@</span> <span>george</span> <span>Email me at the following address:&nbsp;</span> </div>

這里我們使用flex-direction: row-reverse來反轉元素的順序。

如果騙子努力嘗試，他可能會解決這個問題，他所要做的就是反轉元素以重新創建地址。 為了更徹底的嘗試，我們可以手動指定順序。 

 div { display: flex; }
 <div> <span style="order: 3">@</span> <span style="order: 4">example.com</span> <span style="order: 1">Email me at the following address:&nbsp;</span> <span style="order: 2">user</span> </div>

這里我們使用order來指定我們自己的順序，所以不能使用簡單的反向。

不幸的是，這樣做會破壞復制/粘貼，因此您的用戶必須輸入地址，但這比接收另一位尼日利亞王子的信件要好。 將此與其他技術結合使用以獲得真正防彈的電子郵件地址。

解決方案10
 0  2015-03-09 08:30:34

我使用了一段時間類似的 JavaScript 技術，它允許“mailto”功能同時保持 HTML 有效：

HTML :

<a href="http://www.domain.com" class="js-contact">user</a>

JavaScript（小型 jQuery 插件）

// mailto anti-spam

;(function($) {
        $.fn.mailTo = function() {

                this.each(function() {
                        var user = $(this).html() || false,
                domain = $(this).attr('href')
                                                    .replace('http://www.', '')
                                                    .replace('www.', '')
                                                    .replace('http://', '')
                                                    .replace('/', '') || false;

                        if (user && domain) {
                                $(this).html(user + '@' + domain).attr('href', 'mailto:' + user + '@' + domain);
                        }
                });

                return this;
        };
})(jQuery);

用法

// protect inline e-mails 
$('.js-contact').mailTo();

http://codepen.io/ced-anamorphik/pen/QwVrKZ

但最近谷歌瀏覽器在網站上顯示了網絡釣魚警告。 由於這並非完全錯誤（從技術上講，該鏈接確實被欺騙了），是否有另一個簡單的解決方案？

解決方案11
 0  2020-04-19 13:11:14

我檢查了一段時間的技術。 雖然我同意混淆不是一個完整的解決方案，但我相信它仍然是實用的，因為我通過混淆獲得零垃圾郵件而受益。

討論的一些技術：

  • 使電子郵件僅對人類可見的 CSS 技巧（請參閱@user3087089 的已接受答案）
  • 添加 HTML 垃圾來欺騙刮刀（見@fzzylogic 的回答）
  • 使用 JS 注入電子郵件（如@Dean 和其他人所建議的那樣）

此處未建議的另一種技術是通過使用base64編碼永遠不會以純格式發送電子郵件。 您只需對電子郵件進行編碼並使用 JavaScript 將其注入網頁。

我在GitHub 上構建了safe-email項目以結合所有列出的技術。 使用免費許可證非常容易。 您可以在CodePen 中查看示例。 隨意使用它並挖掘它並做出貢獻。

它只是 vanilla-JS，輕量級沒有依賴項，您可以使用電子郵件的 Base64 編碼對其進行配置。

解決方案12
 0  2021-01-25 17:54:36

我傾向於為我的客戶使用這個：

<a href="mailto:hello&commat;goodbye&period;com">hello&commat;goodbye&period;com</a>

可以肯定的是，根據經驗判斷，它在 90% 的時間內都可以工作，並且不需要 CSS/JS即可工作。 盡管我認為現在無論如何都沒有任何保護電子郵件的意義，因為幾乎所有 CDN-s 都會使用 JS 自動為您做到這一點。

解決方案13
 -1  2014-04-02 07:14:02

要禁止人們復制它，請嘗試：

span.email {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

和 HTML：

<span class="email">jack@gmail.com</span>

JSFIDDLE

為了防止機器人使用 CSS Codedirection：

<span style="unicode-bidi:bidi-override; direction: rtl;">
moc.elpmaxe@zyx
</span>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 在 Gatsby 生成的 static 站點上保護電子郵件地址不被抓取 貝寶按鈕中的貝寶電子郵件地址 如何使用CSS向預先安裝的wordpress主題添加電子郵件和地址 Evolution電子郵件客戶端中的CSS支持 在“聯系人”表單中輸入無效的電子郵件地址后，電子郵件跨度下降 一種在內聯css中隱藏HTML電子郵件中的表的方法 - 以后通過媒體查詢顯示它們 HTML電子郵件模板：是否可以僅為移動設備添加特定的CSS規則，這也適用於Gmail 在網站上混淆電子郵件地址的最佳方法？ 使用JavaScript或JQuery驗證電子郵件地址 有沒有辦法在 HTML 模式中確認電子郵件地址
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM