在 Gatsby 生成的 static 站點上保護電子郵件地址不被抓取

Question

我有一個用 Gatsby 編寫的 static 網站。 網站上有一個電子郵件地址，我想保護它免受收割機機器人的攻擊。

我的第一種方法是，我使用 GraphQL 將電子郵件地址發送到客戶端。 發送的數據在 base64 中編碼，我在顯示電子郵件地址的 React 組件的客戶端對其進行解碼。 但是，如果我在生產環境中構建 Gatsby 站點並查看提供的index.html我可以在 html 代碼中看到已解碼的電子郵件地址。 在生產中似乎根本沒有XHR request ，因此所有 GraphQL 查詢都在服務器端渲染運行時進行了評估。

所以對於第二種方法，我嘗試在安裝反應組件時解碼電子郵件地址。 這樣，服務器端呈現的html頁面不包含電子郵件地址。 但是當頁面加載時它會顯示出來。

代碼的相關部分如下所示：

import React, { useState, useEffect } from "react"
import { useStaticQuery, graphql } from "gatsby"

const Contacts = () => {
    const { site } = useStaticQuery(
        graphql`
          query {
            site {
                siteMetadata {
                    email
              }
            }
          }
        `
    )
    function decode(s) {
        var e = {}, i, b = 0, c, x, l = 0, a, r = '', w = String.fromCharCode, L = s.length;
        var A = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
        for (i = 0; i < 64; i++) { e[A.charAt(i)] = i; }
        for (x = 0; x < L; x++) {
            c = e[s.charAt(x)]; b = (b << 6) + c; l += 6;
            while (l >= 8) { ((a = (b >>> (l -= 8)) & 0xff) || (x < (L - 2))) && (r += w(a)); }
        }
        return r;
    };

    const [email, setEmail] = useState("");
    useEffect(() => decodeData(), []);
    function decodeData() {
        setEmail(() => decode(site.siteMetadata.email), []);
    }

    return (
        //...
        <span className="service-text">{email}</span>
        //...
    )
}


export default Contacts

這種方法有什么不同嗎？ 我的意思是我可以通過這種方式保護電子郵件地址免受機器人攻擊嗎？ 這樣至少請求的html頁面不包含硬編碼的電子郵件地址。

如果您想查看瀏覽器開發者工具中的頁面，可以在這里找到： https://www.barbaraapartmanheviz.hu/en/

Answer 1

您是否嘗試過/考慮過 https://www.npmjs.com/package/react-obfuscate ？ 它不對數據進行編碼（例如 email，tel），而是在 DOM 中反轉它（並使用 css 重新反轉）。 也許不是超級安全，但至少可以用最少的努力進行一些混淆。

Answer 2

那應該行得通。 useEffect不在服務器端執行，因此 email 在發送到客戶端之前不會被解碼。

這似乎有點不必要的復雜。 我想說只是把{typeof window.== 'undefined' && decode(site.siteMetadata.email)}在你的 JSX 中。

當然，沒有 100% 的保護。 谷歌很有可能會索引這個 email 地址。 他們確實在索引期間執行 JavaScript。 我強烈懷疑大多數刮板都沒有，但可能有一些這樣做。