📧 WP Shadow Links

Based on Obfuscated Email Link Generator JS Version 0.1.9

The original script was primarily created for use in WordPress websites, using Elementor Pro or other page builders that make it easy to add "data-attributes" to elements; However, it can be used on any type of website, on plain HTML or Javascript.

This plugin is intended specifically for WordPress, and provides several ways to add email links that are visible only on the frontend and completely absent in the source code of the page. Doing this, crawlers and spambots can't harvest email addresses or, at least, this makes the task more difficult, because parsing the live DOM is required instead of simply searching for email addresses in the raw page source.

⭐ Key features

• Automatic Source Obfuscation - PHP filter scans post content, excerpts, and widgets before output, and obfuscates every <a href="mailto:..."> link and every plain-text email address automatically — no manual configuration needed
• Base64 Encoding - Email addresses are Base64-encoded server-side; the raw page source contains no readable @ address. JavaScript decodes them in the live DOM using the native atob() function
• Manual Data-Attribute Method - Supports the original approach: split an email across data-email / data-domain attributes for use in page builders like Elementor Pro or plain HTML
• Shortcode Support - [shadow_link] shortcode for inserting obfuscated email links from the WordPress editor
• Flexible Targeting - Can target specific elements by class or use the source element
• URL Encoding - Properly encodes subject and body parameters
• Validation - Validates email and domain formats
• Error Handling - Graceful error handling with console warnings
• Accessibility - Adds title attributes for better accessibility
• Dynamic Content Support - Methods for processing dynamically added content
• Optimized Performance - Avoids duplicate processing with processed-element flags
• Avoid Spam Bots - Since the HTML source is free from readable email addresses (links are reconstructed only in the live DOM), most spam bots, crawlers, and data-scraping tools cannot see email addresses, reducing the risk of ending up in spam lists

The script automatically runs when the DOM is loaded and creates functional mailto links from obfuscated data.

🔍 Automatic Email Obfuscation (PHP filter)

This is the easiest way to protect emails — it requires no changes to your existing content.

When a page is rendered, the plugin scans the output of posts, pages, excerpts, and widgets for any exposed email address and obfuscates it before the HTML is sent to the browser:

• Mailto links — <a href="mailto:user@example.com">Contact us</a> written in the block editor or any page builder is intercepted, the email is Base64-encoded, and the <a> is replaced with an inert <span data-shadow-email="...">. Original link attributes (class, target, title, rel) and inner HTML are preserved and restored by JavaScript.
• Plain-text emails — A bare address like support@example.com appearing in body text is wrapped in the same <span data-shadow-email="..."> and converted into a clickable mailto link on the frontend.

In both cases the raw page source contains no literal @ character in the email position — only the Base64 payload is visible:

<!-- What you write in the editor -->
<a href="mailto:contact@example.com">Email us</a>
Write to contact@example.com for info.

<!-- What appears in the page source -->
<span data-shadow-email="Y29udGFjdEBleGFtcGxlLmNvbQ==" data-shadow-inner="RW1haWwgdXM=">Email&#64;us</span>
Write to <span data-shadow-email="Y29udGFjdEBleGFtcGxlLmNvbQ==">contact&#64;example.com</span> for info.

<!-- What the visitor sees in the live DOM (after JS runs) -->
<a href="mailto:contact@example.com" class="mk-mailto-link" title="Send email to contact@example.com">Email us</a>
Write to <a href="mailto:contact@example.com" class="mk-mailto-link">contact@example.com</a> for info.

No-JS fallback: The span fallback text uses the HTML entity @ for @, so the address remains human-readable in browsers without JavaScript but still cannot be harvested by plain-text scrapers.

🏷️ Manual Data-Attribute Method

For fine-grained control — custom icons, copy-to-clipboard buttons, subject/body pre-fill — you can use data attributes directly on any HTML element or via the shortcode. This method works in Elementor Pro, Gutenberg HTML blocks, or plain HTML.

Data attributes

ℹ️ Shortcode attributes

The [shadow_link] shortcode accepts the same attributes without the data- prefix — so data-email becomes email, data-copylink becomes copylink, and so on, with identical behaviour.

CSS classes for custom styling

The link inherits the styling of the element it is attached to. Additional CSS classes are available for custom styling:

🔐 Security Notes

• When data-target is set (or the original link had target="_blank"), the plugin automatically adds rel="noopener noreferrer" to prevent the new page from accessing window.opener.
• The Base64 encoding used by the automatic PHP filter is not encryption — it is obfuscation. It reliably defeats simple regex scrapers and the vast majority of harvesting bots. A determined attacker running a full headless browser could still decode the address, but that is a significantly higher barrier than scraping raw HTML.

ℹ️ Disclaimer

Please consider I'm not a professional developer, or to say it better: programming is not my main activity.
I'm working in IT since 90's, I've ever loved to create websites and when WordPress appeared I chose it as my main tool. If you plan to use this script in production, please consider personally reviewing the code and making any necessary changes for your case. Or simply, don't use it.

⚠️The script/plug-in is offered "as-is" without any guarantee, use it at your own risk! ⚠️

(sorry, I must say this, there's a lot of bad people out there! 😅)

🤖 AI Disclaimer

As previously stated, I'm not a professional developer and I've used AI (Claude Sonnet) to create and improve this script; though, I've personally tested it on my environment and I'm confident enough to use it on public-facing sites. Feel free to review, modify, fork, suggest, ignore it or whatever else you want.

💾 Implement in your site

WordPress plugin (recommended)

Install and activate the plugin. The automatic PHP filter is enabled immediately — no configuration required. All <a href="mailto:..."> links and plain-text email addresses in posts, pages, excerpts, and widget text areas are obfuscated automatically.

For advanced links (custom icons, copy button, subject/body pre-fill) use the [shadow_link] shortcode or the data-attribute method in a page builder.

Standalone JS (non-WordPress sites)

You can use the JS engine alone on any website. Include the script before </body>:

<script src="path/to/email-link-generator.js" type="text/javascript"></script>

Or paste the contents inside `