Obfuscating Data

The obfuscation mode of the widget helps you protect sensitive information from bots. A common use case is to obfuscate email addresses on websites, preventing automated scraping bots from collecting them.

Use Cases

Hide Email Addresses and Phone Numbers: Protect email addresses and phone numbers on websites to prevent automated scraping bots from collecting this information.
Mask Personal Identifiers: Hide personal identifiers such as usernames, IDs, or account numbers that could be used for malicious purposes.
Obfuscate Download Links: Hide direct download links for files or software to prevent scraping.

How It Works

Similar to the proof-of-work mechanism used for ALTCHA challenges, obfuscation employs a proof-of-work (PoW) approach based on symmetric AES encryption.

The obfuscated data provided to the widget is encrypted using an encryption key and an initialization vector based on a random number. Just like the challenge PoW, the client must iterate over a range of numbers to find a matching initialization vector.

The encryption key is shared with the client and defaults to an empty string if not specified. The goal is not to provide a secure cryptographic algorithm but to use a proof-of-work mechanism that allows any capable device to decrypt the hidden data.

Complexity

Decryption complexity depends on the number range used. By default, the range is 0 to 10,000 and can be adjusted using the script. The computation time is about 35% greater compared to the challenge PoW.

Configuration

After integrating the widget and enabling the obfuscation plugin, configure the obfuscated string in the widget. Note that the obfuscation mode does not use challengeurl:

<p>Send us an email, and we'll be in touch soon.</p>

<div>
  <span>Email:</span>

  <altcha-widget
    obfuscated="P7bJsUgzxP416d1voeF/QnQOD5g7GItB/zdfkoBrKgZK4N4IYkDJqg=="
    floating
  >
    <button>Click to reveal</button>
  </altcha-widget>
</div>

Any elements inside the <altcha-widget> tag will be displayed as placeholders for obfuscated data. The widget automatically detects clickable elements, such as button and a tags, which trigger the verification and de-obfuscation process when clicked. You can customize which element serves as the action button by using the data-clarify-button attribute.

It is recommended to use the floating attribute for a smoother user experience.

Demo

The code above will render something similar to this demo:

Send us an email, and we’ll be in touch soon.

Email:

Click the Click to reveal link to display the actual email address.

The widget can mask any textual data, here is a demo with an obfuscated address:

Our Address:

Generating Obfuscated Data

To generate obfuscated data for the widget, use the obfuscator:

Alternatively, use the script available on GitHub:

bun run scripts/obfuscate.ts "mailto:hello@example.com"

This command outputs base64 encoded data that can be directly used in the obfuscated attribute.

Refer to the script for customization options such as modifying the random number range or using a custom encryption key.

Custom Encryption Keys

The default encryption key is an empty string. To use a custom encryption key when obfuscating data, configure the key using the script.

To apply a custom encryption key, append it to the obfuscated data in the format <base64>?key=<my_key> and set the entire string as the obfuscated attribute.

Alternatively, you can configure the obfuscated attribute as ?key=(prompt) (or specify a custom prompt label with ?key=(prompt:Enter Password)). This will prompt the user to enter the key before decrypting the data, ensuring that only users who know the key can access the hidden information.