title: Protect E-mail address from scraping on a static site generated by Gatsby
body: <p>I have a static website that was written in Gatsby. There is an E-mail address on the website, which I want to protect from harvester bots.</p>
  <p>My first approach was, that I send the E-mail address to the client-side using GraphQL. The sent data is encoded in base64 and I decode it on client-side in the React component where the E-mail address is displayed. But if I build the Gatsby site in production and take a look at the served <code>index.html</code> I can see the already decoded E-mail address in the html code. In production there seems to be no <code>XHR request</code> at all, so all GraphQL queries were evaluated while the server-side rendering was running.</p>
  <p>So for the second approach, I tried to decode the E-mail address when the react component is mount.
  This way the server-side rendered <code>html</code> page does not contain the E-mail address. But when the page is loaded it is displayed.</p>
  <p>The relevant parts of the code look following:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;
  import { useStaticQuery, graphql } from &quot;gatsby&quot;
  
  const Contacts = () =&gt; {
      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 = &quot;ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/&quot;;
          for (i = 0; i &lt; 64; i++) { e[A.charAt(i)] = i; }
          for (x = 0; x &lt; L; x++) {
              c = e[s.charAt(x)]; b = (b &lt;&lt; 6) + c; l += 6;
              while (l &gt;= 8) { ((a = (b &gt;&gt;&gt; (l -= 8)) &amp; 0xff) || (x &lt; (L - 2))) &amp;&amp; (r += w(a)); }
          }
          return r;
      };
  
      const [email, setEmail] = useState(&quot;&quot;);
      useEffect(() =&gt; decodeData(), []);
      function decodeData() {
          setEmail(() =&gt; decode(site.siteMetadata.email), []);
      }
  
      return (
          //...
          &lt;span className=&quot;service-text&quot;&gt;{email}&lt;/span&gt;
          //...
      )
  }
  
  
  export default Contacts
  </code></pre>
  <p>Does this approach make any difference? I mean can I protect this way the E-mail address from the bots?
  This way at least the requested <code>html</code> page does not contain the E-mail address hard coded.</p>
  <p>If you would like to take a look at the page in the developer tools of a browser, it can be found here: <a href="https://www.barbaraapartmanheviz.hu/en/" rel="nofollow noreferrer">https://www.barbaraapartmanheviz.hu/en/</a></p>