jako / emo

E-Mail Address Obfuscation with Javascript in MODX Revolution

Hi, I’m Thomas Jakobi 👋

I am a german web-developer & designer based in Münsterland, Germany. I am the developer and/or maintainer of around 35 open source extras for MODX. I am the owner of Treehill Studio, an agency developing premium extras for MODX.

Open Source

I love open source and I commit some of my spare time in open source projects. Most of these projects are extensions to MODX, a content management system to build fast, secure websites.

If you like my work, you can sponsor me on GitHub Sponsors. You can also buy me a coffee (or two) on Ko-fi. I also offer paid coding of custom MODX extras.

Current work

My last open source extra for MODX was TwoFactorX, a MODX extra that adds a two-factor authentication to the MODX manager. Behind the curtain I am working on Cursus, a premium booking system for MODX on base of Agenda.

emo's Issues

Plain text email addresses in output aren't obfuscated

After installing I immediately tested it, and it seems to not obfuscate the plain mails.
From the test-resource the html-output looks like this:

<p>
  This is a test: [email protected] 
</p>

<p>
  This is a test <span id="_emoaddrId3">
  <span class="emo_address">Bitte Javascript aktivieren!</span></span>
</p>

<p>
  This is a test <span id="_emoaddrId4">
  <span class="emo_address">Bitte Javascript aktivieren!</span></span>
</p>

<p>
  This is a test: [email protected] 
</p>

The two mailto-links in the middle are obfuscated correctly, but the plain text mails not.

Passing null deprecated (PHP 8.1)

Just a heads up that the following are deprecated in PHP 8.x:

/core/components/emo/src/Emo.php : 259) PHP deprecated: preg_split(): Passing null to parameter #3 ($limit) of type int is deprecated
/core/components/emo/src/Emo.php : 151) PHP deprecated: is_nan(): Passing null to parameter #1 ($num) of type float is deprecated
/core/components/emo/src/Emo.php : 154) PHP deprecated: is_nan(): Passing null to parameter #1 ($num) of type float is deprecated

Double Icons

With the latest version this one:
<p><a href="mailto:[email protected]"><span class="mSpace top2 fs20 icon-envelope white"></span>[email protected]</a></p>

Gets this one:
<p><span id="_emoaddrId1"><a class="emo_address mSpace top2 fs20 icon-envelope white" href="mailto:[email protected]"><span class="mSpace top2 fs20 icon-envelope white"></span>[email protected]</a></span></p>

The classes are doubled in the <a class and the Icon gets doubled
Example at https://frauenhaus-hildesheim.de/
At the top-right corner

Uninstalling breaks site

Uninstalling Emo causes a blank page in the browser. Chrome displays an HTTP-Error 500. After reinstalling page shows up again. After migrating a site to a new server Emo causes the other Scripts (jQuery etc.) not to work. Only Emo is working.

Google map links

Great plugin!

Having a problem with Google map links though. I think emo is reading the @ symbol in the link.

Map link:
https://www.google.co.uk/maps/place/PRP+Architects/@53.479186,-2.247409,17z/data=!3m1!4b1!4m2!3m1!1s0x0:0xddef64035c715304?hl=en

Result:
<p><a _emoaddrid9"="" href="https:&lt;span id="><span class="emo_address">Turn on Javascript!</span>,-2.247409,17z/data=!3m1!4b1!4m2!3m1!1s0x0:0xddef64035c715304?hl=en" title="View Map" target="_blank"&gt;View map »</a></p>

Thanks

Does not work with MODX 2.7.0

After upgrading MODX to 2.7.0 it's not working anymore. It only shows the default text

Bitte Javascript aktivieren!

and does not replace it. Used Firefox 64 with definitely activated Javascript.

Not compatible with HTML2Minify

if the html is minified with HTML2Minify the script does not work.

Issue with UTF-8 characters.

There are issues with UTF-8 characters in the obfuscation SPAN tag, like the attached image.

Thank you for your help.

Missing files in installation via MODX Package Management

Installation via MODX Package Management does not create the assets/components/emo/ folder and does not copy the folders/files.

JS File Request optional

Hi @Jako, first of all nice work!

While trying this Extra I noticed:

• I could not disable the JS script file (in case I would like to integrate the JS into a another workflow and ship it in my own assets)
• The JS file is still loaded even if no email-address is present on the page

I think one this options should be possible, what do you think?

Obfuscated plain-text-mail-addresses

Hi Jako,
after testing your plugin I noticed that obfuscated plain-text-mail-addresses are converted to a mailto-link at insertion. I think it should either be an option to generated links out of emails, or better yet the plain-text-mails remain plain-text. What do you think?

Usage with strict content security policy

Hello @Jako,

Since a few days my website uses a very strict content security policy (CSP) which blocks any forbidden requests. Since then I'm getting this message in the browser console because of emo:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-bfdm9szMledcxSa3OUnhUfxoYiiR40idmWE4sHvBcsI='), or a nonce ('nonce-...') is required to enable inline execution.

The first option with "unsafe-inline" is the baddest one in terms of security as it allows all inline scripts (as without CSP). The second one with the hash does not work here because the inline javascript code changes on every request so the hash is not stable. The third one should be the way to go as it would only be necessary to mark the inline script with a random string (maybe dynamically as a system setting) like that:

<script nonce="rAnd0m"> doWhatever(); </script>

This way inline code could be enabled securely within the CSP. It should be placed here:

<script src="assets/components/emo/js/emo.min.js?v=1.8.8"></script> <!-- This script block stores the encrypted --> <!-- email address(es) in an addresses array. --> <script type="text/javascript" nonce="rAnd0m">....</script>

Do you think that would be feasible?