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.

Configuration

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

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

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

  <altcha-widget
    data-obfuscated="${obfuscatedData}"
    display="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.

Demo

The code above will render something similar to this demo:

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:

Generating Obfuscated Data

To generate obfuscated data, use the npx command:

npx altcha-lib obfuscate "mailto:hello@example.com"

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