obfuscate-link web component

$3

Give Crawlers & Spammers a harder time collecting your infos while still display the infos nicely.

``html
custom link















`

$3

The obfuscate-link web component expects an already encoded value.
The default encoding is base64.
Please base64 encode your link yourself before entering it.

You can add your own decoder to provide a more sophisticated encoding and hence you must also have your own encoder to encode your value.

Add your decoder like this:

`html

`


Using this component

There are three strategies we recommend for using web components built with Stencil.

$3

- Put a script tag similar to this in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

$3


- Run npm install my-component --save
- Put a script tag similar to this in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

$3

- Run npm install obfuscate-link-web-component --save
- Add an import to the npm packages import { ObfuscateLink } from 'obfuscate-link-web-component';customElements.define('obfuscate-link', ObfuscateLink);
- Then you can use the element anywhere in your template, JSX, html etc

Disclaimer

Obfuscation can still be decoded by sophisticated bots quite easily but still better than nothing.
Using the web component itself is already blocking spammer that look for mailto links.

Development

Run:

`bash
npm install
npm start
`

To build the component for production, run:

`bash
npm run build
`

To run the unit tests for the components, run:

`bash
npm test
``

Credits

Heavily inspired by https://github.com/coston/react-obfuscate
I was migrating from react to plain HTML and JS, so i needed something that worked as web component.

I also enjoyed reading this posts:
https://antonvroemans.medium.com/expand-your-spam-mailing-list-with-cloudflares-poor-obfuscation-fdc3cc8f4ccd
https://www.corewebvitals.io/pagespeed/say-goodbye-to-cloudflare-email-obfuscation
https://derkuba.de/content/posts/1021/stencil-builds-for-using-component-lib/