Prevent contact data scrapping with base64 encoding

Protecting contact information on websites using Base64 encoding

Learn why and how to protect data with base64 encoding.

What is Base64 encoding?

Base64 encoding is a method of converting data into an ASCII string format. This is commonly used in applications such as email encoding, data storage, and web security. When applied to contact information, Base64 encoding prevents bots from easily scraping and misusing the data while keeping it accessible to legitimate visitors.

Implementing Base64 Encoding for Contact Information

Instead of displaying raw contact information directly in HTML, we can encode it in Base64 and only decode it when a user interacts with the page. Below is an example implementation in React.js.

Step 1: Encode contact data

Before using Base64 encoding in your website, you need to encode the data. Here’s how you can encode your email and phone number:

Copycopy code to clipboard
1// Encode using JavaScript
2btoa("example@email.com"); // Result: 'ZXhhbXBsZUBlbWFpbC5jb20='
3btoa("+1 234 567 890"); // Result: 'KzEgMjM0IDU2NyA4OTA='

Step 2: Implement decoding on click

This is a raw example of how this works:

Here’s a simple React component that displays the encoded data and only decodes it when clicked:

Copycopy code to clipboard
1import { useState } from "react";
2
3const encode = (text) => btoa(unescape(encodeURIComponent(text)));
4const decode = (encoded) => decodeURIComponent(escape(atob(encoded)));
5
6const ContactInfo = ({ type, encodedValue }) => {
7  const [visible, setVisible] = useState(false);
8  const [decodedValue, setDecodedValue] = useState("");
9
10  const handleClick = () => {
11    setDecodedValue(decode(encodedValue));
12    setVisible(true);
13  };
14
15  return (
16    <div className="contact-item">
17      <p><strong>{type}:</strong></p>
18      <p>
19        {visible ? (
20          <span>{decodedValue}</span>
21        ) : (
22          <span className="reveal-button" onClick={handleClick}>Click to reveal</span>
23        )}
24      </p>
25    </div>
26  );
27};
28
29export default function ContactList() {
30  return (
31    <div>
32      <ContactInfo type="Phone" encodedValue="KzEgMjM0IDU2NyA4OTA=" />
33      <ContactInfo type="Email" encodedValue="ZXhhbXBsZUBlbWFpbC5jb20=" />
34    </div>
35  );
36}

Benefits of using base64 encoding

1. Prevents spam and scraping

Since the contact information is not stored as plain text in the HTML, web scrapers and spam bots cannot easily collect it.

2. Enhances security without affecting user experience

Legitimate users can still access the contact details by clicking the button, ensuring a smooth user experience while protecting sensitive data.

3. Simple and lightweight solution

Unlike CAPTCHAs or JavaScript-heavy solutions, Base64 encoding is a lightweight and straightforward method that does not add unnecessary complexity to your website.

4. Can Be used for additional security layers

Base64 encoding can be combined with additional measures, such as:

• Time-based access: Adding a delay before revealing data.

• Backend API requests: Fetching contact details dynamically via API calls.

• JavaScript obfuscation: Making it even harder for bots to decode data.

Conclusion

Using Base64 encoding to protect contact information is an effective and easy-to-implement method for reducing spam and preventing web scraping. By only revealing contact details upon user interaction, you can maintain security without sacrificing usability. If you're looking for a lightweight solution to protect sensitive information on your website, give Base64 encoding a try!

Have any questions or suggestions? Let us know in the comments below!