https://jackchilds.tech/posts/reducing_spam_from_mailto_links

[utterances-bot]

Reducing spam from mailto links

How I reduce email spam from mailto links and mail forms on my website

https://jackchilds.tech/posts/reducing_spam_from_mailto_links

[oohohoo]

hello, and congrats on your first post :) how do i use it in plain js/html, no components, react etc...? thank you and cheers

[Danny-Engelman]

It is a couple lines of code in Vanilla JavaScript; might be too short if you are used to React

<data-protect email="[email protected]"><a href="mailto:EMAIL">contact me at EMAIL</a></data-protect>
<script>
  customElements.define('data-protect', class extends HTMLElement {
    connectedCallback() {
      this.onmouseover = () => {
      	this.innerHTML = this.innerHTML.replaceAll("EMAIL",this.getAttribute("email"));
      }
    }
  });
</script>

[oohohoo]

thank you, it works! but, is it bot proof? cause the email is still visible in html: ?

[JackChilds]

What I would recommend you do is to take a look at the bundle.js file in the DataProtect repository, you can grab the file from any cdn like jsdelivr, etc.

For a full example, take a look at this jsfiddle: https://jsfiddle.net/rkhxbp9c/

As well as this file here: https://github.com/JackChilds/Data-Protect/blob/main/test/demo.html

The main difference is that unlike the Next.js version, you will have to manually encode the data first as you can't encode it at build time (or on the server at runtime) in order to hide it from the source code.

Hope this helps.

[oohohoo]

everything works now
thank you very much :)

[gnawood]

Why bother to encode the address and tell the crawler you are using trickery.
My approach is to put a wrongly spelt address in the html which hopefully will make most crawlers happy.
Then at run time use a script decoder to correct the spelling mistake.
Adding a delay is an interesting wrinkle, but does it help if the crawler is willing to run the java and scrape the result.

[JackChilds]

@gnawood an interesting idea!
The delay is there so that even if the crawler runs js, they will have to know that they must wait a period of time (the delay) until they can get the email address.