如何在網頁上隱藏你的Email郵件地址

Web開發者發表於2014-01-18
網頁AI

　　作者：Amit Agarwal  翻譯：newghost

　　你有一個網站，你想把email地址放在上面，讓別人可以很方便地聯絡你，但是你又擔心一旦公開郵箱地址，垃圾郵件可能會像洪水一樣湧來。

　　你的擔心是對的。現在網上抓取郵件地址的蜘蛛爬蟲僅僅通過一條簡單的正規表示式，就可以輕易地獲取到你的郵件。但是你可能通過一些簡單的CSS和 JavaScript來欺騙一些不太聰明的爬蟲。（注* 網路爬蟲確實已經充斥了網際網路，參見：人類只佔到網際網路流量的40%不到）

　　1. 通過CSS隱藏郵件地址

　　1a. 使用CSS偽類（pseudo-classes）

　　你可以使用CSS中的::before 和 ::after偽元素插入email的使用者名稱和@另一邊的域名。網路蜘蛛，一般是看不到CSS的，直到瀏覽器渲染前，他都只能看到一個@符號。在這個例子裡，我們將隱藏 john@gmail.com

<style>
  my-email::after {
    content: attr(data-domain);
  }
  my-email::before {
    content: attr(data-user);
  }
</style>
 
<!--通過 data-user 和 data-domain 設定email的使用者名稱和域名-->  
<my-email data-user="john" data-domain="gmail.com">@</my-email>

　　更新：這是@orlie建議的另一個版本，這個對爬蟲來說更加的晦澀，因為它將@也隱藏起來了。

<style>
  my-email::after {
    content: attr(data-domain);
  }
  my-email::before {
    content: attr(data-user) "\0040";
  }
</style>
 
<!--通過 data-user 和 data-domain 設定email的使用者名稱和域名--> 
<my-email data-user="john" data-domain="gmail.com"></my-email>

　　上面的解決方案有一個缺陷，使用者無法在你的網頁上選擇和複製你email地址，他們只能手動地寫下來。

　　如果想讓這個使用者體驗變得好一點，即允許使用者選擇到這些偽元素，你也可以用下面這種方式，僅"@"是不可選擇的：

<style>
  .domain::before {
    content: "\0040";    /* Unicode character for @ symbol */
  }
</style>
 
john<span class="domain">abc.com</span>

　　1b. 倒序輸出

　　你可以倒序輸出你的email地址（john@abc.com as moc.cba@nhoj）然後通過unicode-bidi和direction CSS屬性讓瀏覽器倒序輸出文字。這些文字是可選擇的，但是複製出來是倒序的。

<style>
  .reverse {
    unicode-bidi: bidi-override;
    direction: rtl;
  }
</style>
 
<!-- 在HTML裡倒序輸出你的郵件地址。-->
<span class="reverse">moc.cba@nhoj</span>

　　1c. 關閉顯示（display）

　　你可以在你的郵件地址裡輸出一些多餘的字元，然後使用display屬性隱藏這些字元，來顯示真實的郵件地址。

<style>
  #dummy {
    display: none;
  }
</style>
 
<!-- 你可以新增任意數量的z標籤 -->
john<span id="dummy">REMOVE</span>@abc<span id="dummy">REMOVE</span>.com

　　2. 通過JavaScript混淆電子郵件

　　2a. 使用'onclick'事件

　　你然後可以在mailto的連結中輸出你的郵件地址，你僅需要替換到一些字提示符：像'.'和'@'字元可以使用文字代替。然後新增一個onclick事件將這些特殊轉換過來。

<a href = "mailto:johnATgmailDOTcom" 
   onclick = "this.href=this.href
              .replace(/AT/,'&#64;')
              .replace(/DOT/,'&#46;')"
>聯絡我</a>

　　2b. 亂序陣列

　　將你的郵件地址分割成多個部分的陣列，然後使用JavaScript輸出正確的順序再使用.innerHTML屬性新增到網頁上。

<span id="email"></span> 
〈script〉
  var parts = ["john", "abc", "com", "&#46;", "&#64;"];
  var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
  document.getElementById("email").innerHTML=email;
〈/script〉

　　3. WordPress + PHP

　　如果你使用的是WordPress，你也可以考慮使用內建的反爬蟲外掛來編碼（加密）你的郵件地址。這個外掛會將字元轉換成HTML格式的編碼（如字母a變成&#97; 而且符號 @ 會變成&#64;）這些字元都是可以在網頁上直接顯示的。

<?php echo antispambot("john@abc.com"); ?>

　　你也可以在瀏覽上編碼。

　　最後，如果你真的不希望網路爬蟲看到你的郵件地址，不要將它放到網頁上，你可以試一試Google的reCAPTCHA服務。它會將你的郵件隱藏在驗證碼（CAPTCHA）後面，人們只有輸入正確的驗證碼才可以看到郵件地址。

　　原文 labnol.org

相關文章