如何在網站上安全地分享您的電子郵件地址

如今，垃圾郵件氾濫成災。如果您想分享您的聯繫信息，又不希望被垃圾郵件淹沒，則需要一個解決方案。幾個月前，我遇到了這個問題。在研究如何解決這個問題時，我發現了一些有趣的解決方案。其中只有一個完美地滿足了我的需求。

本文將向您展示如何使用多種方法輕鬆保護您的電子郵件地址免受垃圾郵件機器人的侵害。您可以根據自己的需求選擇合適的方法。

目錄

html { scroll-behavior: smooth; } - 傳統方法

• HTML 方法
• HTML 和 CSS 方法
• JavaScript 方法
• 內嵌表單方法
• 結論

傳統方法

假設您有一個網站。您想分享您的聯繫方式，而不僅僅是分享您的社交鏈接。電子郵件地址必須存在。很簡單，對吧？您可以輸入如下內容：

<code><a href="https://www.php.cn/link/7c3b08f1b6142bceb956851f1a45442b">发送电子邮件给我</a></code>

然後根據您的喜好對其進行樣式設置。

好吧，即使此解決方案有效，它也存在一個問題。它使您的電子郵件地址對所有人（包括網站爬蟲和各種垃圾郵件機器人）都可見。這意味著您的收件箱可能會被大量不需要的垃圾信息淹沒，例如促銷優惠甚至一些網絡釣魚活動。

我們正在尋找一種折衷方案。我們希望讓機器人難以獲取我們的電子郵件地址，但對普通用戶來說盡可能簡單。

解決方案是混淆。

混淆 是使某事物難以理解的做法。此策略出於多種原因用於源代碼。其中一個原因是隱藏源代碼的目的，以使篡改或逆向工程更加困難。我們首先將研究基於混淆思想的不同解決方案。

HTML 方法

我們可以將機器人視為瀏覽網頁並爬取網頁的軟件。機器人獲取 HTML 文檔後，它會解釋其中的內容並提取信息。此提取過程稱為網絡抓取。如果機器人正在尋找與電子郵件格式匹配的模式，我們可以嘗試通過使用不同的格式來偽裝它。例如，我們可以使用 HTML 註釋：

<code><p>如果您想联系我，请发送电子邮件至 email@address.com</p></code>

看起來很亂，但用戶會看到這樣的電子郵件地址：

<code>如果您想联系我，请发送电子邮件至 [email protected]</code>

優點：

• 易於設置。
• 它可以在禁用 JavaScript 的情況下工作。
• 輔助技術可以讀取它。

缺點：

• 垃圾郵件機器人可以跳過已知的序列，例如註釋。
• 它不適用於 mailto: 鏈接。

HTML 和 CSS 方法

如果我們使用 CSS 的樣式功能來刪除僅用於愚弄垃圾郵件機器人的某些內容會怎麼樣？假設我們有與之前相同的內容，但這次我們在其中放置一個 span 元素：

<code><a href="https://www.php.cn/link/7c3b08f1b6142bceb956851f1a45442b">发送电子邮件给我</a></code>

然後，我們使用以下 CSS 樣式規則：

<code><p>如果您想联系我，请发送电子邮件至 email@address.com</p></code>

最終用戶只會看到：

<code>如果您想联系我，请发送电子邮件至 [email protected]</code>

……這就是我們真正關心的內容。

優點：

• 它可以在禁用 JavaScript 的情況下工作。
• 機器人更難獲取電子郵件地址。
• 輔助技術可以讀取它。

缺點：

• 它不適用於 mailto: 鏈接。

JavaScript 方法

在此示例中，我們使用 JavaScript 使我們的電子郵件地址不可讀。然後，頁面加載後，JavaScript 使電子郵件地址再次可讀。這樣，我們的用戶就可以獲得電子郵件地址。

最簡單的解決方案使用 Base64 編碼算法來解碼電子郵件地址。首先，我們需要將電子郵件地址編碼為 Base64。我們可以使用 Base64Encode.org 等一些網站來執行此操作。輸入您的電子郵件地址，如下所示：

然後，單擊按鈕進行編碼。使用這幾行 JavaScript，我們解碼電子郵件地址並設置 HTML 鏈接中的 href 屬性：

<code><p>如果您想联系我，请发送电子邮件至 PLEASE GO AWAY! email@address.com</p>。</code>

然後我們必須確保電子郵件鏈接包含在標記中，如下所示：

<code>span.blockspam {
  display: none;
}</code>

我們使用 atob 方法來解碼 Base64 編碼數據的字符串。另一種方法是使用一些基本的加密算法，例如凱撒密碼，這在 JavaScript 中很容易實現。

優點：

• 機器人更難獲取電子郵件地址，尤其是在使用加密算法的情況下。
• 它適用於 mailto: 鏈接。
• 輔助技術可以讀取它。

缺點：

• 必須在瀏覽器上啟用 JavaScript，否則鏈接將為空。

內嵌表單方法

聯繫表單隨處可見。您肯定至少使用過其中一個。如果您希望人們直接與您聯繫，可能的解決方案之一是在您的網站上實現聯繫表單服務。

Formspree 是一個提供聯繫表單所有優勢而無需擔心服務器端代碼的服務示例。 Wufoo 也是如此。事實上，您可以考慮使用許多服務來處理您的聯繫表單提交。

使用任何表單服務的第一步是註冊並創建一個帳戶。當然，定價會有所不同，不同服務之間提供的功能也會有所不同。但是，大多數服務都會為您提供一個 HTML 代碼片段，以便將您創建的表單嵌入到任何網站或應用程序中。這是我從我在 Formspring 帳戶中創建的表單中直接提取的一個示例

<code>如果您想联系我，请发送电子邮件至 [email protected]。</code>

您的電子郵件： 您的消息： 發送在第一行，您應該根據您的端點自定義操作。此表單非常基本，但您可以根據需要添加任意數量的字段。

請注意第 9 行中的隱藏輸入標記。此輸入標記可幫助您過濾常規用戶和機器人提交的內容。事實上，如果 Formspree 的後端看到填寫了該輸入的提交，它將將其丟棄。普通用戶不會這樣做，所以它一定是一個機器人。

優點：

• 您的電子郵件地址是安全的，因為它不是公開的。
• 它可以在禁用 Javascript 的情況下工作。

缺點：

• 依賴於第三方服務（這可能是優點，取決於您的需求）

此解決方案還有一個缺點，但我將其從列表中刪除了，因為它非常主觀，並且取決於您的用例。使用此解決方案，您不會共享您的電子郵件地址。您正在為人們提供與您聯繫的方式。如果人們想要給您發電子郵件怎麼辦？如果人們正在尋找您的電子郵件地址，而他們不需要聯繫表單怎麼辦？在這種情況下，聯繫表單可能是一個過於強硬的解決方案。

結論

我們到達了終點！在本教程中，我們討論了在線電子郵件共享問題的不同解決方案。我們介紹了不同的想法，包括 HTML 代碼、JavaScript 甚至 Formspree 等在線服務來構建聯繫表單。在本教程結束時，您應該了解所顯示策略的所有優缺點。現在，您可以根據您的具體用例選擇最合適的策略。

以上是如何在網站上安全地分享您的電子郵件地址的詳細內容。更多資訊請關注PHP中文網其他相關文章！