Email 地址加密防爬蟲：JavaScript 實體編碼與剪貼板複製

為什麼要加密 Email？

在網頁直接顯示 user@example.com 會被垃圾郵件機器人爬取。常見防禦手段包括：

• 圖片顯示
• JavaScript 動態組裝
• CSS 反向顯示 / 隱藏干擾字元
• HTML 實體編碼 (本文核心方案)

核心加密邏輯：字元實體化

將每個字元轉換為 &#ASCII碼; 格式。瀏覽器渲染時會自動解析為可讀文字，但原始碼中無明文 Email。

function encodeEmailToEntities(email) {
  let encoded = '';
  for (let i = 0; i < email.length; i++) {
    encoded += '&#' + email.charCodeAt(i) + ';';
  }
  return encoded;
}

// 範例
const raw = 'davidz94@yahoo.com';
const encoded = encodeEmailToEntities(raw);
// 輸出: davidz94@yahoo.com
// 瀏覽器顯示: davidz94@yahoo.com

完整互動式 Demo 實作

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Email 加密工具</title>
</head>
<body>
  <h2>Email 地址實體編碼加密</h2>
  
  <label>原始 Email: <input type="email" id="rawEmail" value="test@example.com" /></label>
  <button id="btnEncode">加密為實體編碼</button>
  <button id="btnCopy">複製加密結果</button>
  <button id="btnPreview">預覽渲染效果</button>
  
  <h3>加密結果 (可直接貼入 HTML)：</h3>
  <textarea id="encodedResult" rows="3" cols="60" readonly></textarea>
  
  <h3>瀏覽器渲染預覽：</h3>
  <div id="previewArea" style="border:1px solid #ccc; padding:10px; min-height:2em;"></div>

  <script>
    const $ = id => document.getElementById(id);
    
    // 核心加密函式
    function encodeEmail(str) {
      return [...str].map(ch => '&#' + ch.charCodeAt(0) + ';').join('');
    }
    
    $('btnEncode').onclick = () => {
      $('encodedResult').value = encodeEmail($('rawEmail').value);
    };
    
    $('btnPreview').onclick = () => {
      $('previewArea').innerHTML = encodeEmail($('rawEmail').value);
    };
    
    // 跨瀏覽器複製到剪貼板
    $('btnCopy').onclick = async () => {
      const text = $('encodedResult').value;
      if (!text) return alert('請先加密');
      try {
        await navigator.clipboard.writeText(text);
        alert('已複製到剪貼板！');
      } catch (err) {
        // 降級方案：舊瀏覽器
        const ta = document.createElement('textarea');
        ta.value = text; document.body.appendChild(ta);
        ta.select(); document.execCommand('copy');
        document.body.removeChild(ta);
        alert('已複製 (降級模式)');
      }
    };
  </script>
</body>
</html>

進階話題：Base64 + Flash 複製 (歷史遺產)

原文包含一段極其複雜的 setClipboardNetscape 函式，利用 Base64 編碼內容嵌入 data URI 的 <iframe>，再透過 Flash (application/x-shockwave-flash) 呼叫 System.setClipboard 實現複製。

• 現狀： Flash 已於 2020 年底完全停止支援，此方案**已失效**。
• 替代： 現代瀏覽器統一支援 navigator.clipboard API (HTTPS 環境下)，IE 可用 document.execCommand('copy') 降級。

效能與 SEO 考量

更強防護組合建議

1. 實體編碼 + CSS 干擾： 在 Email 中插入 <span style="display:none">.</span> 干擾字元，再用 CSS 隱藏。
2. JavaScript 動態組裝： document.write('user' + '@' + 'domain.com') 或 DOM 操作插入。
3. 表單提交替代： 不顯示 Email，改用聯絡表單 + 後端發送，徹底隱藏地址。
4. Cloudflare Email Obfuscation： 若使用 CDN，開啟此功能自動保護頁面上所有 Email。