Wondering what’s next for npm?Check out our public roadmap! »

    react-protected-text
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.2 • Public • Published

    react-protected-text

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

    Build Coverage Size

    Install

    NPM info

    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="hello@world.com"
        href="mailto:hello@world.com"
        hrefHeaders={{ subject: 'Contact', cc: 'john@doe.com' }}
      />,
      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:hello@world.com?subject=Contact@cc=john@doe.com">hello@world.com</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

    Install

    npm i react-protected-text

    DownloadsWeekly Downloads

    3

    Version

    1.1.2

    License

    MIT

    Unpacked Size

    19.1 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar