react-protected-text

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);

Show rendered HTML

<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>

Show human interaction

<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="[e-mail]"
    href="mailto:[e-mail]"
    hrefHeaders={{ subject: 'Contact', cc: '[e-mail]' }}
  />,
  document.body,
);

Show rendered HTML

<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>

Show human interaction

<a href="mailto:[e-mail]?subject=Contact@cc=[e-mail]">[e-mail]</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