Protect Your Contact Information From Crawlers

In Germany, we are required to publish contact information on every commercial website including email address and phone number. I never put much effort in protecting this data, but recently I've started to receive an increasing amount of spam on some public email addresses. While it still is manageable with a proper spam filter, I decided to take some counter steps when I updated agty.de in order to prevent bots from detecting my contact data.

Side Constraints

The solution should be accessible and have minimal CO2 impact (learn more). Hence, it shouldn't depend on jQuery or other frameworks. Instead it should only use pure JavaScript if any at all. Also, it shouldn't simply display the address on an image as this would increase both the page's size and difficulty for people depending on accessibility features.

And of course, it should look at least ok and be simple to use.

Simplifications

Because my project is very small and doesn't use a real database, I decided to not detect contact information like email addresses or phone numbers automatically. Instead, I searched for those manually.

Assumptions

While I'm no expert on entity recognition or information extraction, I made some educated guesses about these tasks:

1. It's trivial to detect an email address if it's used liked that <a href="mailto:hi@test.de">hi@test.de</a>.
2. You could probably create a simple regular expression to find email addresses that aren't embedded in <a> tags. Hence, it's no big help to just write an email address without any tags in a normal paragraph.
3. Most crawlers will simply load the HTML file and not even execute any JavaScript on startup.
4. Even more crawlers won't execute JavaScript if it's tied to an user action like clicking a button.
5. Yet, a lot of crawlers will apply their regular expressions also to JavaScript and CSS files.

A Simple Solution

Based on my assumptions, side constraints and simplifications, I came up with this solution:

Wherever you would write your email address, post this code snippet instead. The button tag is used in the hope of better accessibility although JavaScript is required.

<button class="show-email">Display E-Mail-Address <noscript>(requires JavaScript)</noscript></button>

Add event listeners to all email buttons that might be in this document. While we could use the onclick action of buttons, this way our email button's code is smaller.

document.addEventListener("DOMContentLoaded", function(e) {
    let emailButtons = document.getElementsByClassName("show-email");
    for (let i = 0; i < emailButtons.length; i++) {
        emailButtons[i].addEventListener("click", showEmail);
    }
});

This function does the actual stuff: Whenever an email button is clicked, its text is changed to the email address. In order to prevent bots from finding the address in JavaScript code, I cut it down into several parts.

function showEmail(evt) {
    let target = evt.target;
    let email = "test";
    email = email.concat("@");
    email = email.concat("test");
    email = email.concat(".de");
    target.innerHTML = email;
}

Some styles are always a good idea, of course it should be designed to fit your website's design.

.show-email {
    border: none;
    outline: none;

    padding: 0;
    margin: 0;

    box-shadow: none;
    background-color: white;

    font-size: 10pt;
    font-weight: bold;

    cursor: pointer;
}

.show-email:hover {
    text-decoration: underline;
}

Of course, you could also use this technique for other types of information like your name, phone number, social media profiles or whatever. Using this technique, I'd consider it likely to make the information available for humans but not for crawlers. At least that method should make it harder for crawlers to automatically detect your information.

Call For Action

While the proposed solution hopefully works, I invite you to share your own ideas about this problem. Most likely, you'll have much better thoughts than me!