react-protected-text

React component for text & link protection against web crawlers / bots

Install

npm install react-protected-text

Why?

Do you want to display text (name, phone, address) or link (email) but prevent web crawlers from stealing them from your website ? If you just simply publish an email address on a website you can expect tons of spam. This is why you have to make sure you never add your email or phone to any website as plain text which is visible by bots.

How it works

The component uses a mixture of pure text in HTML and CSS. The text is partially rendered in reverse in HTML and the rest is prepend/append by CSS. CSS will then reverse all text again. Link URL is obfuscated until an onClick event occur. This making the text or link useless for spammers, but user friendly on a browser.

Under the hood, it uses the duo of CSS properties unicode-bidi: bidi-override; and direction: rtl;

Use

Basic hello world:

import React from 'react';
import ReactDOM from 'react-dom';
import ProtectedText from 'react-protected-text';

ReactDOM.render(<ProtectedText text="Hello World!" />, document.body);

<span class="protected-text">
  <style type="text/css">
    * {
      unicode-bidi: bidi-override; direction: rtl;
    }
    .protected-text > *:before {
      content: "!dlr" 
    }
    .protected-text > *:after {
      content: "lleH"
    }
  </style>
  <span>oW o</span>
</span>

<span>Hello World!</span>

Basic link:

import React from 'react';
import ReactDOM from 'react-dom';
import ProtectedText from 'react-protected-text';

ReactDOM.render(
  <ProtectedText
    text="[email protected]"
    href="mailto:[email protected]"
    hrefHeaders={{ subject: 'Contact', cc: '[email protected]' }}
  />,
  document.body,
);

<span class="protected-text">
  <style type="text/css">
    * {
      unicode-bidi: bidi-override; direction: rtl;
    }
    *:before {
      content: "moc.d"
    }
    *:after {
      content: "olleh"
    }
  </style>
  <a href="https://click">lrow@</a>
</span>

<a href="mailto:[email protected]?subject=Contact@[email protected]">[email protected]</a>

What about copying to clipboard ?

Using CSS unicode-bidi: bidi-override; and direction: rtl; will cause one drawback: The user can no longer copy text to clipboard. This is a small price to pay in my view.

Props

| Prop | Type | Default | Description | | --------------| -------- | --------------- | - | | text | string | '' | The text to display | | href | string | '' | Target URL for link.Support of mailto:, tel:, sms:, :facetime, ect. | | onlyHTML | bool | false | Prevent use of CSS pseudo-class. Obfuscation is done only in HTML.This will reduce level of protection. | | hrefHeaders | object | null | Parameters added to URL:subject, cc, bcc, body, ect. | | className | string | '' | Custom class name | | protectedHref | string | 'https://click' | URL to show when obfuscated |

Browsers Compatibility

Component was tested on following browsers:

• Chrome (Desktop + Mobile)
• Firefox
• Safari (Desktop + Mobile)
• Edge
• Internet Explorer 11

Disclaimer

This solution will work while crawlers do not detect it. Technicaly it is still possible to retrieve whole text but the component makes it harder.

License

MIT © Julien CROCHET