Obfuscate

On my about page, I list an email for contacting me — [ OBFUSCATED ] . Earlier today I realized, oh wait, it’s probably a really bad idea for me to leave my email in plaintext on the internet. As a mailto link, even. What was I thinking!

This blog is written in Hugo, so I wrote a native Hugo email address obfuscator. Check it out:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

{{/* shortcodes/obfuscate.html */}}

{{ $encoded := (.Inner | htmlEscape | markdownify | base64Encode) }}
{{ $halfLength := div (len $encoded) 2 }}
{{ $part1 := substr $encoded 0 $halfLength }}
{{ $part2 := substr $encoded $halfLength }}
<span id="mangled_{{ md5 $encoded }}">[ OBFUSCATED ]</span>
<script>
  (() => {
    let base64ToUnicode = str =>
      decodeURIComponent(atob(str).split("").map(c =>
        "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2)).join(""));
    document.addEventListener("DOMContentLoaded", () => {
      let element = document.getElementById("mangled_{{ md5 $encoded }}");
      element.innerHTML = base64ToUnicode({{ $part1 }} + {{ $part2 }});
    });
  })();
</script>

It’s simple enough, and it’s totally static.

The way it works is, if I don’t want to put email@example.com in my website in plaintext, I write it as {{< obfuscate >}}email@example.com{{< /obfuscate >}}, and Hugo turns that into <span id="mangled_90f4851ba54b394df215a65bbbad8205">[ OBFUSCATED ]</span> when it builds the site. It base64-encodes the actual email address and injects the result into a script, splitting the string into two parts for added obfuscation value. It also takes the md5 checksum of that, which is where we get mangled_90f4851ba54b394df215a65bbbad8205 from.

Then, when the site loads, the script runs and replaces [ OBFUSCATED ] with the real email address. Here’s our example in practice: [ OBFUSCATED ] . If you disable javascript, all you’ll see is [ OBFUSCATED ].

It’s not especially complex, but I think it’s a cute lil piece of code, and it’ll probably save me from a lot of spam.