safe-contact

Show your email to people, not to spam bots.

Bots scrape pages for addresses and sell them to spammers. safe-contact keeps the address out of your page until a person points at it, focuses it or taps it. It looks and works like a normal link.

GitHub · npm · React demo

Try it

Email
With a label
Email us
Phone
Text message

Hidden links on this page: . Hover one and watch it drop.

Now open View Source (Ctrl+U, or ⌘⌥U on a Mac) and search for @example. It isn't there. Neither is the phone number. What is there is a made-up address that goes nowhere.

Use it

npm install safe-contact

React

import { Email, Phone, Sms } from "safe-contact/react";

<Email address="you@yoursite.com" />
<Email address="you@yoursite.com" subject="Hello">Email us</Email>
<Phone number="+1 555 0100" />
<Sms number="+1 555 0100" body="Hi!" />

In Next.js and other server-component apps, the address is scrambled on the server and never reaches the browser. Nothing to set up.

Any website

npx safe-contact you@yoursite.com

Paste the HTML it prints, and add this once per page:

<script src="https://unpkg.com/safe-contact/dist/auto.js" defer></script>

How it works

  1. The HTML holds a decoy in place of the address: a made-up user name, domain and top-level domain that reads like an address but cannot be delivered. For a phone number it is random digits after +0, a country code that does not exist. A bot that harvests the HTML gets junk.
  2. As soon as the page is on screen, the script draws the real address for people, written backwards inside <bdo dir="rtl">. The browser displays it the right way round, but the page text is still backwards, so a bot that runs the page finds no address either.
  3. The real link is kept scrambled in a data-safe-contact attribute. Its href is just #: no mailto: link for a bot to follow, but it looks and behaves like any other link.
  4. When someone hovers, focuses, taps or clicks, it becomes a real link, just before the click lands. One click opens the mail app.

Screen readers hear “Email address, activate to show” until the link is focused. The browser script is under 1 KB and needs no CSS.

No trick stops a bot that is built to beat it. Most harvesters just read the HTML, some run the page in a browser, and very few hover over links. This stops all but the last kind.