Javascript 保护电子邮件地址不被Gatsby生成的静态站点刮取

我有一个静态网站，是用盖茨比写的。网站上有一个电子邮件地址，我想保护它免受harvester机器人的攻击

我的第一种方法是，使用GraphQL将电子邮件地址发送到客户端。发送的数据用base64编码，我在显示电子邮件地址的React组件的客户端对其进行解码。但是，如果我在生产中构建盖茨比网站，并查看服务的

index.html

，我可以在html代码中看到已经解码的电子邮件地址。在生产环境中，似乎根本没有

XHR请求

，因此所有GraphQL查询都是在服务器端渲染运行时进行评估的

因此，对于第二种方法，我尝试在安装react组件时解码电子邮件地址。 这样，服务器端呈现的

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

import React，{useState，useffect}来自“React”
从“盖茨比”导入{useStaticQuery，graphql}
常量联系人=（）=>{
const{site}=useStaticQuery(
图形ql`
质疑{
场地{
站点元数据{
电子邮件
}
}
}
`
)
功能解码{
变量e={}，i，b=0，c，x，l=0，a，r=''，w=String.fromCharCode，l=s.length；
var A=“abcdefghijklmnopqrstuvxyzabefghijklmnopqrstuvxyzo123456789+/”；
对于（i=0；i<64；i++）{e[A.charAt（i）]=i；}
对于（x=0；x>>（l-=8））&0xff）| |（x<（l-2））&（r+=w（a））}
}
返回r；
};
const[email，setEmail]=useState（“”）；
useffect（（）=>decodeData（），[]）；
函数decodeData（）{
setEmail（（）=>decode（site.sitematadata.email），[]）；
}
返回(
//...
{email}
//...
)
}
导出默认联系人

这种方法有什么区别吗？我的意思是，我可以通过这种方式保护电子邮件地址不受机器人程序的攻击吗？ 这样，至少请求的

html

页面不包含硬编码的电子邮件地址

如果您想在浏览器的开发者工具中查看该页面，可以在此处找到：

，应该可以。因此，电子邮件在发送到客户端之前不会被解码

这似乎有点不必要的复杂。我想说的是，只要把

{typeof window！='undefined'&&decode（site.sitematadata.email）}

放在你的JSX中

当然没有100%的保护。谷歌很可能会为这个电子邮件地址编制索引。它们在索引期间执行JavaScript。我强烈怀疑大多数刮板机不会这样做，但可能有一些会这样做。

应该可以。因此，电子邮件在发送到客户端之前不会被解码

这似乎有点不必要的复杂。我想说的是，只要把

{typeof window！='undefined'&&decode（site.sitematadata.email）}

放在你的JSX中

当然没有100%的保护。谷歌很可能会为这个电子邮件地址编制索引。它们在索引期间执行JavaScript。我强烈怀疑大多数刮板机不会这样做，但可能有一些会这样做。

你试过/考虑过吗？ 它不编码数据（例如电子邮件、电话），而是在DOM中反转数据（并使用css重新反转）。 也许不是超级安全，但至少用最小的努力进行了一些模糊处理。

您试过/考虑过吗？ 它不编码数据（例如电子邮件、电话），而是在DOM中反转数据（并使用css重新反转）。

---

也许不是超级安全，但至少用最少的努力进行了一些模糊处理。

感谢您提供有关

{typeof window！='undefined'&&decode（site.sitematadata.email）}

的提示！这是一种更简单的方法。感谢您提供有关

{typeof window！='undefined'&&decode（site.sitematadata.email）}

的提示！这是一个更简单的方法。谢谢你的想法，似乎也是一个不错的选择。我想知道它是否适用于屏幕阅读器。谢谢你的想法，似乎也是一个不错的选择。我想知道它是否适用于屏幕阅读器。