問題描述

長話短說

從機器人隱藏電子郵件地址，而不使用指令碼並維護 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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。