Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/andreas-brunner/astro-mail-obfuscation

Obfuscates email addresses and phone numbers in the source code to protect against scraping bots. Decodes and displays them client-side using JavaScript.
https://github.com/andreas-brunner/astro-mail-obfuscation

astro astro-component astro-integration bot-protection email-obfuscation email-protection email-security encoding obfuscation security spam-protection utility utils withastro

Last synced: 13 days ago
JSON representation

Obfuscates email addresses and phone numbers in the source code to protect against scraping bots. Decodes and displays them client-side using JavaScript.

Awesome Lists containing this project

README 

        
# Astro Mail Obfuscation:



🚀 **New Release**: _Version 2.1.0_ now supports phone numbers too!



An Astro integration that obfuscates email addresses and phone numbers in the source code using XOR obfuscation, with the content revealed client-side through JavaScript.



The XOR obfuscation method is effective against basic bots that scour the internet for email addresses and phone numbers, as many of these bots do not execute JavaScript (often for efficiency reasons).



#### Simple and efficient:



This integration allows Astro developers to automate the obfuscation of email addresses and phone numbers.



**Attention**: No SSR support yet!



## Recommended Installation:



#### Installation with Astro CLI:



```bash

npx astro add astro-mail-obfuscation

```



You’re all set!



## Manual Installation:



#### 1. Install with Node package manager:



```bash

npm install astro-mail-obfuscation

```



#### 2. Adjust your Astro configuration:



```javascript

// astro.config.mjs

import mailObfuscation from "astro-mail-obfuscation";

export default defineConfig({

  integrations: [mailObfuscation()],

});

```



You’re all set!



## Usage:



By default, the integration does not automatically obfuscate email addresses and phone numbers. Email addresses and phone numbers you want to obfuscate must be marked with the attribute `data-obfuscation="1"`.



#### Example:



```html



...

...

```



The number `1` currently holds no special function, but it ensures that XOR is used as the default obfuscation method. The attribute is required for the obfuscation to work.



After running `npm run build` and opening the website in the browser, you'll notice that the email addresses and phone numbers no longer appear in the source code. They are only visible if JavaScript is enabled.



## Configuration:



Once installed, the integration works out-of-the-box, and no adjustments are required. However, there are two optional configuration options:



#### fallbackText:



You can customize the text shown when JavaScript is disabled.



#### userKey:



The XOR key is automatically generated by default. It can be manually set but this is not recommended.



```javascript

// astro.config.mjs

export default defineConfig({

  integrations: [

    mailObfuscation({

      fallbackText: "...", // Default: "Please enable JavaScript!"

      // userKey: "ABC..." (Optional, setting this manually is not recommended.)

    }),

  ],

});

```



## Comparison:



Here is a comparison of the source code with and without the integration:



(Example with email address, but looks the same for phone numbers.)



#### Without integration:



```html

mail@...

```



The email address is visible in the source code and easily accessible to bots.



#### With integration:



```html



  Please enable JavaScript!

  



```



The email address is no longer visible in the source code, making it difficult for bots to extract it.



## Obfuscation technique:



This integration uses an XOR-based obfuscation technique during the build process. Email addresses and phone numbers marked with `data-obfuscation="1"` are obfuscated both in the contact link and the inner HTML content. A client-side JavaScript script then decodes the content and restores it in the browser, with the decryption key stored as a meta tag in the HTML.



#### What is "XOR" and "Obfuscation":



**XOR**: XOR (Exclusive OR) is a basic encryption method that compares two inputs bit by bit. If the inputs differ, the result is 1; if they are the same, the result is 0. It's used here to obfuscate email addresses and phone numbers.



**Obfuscation**: Obfuscation hides or disguises information to make it harder to read. In this case, it alters email addresses and phone numbers to prevent bots from scraping them, while browsers can still decode them for users.



## Limitations:



This integration is not intended to protect against targeted attacks. However, it provides an effective layer of protection against most harvesting bots that do not execute JavaScript.