Email Address Obfuscation Techniques

support
1

I was curious what email obfuscation techniques people are using with Hugo sites.
I was looking at CSS techniques like the code below, but was interested if anyone had better ideas:

Mark

<style type="text/css">
.e-mail:before {
    content: attr(data-website) "\0040" attr(data-user);
    unicode-bidi: bidi-override;
    direction: rtl;
}
2

[requires javascript]
I have been meaning to share this for awhile now to get feeback/improvements:

Setup

layouts/shortcodes/encoded-email.html

    {{- if .IsNamedParams -}}
    {{- partial "component/encoded-email" $.Params -}}
    {{- end -}}

layouts/partials/component/encoded-email.html

<script type="text/javascript">// <![CDATA[
  // Hide email address, at least we try (base64)
  var liameHREF ='href="mailto:{{ .email | base64Encode }}"';
  document.write('<a  class="{{ .class }}" ' + atob(liameHREF) + ' target="_blank">' + atob(liame) + '<\/a>')
  // ]]></script>

Use shortcode

{{% encoded-email email="myemail@example.com" %}}

Note: Use the partial in any part of your templates also.

I would love to hear feedback to make this better or even just improve usability.

Proposed improvement #1

layouts/partials/component/encoded-email.html

<script type="text/javascript">// <![CDATA[
  // Just a way to hide your email address, at least we try (base64)
  var liame ='{{ .email | base64Encode }}';
  var liameHREF ='{{ (print "href=\"mailto:" .email "\"")  | base64Encode }}';
  document.write('<a  class="{{ .class }}" ' + atob(liameHREF) + ' target="_blank">' + atob(liame) + '<\/a>')
  // ]]></script>

Futile? Not really

For those scrapers that did process my javascript and scrape a DOM returned page, welcome to my spam folder. You could also not show the email until a user interaction (onClick) which would take care of rendered pages exposing the email address.

2 Likes
3

In my opinion obfuscation is futile. If a browser is able to render an email address then modern day spammers are able to retrieve it. Take a look at PhantomJS and the universe of libraries around it.

One way that makes it more ressource consuming for scrapers would be using an image. It’s scrapable too, but OCR takes more ressources and might fail if you go about clever with various fonts.

In the end what you want is this:

  • have customers/readers contact you
  • not having spammers collect your email address

My way of “obfuscation” is to never add an email address on a website, but offer a form. Once the contact is there, they have my email address and I am sure it’s not a spammer.

1 Like