I just updated my hugo-cloak-email shortcode component. You may now specify custom protocols, if you cloak addresses with any messaging protocol, such as xmpp. Enjoy!
8 Likes
Sorry, but without sounding too sarcastic (I know it does sound so and I probably mean it so caused by so many years of trying to hide)… greetings from the year 2019. We don’t put our email addresses on websites here and we use contact forms to have people contact us.
If I am a spammer I know how to use a program to parse a website, like for instance phantomjs, and find the proper email address after parsing. I’ll get your mail address.
If you are using images to replace email addresses - I know OCR. I’ll get your mail address.
the only way of not giving an email address to spammers is to not show it. Obfuscation does not work here in the 21st century. Let’s stop make people think that’s an option. Please. This is not a troll post, but based on 25+ years of online marketing experience.
2 Likes
Thank you very much. That’s a very useful shortcode.
Would it be possible to add classes, e.g.
{{< cloakemail address="john.doe@example.com" class="button" >}}
1 Like
I’ve had clients adamantly insist on putting email on a website even when I offer a safer method like a form, so thanks! This will be useful.
1 Like
Forms with RECAPTCHA are a horrible pattern and are ruining the internet. In 2019 we should not subject users to such things. Thanks again for this.
3 Likes
Would it be possible to explain in detail exactly what the code does (more than “it cloaks”) and how it works? Thanks!
Good idea. I’ll try to implement this when I get some spare time.
We should be able to make this a partial as well, so that we can call it from another template like a footer, right? I am assuming we can pass the email address as a variable to the partial…
Here a missing e-mail address in the imprint could lead to juridical problems.
Given address john.doe@example.com, the shortcode
- Writes
<span class="cloaked-e-mail" data-user="eod.nhoj" data-domain="moc.elpmaxe"></span>in the web page. - A CSS rule reverses the strings back to their original values and concatenates them with “@” in-between. No link is available yet.
- A script builds then the link by creating a
<a href=...>element.
2 Likes
I just published a new version to support classes. Enjoy!
1 Like
That’s excellent. Thank you very much for your efforts!
1 Like
For people’s information considering email addresses vs forms, the number one Security Risk for 2017:
Injection flaws, such as SQL, NoSQL, OS, and LDAP injection, occur when untrusted data is sent
to an interpreter as part of a command or query. The attacker’s hostile data can trick the
interpreter into executing unintended commands or accessing data without proper authorization.
https://www.owasp.org/images/7/72/OWASP_Top_10-2017_(en).pdf.pdf
FYI: I just implemented a new option in this hugo-cloak-email shortcode component, enabling to display on the web page a text (e.g. “Contact us”) instead of the e-mail address.
Enjoy!
3 Likes
I’ve fixed last week a bug preventing to use the shortcode with address without an @. You can now use the shortcode for e.g. phone numbers, like this:
{{< cloakemail address="+1 212 664-7665" protocol="tel" >}}
Hope you’ll like it 
The shortcode can now indicate an e-mail subject as an optional parameter, like this:
{{< cloakemail address="jane.doe@example.com" query="subject=Message from contact form" >}}
1 Like
This is exactly what I need right now.
Is this somehow possible?
In the Hugo docs it is suggested to use partials instead of shortcodes in templates. But I guess right now this doesn’t work here since I can’t pass arguments to a partial. 
Any suggestions how I could “cloak” mail addresses in templates?
You just need to change the variables, e.g. from
{{- $address := .Get "address" | default (.Get 0) -}}
to
{{- $address := .address -}}
Then you can use the partial in your templates:
{{ partial "cloakemail" (dict "address" "mail@test.com") }}
2 Likes
That works just fine. Thank you!