For obvious reasons, it is not a good idea to have your contact information displayed in plaintext on the web. Webcrawlers and bots do exist, and will use RegEx to pick emails and phone numbers out of client-side-source like it’s a cakewalk. Now, ideally, your implementation of what I am dubbing “bot-repellant”, would include server-side Recaptcha validation, and server-side storage of your encrypted contact info that would be decrypted upon validation.
But, if you are a lowly peon like myself, and merely have a WordPress site… perhaps you are a low-value target, with low concern regarding the compromise of your obscured text. Perhaps you merely want something that can be implemented via HTML/JavaScript that will render in the browser and obfuscate your information while repelling bots. Obviously, this is not to be used as a means of security- BUT, it obfuscates your information from being collected by automated web-crawlers and bots.
The cipher key is in the client-side source code, so anyone could potentially go through the trouble of deciphering your obscured text, but a bot is merely going to skim past your site and on to the next low-hanging fruit when its RegEx does not pick up contact info in the expected format.
I would consider this an exercise in determining the MVP, or Minimum Viable Product – in this case, good enough may very well be good enough. If this were not my personal information that could easily be obtained via other means by malicious actors, then I would not dream of considering something like this.
I want to make this very clear- this is not a security solution, and, frankly, it is improper implementation. When I say minimum viable product, I do mean minimum. But, one could use the following as a method of obfuscating information that you did not want to be easily scraped by a web-crawler or bot. It will not hold up to any scrutiny, and certainly should not be used for any clients or business. This is something that can be implemented on a simple site that allows you to add your own HTML/JS, and allow some level of obfuscation that will likely deter automated collection. But, it will not secure data from being collected by a malicious actor. However, if such information is low-value anyways, or might be made otherwise made public, then perhaps it could be a reasonable solution for you. Proceed at your own risk.
Here is some JavaScript code that I found on StackOverflow that will allow one to create a ciphertext from plaintext and decipher it back to plaintext using your determined cipher key. Keep in mind, this means you will have to include your cipher key in your client-facing source code, so it’s not a secure solution by any means.
const cipher = salt => {
const textToChars = text => text.split('').map(c => c.charCodeAt(0));
const byteHex = n => ("0" + Number(n).toString(16)).substr(-2);
const applySaltToChar = code => textToChars(salt).reduce((a,b) => a ^ b, code);
return text => text.split('')
.map(textToChars)
.map(applySaltToChar)
.map(byteHex)
.join('');
}
const decipher = salt => {
const textToChars = text => text.split('').map(c => c.charCodeAt(0));
const applySaltToChar = code => textToChars(salt).reduce((a,b) => a ^ b, code);
return encoded => encoded.match(/.{1,2}/g)
.map(hex => parseInt(hex, 16))
.map(applySaltToChar)
.map(charCode => String.fromCharCode(charCode))
.join('');
}
// To create a cipher
const myCipher = cipher('<CIPHER-KEY>')
//Then cipher any text:
console.log(myCipher('<PLAINTEXT>'))
//To decipher, you need to create a decipher and use it:
const myDecipher = decipher('<CIPHER-KEY>')
console.log(myDecipher("<CIPHER-TEXT>"))Additionally, I suggest using Google’s Recaptcha to try to deter bots. However, without server-side validation, this solution is also not to be relied upon. However, it is far better than nothing, so do it anyways. Here is my example which ties Google Recaptcha validation to the use of a submit button that will decipher your cipher text and display it. This means your plaintext is not displayed until Recaptcha validation has occurred, and cannot be extracted from the client-side source code. Again, Recaptcha is vulnerable without server-side validation, so this will not hold up to any scrutiny whatsoever from a malicious actor.
<html>
<head>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
const decipher = salt => {
const textToChars = text => text.split('').map(c => c.charCodeAt(0));
const applySaltToChar = code => textToChars(salt).reduce((a,b) => a ^ b, code);
return encoded => encoded.match(/.{1,2}/g)
.map(hex => parseInt(hex, 16))
.map(applySaltToChar)
.map(charCode => String.fromCharCode(charCode))
.join('');
}
//To decipher, you need to create a decipher and use it:
const myDecipher = decipher('<CIPHER-KEY>')
const myPlaintext = (myDecipher("CIPHER-TEXT"))
</script>
<script>
function displayText(event) {
event.preventDefault(); // Prevent form submission
var displayArea = document.getElementById("display-area");
displayArea.textContent= myPlaintext;
}
</script>
</head>
<body>
<form action="?" method="POST" onsubmit="return false;">
<div
class="g-recaptcha"
data-sitekey="<YOUR-SITE-KEY>"
data-theme="dark"
data-callback="callback"
></div>
<br />
<button id="submit-button" type="submit" onclick="displayText(event)" disabled>Submit</button>
</form>
<script type="text/javascript">
function callback() {
const submitButton = document.getElementById("submit-button");
submitButton.removeAttribute("disabled");
}
</script>
<div id="display-area"></div>
</body>
</html>