ObfuMatic! 🥸

I had a thought that this would be a good approach to obfuscating email addresses on a website. And I didn't know Web Components, but wanted to learn. So I made this.

Usage 🚧

I assume I'm the only one using this, so it's not on npm or anything. You can install it straight from this repository:

npm install github:i40west/obfumatic

Put obfumatic.js on your site, load it normally.

<script type="module" src="/js/obfumatic.js"></script>

It can be bundled.

import 'obfumatic';

Then, in your HTML:

<obfu-matic stuff="Y0hKbGMybGtaVzUwUUhkb2FYUmxhRzkxYzJVdVoyOTI=" say="contact me">Fallback text</obfu-matic>

stuff is a double-base64-encoded email address. say is the text to use as the link; the email address is used if this is not given. Any content inside the tag is the fallback text if the browser doesn't support Web Components or have Javascript enabled.

To encode the address, you can, for example, run the node repl and do:

btoa(btoa('president@whitehouse.gov'))

Astro 🚀

There is an Astro component included.

import ObfuMatic from 'obfumatic/astro';

<ObfuMatic email="president@whitehouse.gov" text="Click here to email me" />

Hugo 💪

I've included a Hugo shortcode as well:

{{< hideemail addr="president@whitehouse.gov" content="email me" >}}

Why? 🤔

Your HTML will show no hint that an email address is being used. And you can't get to it by walking the DOM with Javascript, because the shadow DOM is created in "closed" mode. Is this better than just using Javascript to decode the address? I don't know, probably?

But... 😒

The catch is the styling. Your stylesheets won't penetrate the shadow DOM to style the link to match your site. There are two ways to apply your CSS to the link.

1. I've exposed a bunch of CSS variables. They "happen" to be the same ones I typically use in my CSS anyway. What a coincidence!

--link-color --link-hover-color --link-hover-transition --link-text-decoration --link-underline-color --link-underline-thickness --selection-a-color --selection-bg

2. You can use the ::part selector to style the link. The generated HTML is basically <span><a>...</a></span>, where the span has a part of span and the a has a part of link. So, wherever you style your links, you can add a selector:

a,
obfu-matic::part(link) {
  color: #0000ff; /* whatever styles */
}
a:hover,
obfu-matic::part(link):hover {
  color: red; /* whatever */
}

If you do both of these things, the part rules will win.