問題描述

長話短説

從機器人隱藏電子郵件地址，而不使用腳本並維護 mailto: 功能。方法也必須支持 screen-readers 。

總結

  • 電子郵件混淆，不使用腳本或聯繫表單

  • 電子郵件地址需要對人類觀察者完全可見，並維護 mailto: 功能

  • 電子郵件地址不得為圖像形式。

  • 電子郵件地址必須是從 spam-crawlers 和 spam-bots 和任何其他收割機類型中隱藏的”completely”

理想效果：

  • 沒有腳本。在項目中沒有使用腳本，我想保持這樣的方式。

  • 電子郵件地址顯示在頁面上，或者可以在某種用户交互之後輕鬆顯示，如打開模態。

  • 用户可以點擊電子郵件地址，這又會觸發 mailto: 功能。

  • 點擊電子郵件將打開用户的電子郵件應用程序。換句話説，mailto: 功能必須工作。

  • 電子郵件地址不可見或未標識為漫遊器的電子郵件地址 (包括頁面源)

  • 我沒有收到垃圾郵件的收件箱

什麼不工作

  • 添加聯繫表單 – 或任何類似的 – 而不是我討厭聯繫表單的電子郵件地址。我很少填寫聯繫表。如果沒有電子郵件地址，我會尋找一個電話號碼，如果沒有電話號碼，我會開始尋找替代服務。我只會填寫一個聯繫表格，如果我絕對必須。

  • 使用地址的圖像替換地址對於使用屏幕閲讀器的人來説，這造成了一個巨大的缺點 (請記住您未來的項目中的視障者)，除非您將圖像可點擊，還可以將 mailto: 功能添加為 mailto: 功能，還可以刪除 mailto: 功能 href 用於鏈接，但是失敗的目的，現在的電子郵件是可見的機器人。

什麼可能工作：

  • pseudo-elements 在 CSS 中的巧妙使用

  • 使用 base64 編碼的解決方案

  • 打破電子郵件地址並將文件傳播到文檔中，然後在用户單擊按鈕時將其重新組合在一起 (這可能涉及多個 CSS 類和 anchor tags 的使用)

  • 通過 CSS @MortezaAsadi 更改 html 屬性優雅地提出了以下評論的可能性。這是到完整的鏈接 – 文章是從 2012 年：What if We Could Use CSS to Alter HTML Attributes?

  • 其他創造性的解決方案超出了我的知識範圍。

類似問題/修復

