Mark 'Maiko' Robles | Our Experience and Steps with Email Spam Prevention

Email spam is one of the most persistent challenges that anyone running a website or online business will face. It doesn’t matter whether you are a personal blogger, a small business owner, or part of a larger corporation – email scrapers will inevitably target your publicly available email addresses. These bots harvest email addresses from websites, leading to a flood of unwanted messages and potentially harmful content.

After facing the issue of spam emails ourselves, we took proactive steps to safeguard our contact page. Here's a breakdown of our experience and the strategies we implemented to stop spam bots from harvesting our email address.

Step 1: Identifying the Issue

Initially, our Contact Us page had a straightforward method for users to reach out – an email link in the form of a traditional <a href="mailto:"> tag. This is common practice and makes it easy for people to contact us with a single click. However, it also made our email address an easy target for bots looking to scrape and flood us with spam.

We started noticing an increase in unwanted emails – many of them from bots or spam sources. We knew we had to do something about it.

Step 2: Removing the `<a>` Tag

The first step in our strategy was simple: remove the <a href="mailto:"> tag entirely. Email scrapers usually look for <a> tags containing mailto links to extract email addresses. By eliminating this pattern from our contact page, we removed a major avenue for spammers to target.

Step 3: Email Obfuscation

Even without the <a> tag, we still needed a way for legitimate visitors to easily access our email. However, we wanted to make it difficult for email scrapers to read the address.

This led us to obfuscate our email address. Obfuscation involves displaying the email in a way that is readable by humans but difficult for bots to scrape. For this, we decided to use JavaScript-based email rendering. Here's what we did:

We split the email address into parts (prefix and domain) in the code.
We used JavaScript to dynamically render the email address on the page, combining these parts in the browser.

Here’s the code we used to obfuscate the email test@test.email:

'use client'; // Marking this as a client-side component

import React from "react";

const EmailObfuscation = () => {
  const emailPrefix = "test";
  const emailDomain = "test.email";

  return (
    <span className="text-gray-900 hover:blur-sm">
      {emailPrefix}@{emailDomain}
    </span>
  );
};

export default EmailObfuscation;

In this code:

The email address is split into emailPrefix and emailDomain variables.
It’s rendered as plain text within a <span> element, making it much harder for bots to scrape.
CSS class hover:blur-sm is added to create a blur effect on hover, adding an extra layer of protection.

Step 4: Reusable CAPTCHA Wrapper

Another critical step in combating spam was to add CAPTCHA (Google reCAPTCHA) to our contact forms. However, rather than implementing CAPTCHA directly in our contact form, we decided to create a reusable CAPTCHA wrapper component. This way, we could use it across multiple forms on the site without duplicating code.

Here's how we created the reusable CAPTCHA wrapper:

Creating the Reusable CAPTCHA Wrapper

'use client'; // Ensure it's client-side

import React from "react";
import { ReCaptcha } from "react-google-recaptcha";

const ReCaptchaWrapper = ({ onVerify }) => {
  return (
    <div className="recaptcha-container">
      <ReCaptcha
        sitekey="YOUR_GOOGLE_RECAPTCHA_SITE_KEY" // Your reCAPTCHA site key here
        onChange={onVerify}
      />
    </div>
  );
};

export default ReCaptchaWrapper;

Using the ReCaptchaWrapper in Your Contact Form

After creating the wrapper, we simply included it within our contact form. Here’s an example:

import React, { useState } from "react";
import ReCaptchaWrapper from "./ReCaptchaWrapper";

const ContactForm = () => {
  const [isVerified, setIsVerified] = useState(false);

  const handleRecaptchaVerify = (response) => {
    if (response) {
      setIsVerified(true);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (isVerified) {
      // Handle form submission here
      console.log("Form submitted!");
    } else {
      alert("Please verify that you are a human!");
    }
  };

  return (
    <form onSubmit={handleSubmit} className="contact-form">
      {/* Form fields go here */}
      <input type="text" name="name" placeholder="Your Name" required />
      <input type="email" name="email" placeholder="Your Email" required />
      <textarea name="message" placeholder="Your Message" required></textarea>

      {/* ReCaptcha component */}
      <ReCaptchaWrapper onVerify={handleRecaptchaVerify} />

      <button type="submit" disabled={!isVerified} className="submit-button">
        Submit
      </button>
    </form>
  );
};

export default ContactForm;

In this implementation:

We created a reusable ReCaptchaWrapper component that integrates the Google reCAPTCHA functionality.
The onVerify function is passed as a prop to handle the verification response and set the isVerified state accordingly.
The contact form's submit button is disabled until the user passes the reCAPTCHA verification.

Step 5: Using "use client" for Client-Side Code

In Next.js, we used the use client directive to ensure that the email obfuscation and CAPTCHA logic happens on the client-side. This prevents any issues during server-side rendering, which is crucial for maintaining a smooth user experience without any hydration errors.

Step 6: Final Result

Once these changes were implemented, we observed a significant drop in spam emails. The email obfuscation, combined with CAPTCHA and the removal of the <a> tag, made it much harder for spam bots to scrape our contact email address.

The result? A much cleaner inbox with fewer spam messages, while still providing a way for legitimate users to reach us.

Why This Approach Works

No More "mailto:" Tags: Spam bots typically search for mailto: links to gather email addresses. By removing these and rendering the email with JavaScript, we make it much harder for bots to find and scrape the address.
Email Obfuscation: By splitting the email into parts and dynamically rendering it, we add another layer of complexity for any bots attempting to scrape it.
Client-Side Rendering: Using use client ensures that our obfuscation and CAPTCHA logic are executed only on the client side, preventing potential issues in a server-rendered environment like Next.js.
Reusable CAPTCHA Wrapper: The ReCaptchaWrapper makes the CAPTCHA functionality easy to reuse across multiple pages or forms, improving maintainability.
CAPTCHA for Forms: Adding reCAPTCHA ensures that automated bots cannot submit forms and overwhelm us with spam submissions.

Conclusion

While email spam is an ongoing challenge, the combination of obfuscating email addresses, removing easy-to-scrape <a> tags, and utilizing CAPTCHA has drastically reduced our spam load. We encourage other website owners to adopt similar measures to protect their contact information from bots.

By staying vigilant and proactive, we can keep our inboxes clean and ensure a better experience for both website visitors and ourselves. Spam is inevitable, but with the right steps, it’s manageable.

Your Privacy Alert