Saving my email from spam

Spam illustration taken from cookedmedia.co.za

I recently started working on my personal website (https://debsec.com). After spending quite some time on it, I was almost done. The only issue I had was, how will people contact me if they are interested in getting in touch. Yes, I have linked to my facebook, linkedIn, github profiles on my website, but I email is still the easiest way of contacting someone.

I was about to simply put my email on my website, but then I remembered the spams that one of my older personal mail IDs get, even with sophisticated spam filters that google and microsoft have in place. I did not want that happening to my brand new syracuse university mail ID (I started my MS in Computer Science from Fall 2018 at SU). So, then I thought maybe I should write something like mymail(at)syr.edu or mymail(at)syr(dot)edu, etc.
But even I can write simple script with regex rule that can recognize such modifications to emails, so I am pretty sure professional spammers will be able to.

Finally I decided I should make a form instead and use something like Formspree (http://formspree.io) to receive emails. Its a free service, does not need registrations and people will be able to easily fill up the form and shoot an email to me.

The example code given on their website is something like this:
 <form action=”https://formspree.io/your@email.com" method="POST">
 <input type=”text” name=”name”>
 <input type=”email” name=”_replyto”>
 <input type=”submit” value=”Send”>
</form>

Alas, that would defeat the purpose of using the form in the first place. Again spammers will be able to easily scrape off “your@email.com” from the page source code. I needed to modify this, so I changed it to this:

<form action=”” onclick=”(function(){action=’//formspree.io/’+window.atob(‘eW91ckBlbWFpbC5jb20=’); console.log(action);})()” method=”POST”>

Might look weird at first glance, but let me break it down for you.
“eW91ckBlbWFpbC5jb20=” is basically the base64 encoding for “your@email.com”. All this code does is, when the form is submitted, it will decode the base64 email address and update the form action to “//formspree.io/your@email.com”.
So we will get our desired form without exposing my email id to scrapers.

I thought at this point that I was done, but then.. I am someone who isn’t really satisfied with my work. While scrolling through my website I thought what if someone really really needed my email ID urgently? Like they wanted to add my email to some mailing list or give to someone. Who knows what could happen.. I didn’t want to miss out on some opportunity because I was scared of spammers and did not put my email ID on my personal website.

I had to put my email ID on my website. So, I decided putting an image of my email ID was the way to go. I had seen many websites that provide “whois” information about domains display an image of the details of a domain owner rather than text. And I wasn’t going to make an image file containing my email and upload it on my website. That would surely look ugly and who knows what if I change the background colors, fonts of my website, would have to make image file for my email each time and keep updating it.

No, I had to generate the image containing my email with code.

And after some digging around I was able to use simple html Canvas and javascript to solve my problems.

<img id=”image”> 
<canvas id=”textCanvas” height=26 width=140></canvas>

The height width and margin etc are just there to make the email ID image look like its written on the same line perfectly. The javascript code is as follows:

var tCtx = document.getElementById(‘textCanvas’).getContext(‘2d’),
 imageElem = document.getElementById(‘image’);
 document.getElementById(‘textCanvas’).style.display = “none”;
var decodedData = window.atob(“eW91ckBlbWFpbC5jb20=”);
 console.log(decodedData);
 tCtx.font = “20px ‘Saira Extra Condensed’”;
 tCtx.fillStyle = ‘#343a40’;
 tCtx.fillText(decodedData, 0, 21);
 imageElem.src = tCtx.canvas.toDataURL();
 console.log(imageElem.src);

We are writing our email to the canvas then using different functions in canvas to define the fontfamily, font size and color. Then finally we converting that canvas object into an image.

Also, just to hide the canvas object we do style.display = “none”;

And that’s it, I finally have my email ID on my website without worrying about spam.

My website (debsec.com) with my email ID displayed as an image

Thank you for reading so far! :)

Ps. To read more about html canvas visit: https://www.html5canvastutorials.com/tutorials/