(這是 Joe Maller 建議的一個很好的修復，它的效果很好，但它是基於腳本的，這就是它的樣子;



<SCRIPT TYPE="text/javascript">

  emailE = 'emailserver.com'

  emailE = ('yourname' + '@' + emailE)

  document.write('<A href="mailto:'%20+%20emailE%20+%20'">' + emailE + '</a>')

</script>



<NOSCRIPT>

  Email address protected by JavaScript

</NOSCRIPT>

問題：

通過組合兩個或多個修復 (或甚至添加新的修補程序)，可以提高上述電子郵件混淆方法的效率 (即儘可能少的垃圾郵件)，同時

A-維護 mailto: 功能; 和

B-支持 screen-readers

編輯：

下面的許多答案和評論構成了一個非常好的問題，同時指出不可能做到這一點沒有某種 js

問題/暗示是：

Why not use js?

答案是我對 js 過敏

開玩笑説，

我問這個問題的三個主要原因是：

  • 聯繫表格越來越被接受為替代提供電子郵件地址 – 他們不應該。

  • 如果可以在沒有腳本的情況下完成，那麼應該沒有腳本。

  • 好奇：(實際上我正在使用 js 修復程序之一)，我想看看討論這個問題是否會導致更好的方法。

最佳解決方法

您的請求的問題特別是 「支持 screen-readers」，如定義屏幕閲讀器是一種”bot” 。如果一個 screen-reader 能夠解釋電子郵件地址，那麼 page-crawler 也可以解釋它。

此外，mailto 屬性的要點是如何在網絡上執行電子郵件地址的標準。詢問是否有第二種方法可以提出是否有第二種標準。

通過腳本進行操作仍然會出現與頁面加載相同的問題，腳本將被運行，並且在 DOM 中呈現的電子郵件地址 (除非您在點擊或某些東西上填寫電子郵件地址) 。無論哪種方式，屏幕閲讀器仍然會有問題，因為它還沒有加載。

老實説，只需要獲得一個電子郵件服務，一個體面的垃圾郵件過濾器，並指定一個默認的主題行，您可以輕鬆地在收件箱中進行排序。

<a href="mailto:no-one@no-where.com?subject=Something%20to%20filter%20on">Email me</a>

你所要求的是如果標準有兩種方式來做某事，一種是機器人，另一種用於 non-bots 。答案是沒有，你必須儘可能最好地打殭屍。

次佳解決方法

擊敗電子郵件機器人是一個艱難的。你可能想查看維基百科上的 Email Address Harvesting countermeasures section 。

我的 back-story 是我寫了一個搜索機器人。它在多年前的初始運行期間抓取了 105,000 多個 URL 。從我從中學到的知識是，網頁抓取機器人可以看到一切都是網頁上出現的文字。機器人讀取除圖像之外的一切

由於以下原因，垃圾郵件無法通過代碼輕鬆停止：

  1. CSS& 使用 mailto：標籤時，JS 是無關緊要的。機器人專門查看該”mailto:” 關鍵字的 HTML 頁面。從冒號到下一個單引號或雙引號 (以先到者為準) 的所有內容都被視為電子郵件地址。 HTML 實體電子郵件地址 (如上面的示例) 可以使用反向 ASCII 方法/函數快速翻譯。運行上面的 JavaScript 代碼片段，可以快速地將以&＃121;&＃111;&＃117;&＃114; … 開頭的字符串轉換為… “yourname@domain.com” 。 (我的搜索機器人用 mailto：電子郵件地址丟棄 hrefs，因為我想要網頁和不是電子郵件地址的 URL)

  2. 如果一個頁面崩潰機器人，機器人作者將調整機器人以修復與該頁面的崩潰，以便將來該機器人不會再次崩潰在該頁面。從而使他們的機器人更聰明。

  3. Bot 作者可以編寫機器人，這些機器人可以產生所有已知的電子郵件地址變化，而無需抓取頁面和從不使用任何起始地址。雖然這樣做可能不可行，但今天的 high-core 計數 CPU(即 hyper-threaded 和運行在 4+ GHz 以上) 並不是不可想象的，加上使用分佈式 cloud-based 計算 CPU 的可用性。甚至超級電腦。可以想象，有人現在可以創建一個 bot-farm 來垃圾郵件，無需知道任何人的電子郵件地址。 20 年前，這是不可理解的。

  4. 免費電子郵件提供商有向其廣告客户銷售免費用户帳户的歷史。過去，只需註冊一個免費的電子郵件帳户，就可以自動保證他們有一個綠燈，開始向該電子郵件地址發送垃圾郵件，而無需在線使用該電子郵件地址。我已經看到發生了多次，有着名的公司名稱。 (我不會提到任何名字。)

  5. mailto：關鍵字是此 IETF RFC 的一部分，其中構建瀏覽器以自動啓動默認電子郵件客户端，其中包含該關鍵字的鏈接。必須使用 JavaScript 來中斷該應用程序的啓動過程。

我不認為可以在使用傳統電子郵件服務器的同時停止 100％的垃圾郵件，而不需要在電子郵件服務器上使用過濾器，也可能使用圖像。

還有一個選擇… 您還可以建立一個 chat-like 電子郵件客户端，它在網站內部運行。這將像 Facebook 的聊天客户端。這是 「像電子郵件」，但不是真正的電子郵件。這是簡單的 1 對 1 即時通訊與歸檔功能… auto-loads 登錄時。由於它具有文檔附件+鏈接功能，它的工作原理就像電子郵件… 但沒有垃圾郵件。只要您不構建外部可訪問的 API，那麼它是一個封閉的系統，人們無法向其發送垃圾郵件。

如果您打算嚴格遵守傳統的電子郵件，那麼您最好的選擇就是在公司的電子郵件服務器上運行 Apache 的 SpamAssassin 。

您也可以嘗試結合上面列出的多種策略，使電子郵件收集器更難從網頁中收集電子郵件地址。他們不會在 100％的時間內停止 100％的垃圾郵件，同時還允許 100％的屏幕閲讀器為盲人訪問。

您已經創建了一個非常好的開始，看看傳統電子郵件有什麼問題！為你做這件事！

一個很好的屏幕閲讀器是 Freedom Scientific 的 JAWS 。以前我曾經使用過這種方式來聽我的網頁是如何被盲人用户閲讀的。 (如果您聽到男性聲音同時閲讀兩個動作 (例如點擊鏈接) 和文本，請嘗試將 1 個聲音更改為女性，以便 1 個語音讀取動作，另一個讀取文本，這樣可以更容易地瞭解網頁是如何為視覺上看不到)

祝你好運與你的 Email Address Harvesting countermeasure 一起努力！

第三種解決方法

這是一種使用 JavaScript 的方法，但具有相當小的 foot-print 。它也是非常”ghetto”，一般來説，我不會推薦使用內聯 JS 在 HTML 中的方法，除非你非常不情願使用 JS 。



<a
  href="#"
  data-contact="bGUtZW1haWxAdGhlLWRvbWFpbi5jb20="
  data-subj="QW4gQW1hemluZyBTdWJqZWN0"
  onfocus="this.href = 'mailto:' + atob(this.dataset.contact) + '?subject=' + atob(this.dataset.subj || '')"
  >
  Send an email
</a>

data-contact 是 base64 編碼的電子郵件地址。而且，data-subj 是一個可選的 base64 編碼對象。

在沒有 JS 的情況下執行此操作的主要挑戰是 CSS 不能更改 HTML 屬性。 (您鏈接的 article 是一個”pie-in-the-sky”，並且對今天或將來的可能性沒有任何影響。)

您提到的 HTML 實體方法或其中的一些變體可能是具有一定功效的最簡單的選項。此外，iframe 方法很聰明，server redirect approach 非常棒。但是，這三個機器人都容易受到機器人攻擊：

通過上述方法，在 data-contact 屬性中使用 base64 編碼的電子郵件地址是非常”one-off” – 只要刮刀不是專門為您的站點設計的，它應該可以工作。

第四種方法

寫刮刀的人希望使刮刀儘可能高效。因此，它們不會下載樣式，腳本和其他外部資源。我沒有辦法使用 CSS 設置 mailto 鏈接。另外，你具體説你不想使用 Javascript 設置鏈接。

如果您考慮其他類型的資源，還有外部文檔 (即使用 iframe 的 HTML 文檔) 。幾乎沒有刮刀會麻煩下載 iframe 的內容。所以你可以簡單地做：

index.html 的：

<iframe src="frame.html" style="height: 1em; width: 100%; border: 0;"></iframe>

frame.html：

My email is <a href="mailto:me@example.com" target="_top">me@example.com</a>

對於人類用户，iframe 看起來就像普通文本。默認情況下，iframe 是內聯和透明的，所以我們只需要設置其邊框和尺寸。您不能使 iframe 的大小與其內容的大小匹配，而不使用 Javascript，因此我們可以做的最好是給它預定義的維度。

第五種方法

首先，我不認為任何與 CSS 有關的工作。所有機器人 (Google 的抓取工具除外) 只會忽略網站上的所有樣式。任何解決方案必須與 JS 或 server-side 一起使用。

server-side 解決方案可能正在製作一個鏈接到新標籤的<a>，它只是重定向到所需的 mailto：

這就是我現在所有的想法。希望它有幫助。

第六種方法

簡單+很多 @ +可編輯沒有工具



<a href="mailto:user@domain@@com"
   onmouseover="this.href=this.href.replace('@@','.')">
   Send email
</a>

第七種方法

滿足您所有要求的簡短答案是，這是不可能的

一些在這裏回答的 script-based 選項可能適用於某些機器人，但是您想要 no-script，所以不，你不能。

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。