Awesome
safe-email
🛡️📧 Protect e-mails against spam and scraping bots
Easy way to obfuscate e-mails to have spam protection against scraping bots.
- Vanilla JavaScript only ✔️
- Very lightweight with no dependencies ✔️
- Easy to configure by using HTML attributes ✔️
How it works 🛡️
- Base64 encoding of e-mail
- CSS tricks to show the right text only to humans
- Obfuscating HTML text of the e-mail
Import
Option A: Use CDN
It's the simplest way. Just add it to your page:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/safe-email@1.1.1/dist/safe-email.min.js"></script>
Option B: Install
- Using NPM (recommended):
npm install safe-email --save - Using bower:
bower install undergroundwires/safe-email - As a git submodule:
- Go to the folder you wish to have the repository
- Run
git submodule add https://github.com/undergroundwires/safe-email
- ❗ Only CDN and NPM solutions will have minified files with polyfills (
dist/folder)
<script type="text/javascript" src="/node_modules/safe-email/dist/safe-email.min.js"></script>
Usage
Encode your e-mail
You'll need to base64 encode to get an obfuscated value for it. Feel free to use your own favorite tool or safe-email generator to base64 encode your e-mail.
Examples
Simplest
<a title="Email" href="#" data-email_b64="dW5kZXJncm91bmR3aXJlc0BnaXRodWIuY29t"></a>
With all properties
<a title="Email" href="#" data-email_b64="dW5kZXJncm91bmR3aXJlc0BnaXRodWIuY29t"
data-body="Hello!" data-subject="About website"></a>
With icon
<a title="Email" href="#" data-email_b64="dW5kZXJncm91bmR3aXJlc0BnaXRodWIuY29t">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1.1 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1.1-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
</a>
As icon is an inner HTML of the parent <a> your e-mail will not be rendered.
Properties
| Property | Explanation | Required / Default |
|---|---|---|
data-email_b64 | Base64 encoded text of your e-mail. You can encode your e-mail here. | Required |
data-body | Body of the e-mail | Optional, Defaults to Hi! |
data-subject | Subject of the e-mail | Optional, Defaults to root domain name + path, e.g. abc.com/path |
Any element that has data-email_b64 property defined will have obfuscated mailto: pointing to the given e-mail address. If owner element of this property has no inner HTML, then the e-mail (in obfuscated form) will be rendered.
Package contents
The deployed packages includes a dist/ folder that adds polyfills to the files and distributes them as:
- minified (
.min.js) files for production usage - non-minified (
.js) files for debugging
GitOps
CI/CD is fully automated for this repo using different Git events & GitHub actions.
