astro-mail-obfuscation

Astro-Mail-Obfuscation

Protect your email addresses!

Malicious bots scour the internet for email addresses, which often leads to spam and phishing attacks. Encrypting email addresses in the source code helps prevent most bots from scraping them, as they cannot interpret JavaScript or advanced obfuscation techniques.

This is an integration for Astro.

Installation:

Alternative installation with Astro CLI: npx astro add astro-mail-obfuscator

1. Recommended installation with npm:

npm install astro-mail-obfuscation

2. Add the following configuration to your astro.config.mjs file:

import { defineConfig } from "astro/config";

import astroMailObfuscation from "astro-mail-obfuscation";

export default defineConfig({
  integrations: [
    astroMailObfuscation({
      fallbackText: "...", // Default: "Enable JS!"
      loadingText: "...", // Default: "Loading..."
      // userKey: "A1B3C2..." (Optional, not recommended!)
    }),
  ],
});

The userKey is used for XOR encryption and is generated automatically during the build process. You can set the userKey manually if you want, but it is not required.

3. Add the following css globally to your project:

.astroMailObfuscationHidden {
  display: initial;
}

.astroMailObfuscationScript .astroMailObfuscationHidden {
  display: none;
}

Usage:

In your .astro files:

<a href="mailto:mail1@..." data-obfuscation>mail1@...</a>

<a href="mailto:mail2@..." data-obfuscation>Contact us!</a>

// ...

Add data-obfuscation to all <a> tags that you want to encrypt in the source code.

Examples:

Source code without this integration:

<a href="mailto:mail@...">mail@...</a>

An easy game for bots to read and scrape the email addresses here.

Source code with this integration:

<a data-obfuscation="">
  <noscript>Enable JS!</noscript>
  <span data-...="5b000..."> Loading... </span>
</a>

Bots cannot read the email address directly and cannot do anything with the data-... either, as they do not know where the userKey is stored (or even that it is needed for decryption).

Disclaimer: This integration helps prevent email scraping but cannot guarantee complete protection.

Planned Features:

Support for encrypting phone numbers in the source code.