Let’s say you want to add contact info to your blog without it being logged in dozens of spam mailing lists. You would like to show it to your users and hide it from scraping bots. How can you do that?
My suggestion is to encode the data, and then have a bit of Javascript code that will decode it after the user performs some action in their browser. Most scrapers will likely only download the HTML bit of your webpage, scan it for strings that look like emails, and instead find an incomprehensible blob of encoded data.
For example, you can convert your email to base64 using a Javascript built-in and embed it in your website:
btoa("[email protected]");
// "bWFpbEBleGFtcGxlLmNvbQ=="
And then decode it client-side:
atob("bWFpbEBleGFtcGxlLmNvbQ==");
// "[email protected]"
You would then write a function that decodes your email and injects it into an HTML component on your webpage.
function injectEmail() {
var encoded = "bWFpbEBleGFtcGxlLmNvbQ==";
var id = "inject-here";
document.getElementById(id).innerHTML = atob(encoded);
}
The component could look like this:
<div id="inject-here" onclick="injectEmail()">Click me to see the email!</div>
Below you can see it working live.
Click me to see the email!