ObfuscateLink Web Component in Astro

Ivo Bathke — Fri, 07 Feb 2025 09:36:02 +0000

Using Web Components in Astro wasn’t as straightforward as expected. Here’s an example showing how to integrate the obfuscate-link web component into an Astro project.

First, add the Obfuscate-Link web component to the project:

npm install obfuscate-link-web-component

Now register ObfuscateLink with customElements:

<body>
    <slot />
    <script>
      import { ObfuscateLink } from 'obfuscate-link-web-component';
      // Only define the custom element if it hasn't been defined yet
      if (!customElements.get('obfuscate-link')) {
        customElements.define('obfuscate-link', ObfuscateLink);
      }
    script>
body>

This occurs in the Layout.astro component, making it available across all pages. The registration happens within a script tag in the HTML to execute only on the client side, avoiding it execution while SSR rendering performed by Astro beforehand.

Next, create an Astro component that wraps the web-component and handles the obfuscation by encoding the passed prop.

---
type BaseProps = {
  id?: string;
}
type EmailProps = BaseProps & {
  email: string;
  tel?: never;
  sms?: never;
  facetime?: never;
  href?: never;
}
type TelProps = BaseProps & {
  email?: never;
  tel: string;
  sms?: never;
  facetime?: never;
  href?: never;
}
type SmsProps = BaseProps & {
  email?: never;
  tel?: never;
  sms: string;
  facetime?: never;
  href?: never;
}
type FacetimeProps = BaseProps & {
  email?: never;
  tel?: never;
  sms?: never;
  facetime: string;
  href?: never;
}
type HrefProps = BaseProps & {
  email?: never;
  tel?: never;
  sms?: never;
  facetime?: never;
  href: string;
}
export type Props = EmailProps | TelProps | SmsProps | FacetimeProps | HrefProps;
const props = Astro.props;
const { id } = props;
// Find the active prop (email, tel, sms, facetime, or href)
const activeProp = Object.entries(props).find(([key, value]) => 
  key !== 'id' && value !== undefined
);
let attribute = '';
let value = '';
if (activeProp) {
  [attribute, value] = activeProp;
  const orgValue = value;
  value = Buffer.from(value).toString('base64');
}
---

<obfuscate-link
  id={id}
  {...{[attribute]: value}}
><slot />obfuscate-link>

Finally, you can utilize both the Astro component and the Web component throughout your Astro project.


---
import ObfuscateLink from './ObfuscateLink.astro';
---

<div class="card">
  <p>
    Email: <ObfuscateLink email="info@example.com" />
  p>
div>

The complete code can be seen in this Gist:

https://gist.github.com/ivoba/222d5a49ad4542392772195c5e5ad032

The post ObfuscateLink Web Component in Astro first appeared on Nerdpress.org.

Obfuscate Web Component

Ivo Bathke — Fri, 08 Dec 2023 17:21:01 +0000

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 linkobfuscate-link>

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.

The post Obfuscate Web Component first appeared on Nerdpress.org.

Web components | Nerdpress.org

ObfuscateLink Web Component in Astro

Obfuscate Web Component