DEV Community

Cover image for hide email on website with captcha
irishgeoff22
irishgeoff22

Posted on • Edited on

hide email on website with captcha

To protect email addresses on a website and prevent them from being easily harvested by spambots, you can use a combination of techniques, including obfuscation and the implementation of a CAPTCHA. Here's a step-by-step guide:

  1. Email Obfuscation:
    • Use JavaScript to dynamically generate the email address on the client side. This makes it harder for bots to scrape the email address directly from the HTML source code.
    • Instead of writing the email address in the HTML code, use JavaScript to construct it.

Example:

   <script type="text/javascript">
     document.write('<a href="mailto:' + 'example' + '@' + 'domain.com' + '">' + 'Contact Us' + '</a>');
   </script>
Enter fullscreen mode Exit fullscreen mode
  1. CAPTCHA:
    • Integrate a CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) to ensure that the user is a human and not an automated script.
    • There are various CAPTCHA services available, such as Google reCAPTCHA. Follow the documentation provided by the CAPTCHA service you choose.

Example of adding Google reCAPTCHA:

   <!-- Add the following script tag to your HTML -->
   <script src="https://www.google.com/recaptcha/api.js" async defer></script>

   <!-- Add the following HTML snippet where you want the CAPTCHA to appear -->
   <div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY"></div>
Enter fullscreen mode Exit fullscreen mode
  1. Server-Side Validation:

    • Ensure that the form processing on the server side verifies the CAPTCHA response before processing the form data.
    • This helps prevent automated submissions by bots.
  2. Additional Tips:

    • Avoid using plain text for the email address. Break it up or use additional characters to make it less recognizable.
    • Consider using a contact form instead of displaying the email address directly. This way, users can still reach you without exposing the email address publicly.

Remember that while these techniques can help reduce email harvesting, they are not foolproof. Determined spammers might still find ways to extract email addresses. Regularly updating and reviewing your website's security measures is a good practice.

Pro Tip: hide email address from spammers with VeilMail.io. Check it out.

Top comments (0)