https://github.com/undergroundwires/safe-email
🛡️📧 Protect e-mails against spam and scraping bots
https://github.com/undergroundwires/safe-email
anti-spam email-obfuscation email-obfuscator email-privacy html javascript javascript-library no-dependencies npm-package
Last synced: 2 months ago
JSON representation
🛡️📧 Protect e-mails against spam and scraping bots
- Host: GitHub
- URL: https://github.com/undergroundwires/safe-email
- Owner: undergroundwires
- License: mit
- Created: 2020-05-23T14:06:23.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-01-18T12:22:33.000Z (9 months ago)
- Last Synced: 2025-03-17T22:44:34.913Z (7 months ago)
- Topics: anti-spam, email-obfuscation, email-obfuscator, email-privacy, html, javascript, javascript-library, no-dependencies, npm-package
- Language: JavaScript
- Homepage: https://safe-email.netlify.app
- Size: 2.02 MB
- Stars: 31
- Watchers: 4
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# safe-email
> 🛡️📧 Protect e-mails against spam and scraping bots
[](https://github.com/undergroundwires/safe-email/issues)
[](./.github/workflows/publish.yaml)
[](./.github/workflows/build-and-test.yaml)
[](./.github/workflows/bump-and-release.yaml)
[](./.github/workflows/quality-checks.yaml)
[](https://www.npmjs.com/package/safe-email)
[](https://github.com/undergroundwires/bump-everywhere)
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:
```html
```
### 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)
```html
```
*[top↑](#safe-email)*
## 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](https://safe-email.netlify.app/) to base64 encode your e-mail.
### Examples
#### Simplest
[See it live on CodePen](https://codepen.io/undergroundwires/pen/XWbLMOL)
#### With all properties
[See it live on CodePen](https://codepen.io/undergroundwires/pen/MWwMpRL)
#### With icon
[See it live on CodePen](https://codepen.io/undergroundwires/pen/GRJbWaE)
As icon is an inner HTML of the parent `` 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](https://safe-email.netlify.app/). | 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↑](#safe-email)*
## 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
*[top↑](#safe-email)*
## GitOps
CI/CD is fully automated for this repo using different Git events & GitHub actions.
*[top↑](#safe-email)*