Obfuscate contact emails so that they don't get web scraped

The inspiration for this comes from a few places: - https://css-tricks.com/how-to-safely-share-your-email-address-on-a-website/ - https://mauriciorobayo.github.io/react-obfuscate-email/?path=/docs/react-obfuscate-email--mail Also, these two commits from my other repo: - pcraig3/taxgpt@5dffdfc - pcraig3/taxgpt@5820321
pcraig3 · Jun 21, 2023 · 26b2ca9 · 26b2ca9
1 parent 43d001e
commit 26b2ca9
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 6 deletions.
diff --git a/public/js/email.js b/public/js/email.js
@@ -0,0 +1,49 @@
+/* eslint-disable */
+const obfuscateEmail = (node) => {
+    // Create a new element
+    const newNode = document.createElement('a')
+
+    if (node.dataset.email) {
+      // Preserve data attributes
+      newNode.dataset.email = node.dataset.email
+      if (node.dataset.text) {
+        newNode.dataset.text = node.dataset.text
+      }
+
+      // Get email and text
+      const email = atob(node.dataset.email)
+      const text = node.dataset.text || email.split('?')[0]
+
+      // Add dummy href and obfuscated email
+      newNode.setAttribute('href', '#')
+      // idea comes from https://mauriciorobayo.github.io/react-obfuscate-email/?path=/docs/react-obfuscate-email--mail
+      newNode.innerHTML = text.replaceAll('@', '<span class="roe"></span>')
+
+      newNode.addEventListener('mouseover', unobfuscateEmail, false)
+      newNode.addEventListener('focus', unobfuscateEmail, false)
+
+      node.replaceWith(newNode)
+    }
+  }
+
+  function unobfuscateEmail(event) {
+    const node = event.target
+    if (node.dataset.email) {
+      // Get email and text
+      const email = atob(node.dataset.email)
+      const text = node.dataset.text || email.split('?')[0]
+
+      // Set real mailto attribute and content
+      node.setAttribute('href', 'mailto:'.concat(email))
+      node.innerText = text
+    }
+  }
+
+  document.addEventListener('DOMContentLoaded', function () {
+    // Loop through all elements with "email--swap" classname
+    var nodes = document.getElementsByClassName('email--swap')
+    while (nodes.length) {
+      obfuscateEmail(nodes[0])
+    }
+  })
+
diff --git a/src/pages/Feedback.js b/src/pages/Feedback.js
@@ -1,8 +1,16 @@
 const { html } = require('../utils')
+const { css } = require('@emotion/css')
 const Layout = require('../components/Layout.js')
 const Content = require('../components/Content.js')
 const Abbr = require('../components/Abbr.js')
 
+const linkStyle = css`
+  /* for obfuscating emails. Idea comes from https://mauriciorobayo.github.io/react-obfuscate-email/?path=/docs/react-obfuscate-email--mail */
+  a > span.roe::after {
+    content: '@';
+  }
+`
+
 const Feedback = () =>
   html`
     <${Layout} route="/feedback">
@@ -17,12 +25,12 @@ const Feedback = () =>
           On the other hand, if you <span role="img" aria-label="heart">❤️</span> my site and want
           to support me on Patreon, we can figure that out as well.
         </p>
-        <p>
+        <p className=${linkStyle}>
           Email me pls <span aria-hidden="true">👉</span>${' '}
-          <a
-            class="pcraig3"
-            href="mailto:paul@pcraig3.ca?subject=Something is UP with canada-holidays.ca"
-            >paul@pcraig3.ca</a
+          <span
+            class="email--swap"
+            data-email="cGF1bEBwY3JhaWcuY2E/c3ViamVjdD1Tb21ldGhpbmcgaXMgVVAgd2l0aCBjYW5hZGEtaG9saWRheXMuY2E="
+            >“paul [a] pcraig [dot] ca”</span
           >
         </p>
       <//>

diff --git a/src/pages/_document.js b/src/pages/_document.js
@@ -167,14 +167,18 @@ const document = ({
           }
         </script>
       </head>
-      <body id="body" class='no-js'>
+      <body id="body" class="no-js">
         <script>
           document.body.classList.remove("no-js");
           document.body.classList.add("js");
         </script>
         ${content}
         <script src="/js/sweet-scroll.min.js?v=${process.env.npm_package_version}"></script>
         <script src="/js/script.js?v=${process.env.npm_package_version}"></script>
+        ${
+          path === '/feedback' &&
+          `<script src="/js/email.js?v=${process.env.npm_package_version}"></script>`
+        }
       </body>
     </html>
   `