Typically, when integrating emails into websites, I obfuscate the email address to prevent spam bots from collecting them. For React, there were already components that handled this task; however, without React, I couldn’t find a suitable solution.
Therefore, I created a web component: obfuscate-wc that now provides an HTML element capable of obfuscating your email (and some other contact data).
<obfuscate-link id="obfuscate" email="aXZvQGxvY2FsLmRldg==">custom link</obfuscate-link>Code language: HTML, XML (xml)The component accepts an encoded email address, rendering it human-readable after events that typically align with human browsing behavior.
Custom decoders can be configured, with the default set to base64.
While sophisticated spam crawlers may still manage to decode the email, the likelihood decreases as you customize your encoder/decoder. It’s worth noting that the decoder could also be crawled, but the assumption is that this presents too much effort for the crawlers.
Using the web component itself is already blocking spammer that just look for mailto links.
How did I get there?
When using React I took this React component: https://github.com/coston/react-obfuscate
In a new project, I began using Astro, and React became unnecessary. However, I found myself missing the obfuscation component. Consequently, I chose to create a web component with similar functionality. This endeavor also served as a valuable exploration into web components. Web components, native to the browser, enable you to define your own HTML tags with specific functionality within the component.
Since the API of the web components is not the nicest, let’s say.
I took StencilJs which is a framework for Web Component development.
It also comes with nice tooling like Typescript support, tests and builds helpers.
I crafted it with Stencil, learned the process of building the component–admittedly, this was a bit cumbersome–but now it’s ready for use in any web application.