Hugo

Cloak email shortcode component

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!

4 Likes

Nice. Thank you for sharing.

cc/ @regis

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

Me, for some reasons, I want to show my email address on my website, and this
makes harder the crawling of mail addresses. Obviously you don’t. Please. Don’t use this shortcode.

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.

1 Like

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

  1. Writes <span class="cloaked-e-mail" data-user="eod.nhoj" data-domain="moc.elpmaxe"></span> in the web page.
  2. A CSS rule reverses the strings back to their original values and concatenates them with “@” in-between. No link is available yet.
  3. A script builds then the link by creating a <a href=...> element.
1 Like

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.

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 :slight_smile: