I have my email exposed on my website. Since I did this, the spam has become overwhelming.
I now want to delete this email address and lightly obscure my email address such that it is a bit more difficult for bots to harvest the address and use it for spam.
I have considered various techniques:
1: Use mail at example dot com instead of mail@example.com. This will work well with tech savvy users at their desktop with a keyboard and mouse. However, for non-tech savvy users, they might become confused. And mobile users will just not bother writing the email out and move on. Tech savvy or not.
2: Use CSS :before and :after, etc. to display the email address. This is not desirable because it makes it impossible to select the email address, and also the user cannot click the address in a mailto: link.
3: Use javascript to document.write the email address or the mailto: link. This works transparently on all users that have js enabled. If the script is inline, it will even work with people who disallow external or third party scripts.
For now, I think number 3 is the best approach.
I would love to hear your approach to this.
Note: I am not after a bullet proof solution.
I guess a near bullet proof solution is to just use a web-form and a captcha like hcaptcha.
However, I personally hate webforms and prefer using an email if such is provided, and even though I have a webform and some users use it, I have gotten really valuable contacts from people actually using the email.
Now, when I try to implement strategy number 3, I face a problem with jekyll:
I do not want to have to type out a javascript one-liner every time I have to refer to my email address. So to make it easier, I have made an _includes file called “obscured-email.html”. It contains:
<script type="text/javascript">document.write('{{ site.data.vars.contact_email }}');</script>
And a file called obscured-email-link.html containing:
<script type="text/javascript">document.write('<a href="mailto:{{ site.data.vars.contact_email }}">{{ site.data.vars.contact_email }}</a>');</script>
When I need to refer to my email address or include an email link, I can just do this:
"{%- include obscured-email.html -%}"
"{%- include obscured-email-link.html -%}"
Problem is, however, that when I do the above, it will write: "info@example.com "
where I would expect it to write:
"info@example.com"
Notice the added space before the doublequote?
How do I get rid of this?
I thought {%- ... -%} should strip the whitespace?
It seems to do this only on the left side?
I suspect this has to do with the text file probably ending in a newline. And I have tried getting rid og the final newline, but my editor seems to insist on keeping it there…
How to solve?
Is there a better approach for this than my include trick?