Safe-email NPM

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>

top↑

Usage

Examples

Simplest

  <a title="Email" href="#" data-email_b64="dW5kZXJncm91bmR3aXJlc0BnaXRodWIuY29t"></a>

See it live on CodePen

With all properties

  <a title="Email" href="#" data-email_b64="dW5kZXJncm91bmR3aXJlc0BnaXRodWIuY29t"
    data-body="Hello!" data-subject="About website"></a>

See it live on CodePen

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>

See it live on CodePen

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.

top↑