New module: EmailToEncryptedMailto

[cwsoft]

Hi,

just ported over an old mail encryption/decryption routine using a Caesar cipher from some old projects to protect email addresses from spam bots, but show it normal for humans into a ProcessWire module.

How it works:

1. Enter email with double brackets where you want it [[example@domain.com]] in any CKEditor field
2. Turns to <a href="javascript:cdc('dbfnrgmzfumx','SubjectX')">example<span class="hidden">(</span>@<span class="hidden">)</span>domain.com</a>
3. A Javascript function decrypts the encrypted email on click
4. Link is obfuscated from bots, but visible for humans (example@domain.com)
5. Email placeholders are automatically detected via template _init.php file
6. Placeholders gets replaced in template _main.php by wrapping $content around a PHP function

Was super easy to implement with Processwire using the Intermediate / delayed output template strategy of the advanced default PW template and the great API. 

Super fun.

P.S.: If someone is interested, I can post some code examples too. 

[flydev]

Time to write your very first module 

click ??

[cwsoft]

6 hours ago, flydev said:

Time to write your very first module 

Almost. Guess I will turn my working solution in a custom text field type sanitizer first so there is no need to „hack“ the template files anymore. But really nice how PW stays out of your way and allows you to test/implement ideas very fast and to refine/adjust the POC later. Also like that it‘s up to yourself to use procedural or object oriented code or a mixture of both similar to Python for quick tests.

P.S.: I knew there is a PW module available to obfuscate email addresses, but I was curious how long it would take me to port over an working solution from some older projects of mine to PW myself. 

[netcarver]

@zx80 There's actually several module's for this in the PW Asset Catalog, but you could always take the purple pill option (am I the only one who wanted a purple pill in the matrix?) and create a textformatter module that people could hook up to their textfields.

[cwsoft]

3 hours ago, netcarver said:

@zx80 There's actually several module's for this in the PW Asset Catalog, but you could always take the purple pill option (am I the only one who wanted a purple pill in the matrix?) and create a textformatter module that people could hook up to their textfields.

Thanks for the link, didn‘t knew this site. As I am still new to PW I am still in discovery/experimental mode. To learn a new CMS/CMF I always try to use core stuff first and see how far I get by adapting things like templates, modules myself rather than jumping into 3rd party addons right from the start. Once I get more familiar with PW ecosystem, I test out 3rd party addons and check their code base to see how others would implement stuff. 

[cwsoft]

@flydev: Damn red pill ?. Created my first module hooking after Page::render and replacing text emails like (example@domain.com) into encrypted mailto links which gets automatically decrypted from a Javascript function embedded into the head section if emails are found on the rendered page.

Really enjoy my PW journey so far. If you need more options, want to configure stuff from the backend etc. I propose you try out the EMO module from Roope. My module will stay like this without more profound checks like mailto: links, embedded emails in other tags. If you are interested in the code, just send me a PM or post here.

 

[cwsoft]

Just uploaded the module files to my Github profile in case someone is interested in. If you want to use it, just download the attached Zip file in the Github Release section of the linked repo.

[cwsoft]

Updated module to version 0.0.2 with tranlations of the mailto subject text in English and German. In addition I added the CSS class automatically, so there is no need to add it manually to your template anymore.

[bernhard]

Hey @zx80 great to have a new module author ? congrats!

Quote

Installation

Download Zip file from Releases section to your site/modules, unzip it and rename the module folder into EmailToEncryptMailto. Alternatively you can clone the repository into your Processwire site/modules folder (recommended) via the following commands:

cd /your_processwire_folder/site/modules git clone https://github.com/cwsoft/pwEmailToEncryptedMailto.git ./EmailToEncryptedMailto

Once the module files are copied in place, login to your ProcessWire backend and reload the modules. Afterwards the EmailToEncryptMailto module should show up in your backend ready to be installed by ProcessWire as usual. Once installed, view a page with text email(s) in your frontend to see the module in action.

FYI: You can also just copy and paste the link to the ZIP file into the "install from url" field then you don't have to rename anything.

I see that you inject both the JS and the CSS file in the site's head. I wonder what you or others think about that approach to inject such small files into the site. I think since HTTP2 it should not matter but tools like pingdom speedtest still show the "number of requests" as KPI.

Personally I'd prefer splitting things into multiple files and then just including them over complicated build tools. And I'm already doing it similarly with RockFrontend. But I'd be interested what others think or if anybody has some good resources to read.

[cwsoft]

@bernhardThanks for your suggestions. Fully agree with you on linked JS/CSS. In my dev env I use SASS/Typescript with bundlers to create one combined and minified CSS and JS file, which I include.

Set it up like this so no one needs to modify templates or add CSS rules to template files manually. I also wanted something which just works without tons of settings you can apply e.g. add to head/body, add as inline/link etc.

As there are at least three similar modules with lots of possible setting options, I just did a clean, small, tidy one with almost no settings at all as my first module. 

P.S. Thanks for the tipp with the install from url field, will check this out. 

[cwsoft]

Quote

FYI: You can also just copy and paste the link to the ZIP file into the "install from url" field then you don't have to rename anything.

@bernhardIn my case I prefixed the Github repo with the suffix pw - as I plan to release at least one module more - but named the module folder and class EmailToEnryptedMailto without that pw suffix. I could add a ZIP package to the release section with the right folder naming convention, or just do it via command line inside the site/modules dir of my PW installation.

git clone https://github.com/cwsoft/pwEmailToEncryptedMailto.git ./EmailToEncryptedMailto

P.S.: May change the naming of the Repository in the future, but I do not think there will be much downloads of my module anyway, so I stick with it for now :-).

[bernhard]

29 minutes ago, zx80 said:

P.S.: May change the naming of the Repository in the future, but I do not think there will be much downloads of my module anyway, so I stick with it for now :-).

Thx for sharing nonetheless! I'm thinking of adding such a feature to RockFrontend so your module is definitely a welcome inspiration ? 

[cwsoft]

@bernhardIt’s on my list to install and test your modules once I find some time to do so. So far I looked into the code of yor modules on Github to get some inspiration and insights how the PW ecosystem works. Especially interested in the LESS template system. Used Twig (PHP) and Jinja (Python) in the past for medium to large size projects, while sticking to plain PHP/Python for small projects.

[cwsoft]

Yeahh. I - or better my first ProcessWire  module EmailToEncryptedMailto - made it into issue #475 of the processwire weekly news. Thanks to Teppo for your promotion. Highly appreciated. 

[bernhard]

Hey @zx80 congrats again ? I've read the text and while reading I thought: "Maybe it would be nice to have the "hidden" class configurable, so that for example when using uikit for the frontend one could simply use the uk-hidden class so there is no need for an additional stylesheet.

Then I thought: Why not just use the "hidden" attribute instead? Did you think of that? Or would that prevent the whole principle from working?

I'll likely add a similar feature to RockFrontend one day so feel free to ignore this idea. But I'd still be interested in your opinion about it ? 

[cwsoft]

@bernhardGood point. Hidden attribute has great browser support now, so I will remove the hidden class in the next version and replace it by a hidden attribute. Great suggestion, especially as this class is the only statement in the entire CSS file. Cheers.

[bernhard]

Cool ? Yeah and even if it didn't work it would not break the site but just be a little harder to read ? 

[cwsoft]

@bernhardStill need to find some spare time to test your Rock modules, especially the RockFrontend module. What I read so far sounds great. Regarding the uikit framework. I haven‘t used uikit so far, but thats on my list too, as it is supported by some modules and the core as styling option. 

[cwsoft]

Dear all,

just released version 0.0.3 of my EmailToEncryptedMailto module including the suggestions provided by Bernhard. This allows to eleminate the class .cdc used to hide the span tags required to trick spam bots by the HTML attribute hidden. This way only one Javascript Caesar decryption file is added into the head. No more CSS needed.

@bernhardThanks for the proposoal, highly appreciated.

[cwsoft]

Please note: I changed my initial forum name zx80 to my Github name cwsoft. Never thought I will release two PW modules within a month after my initial registration to the ProcessWire community forum ?. Hope this makes it more transparent for possible future contributions to the PW eco system. 

[cwsoft]

Dear all,

just released v0.0.4 of my EmailToEncryptedMailto module.

I basically added the Typescript source files and config files so other users can modify the minified Javascript code more easily themselves. Using Windows 10 and VS Code as my PW dev environment.

The NPM modules used (typescript, esbuild) can easily be installed as dev-dependencies via npm run install inside the module folder. Apart from that some code refactoring and clean up. I set the target of the transpiled JS file to es6 for better browser support (before it was set to ESNext).

Have fun

P.S.: The Github release section contains a ZIP-file containing just the ProcessWire module files without the DEV stuff included. The attached ZIP-file is the preferred installation option for end users, while cloning the git repo is the preferred option for devs wanting to adapt/modify the module code.

[cwsoft]

Dear all,

just released v0.0.5 of my EmailToEncryptedMailto module.

The latest release adds support for regular mailto links. So with v0.0.5 all text emails and regular mailto links will be converted into encrypted mailto link variants on the fly. You can add a subject to your mailto links by adding "mailto:info@domain.com?subject=Your Subject" at the end of the email in the mailto part. Apart from that some further code cleanup.

Have fun

P.S.: The Github release section contains a ZIP-file containing just the ProcessWire module files without the DEV stuff included. The attached ZIP-file is the preferred installation option for end users, while cloning the git repo is the preferred option for devs wanting to adapt/modify the module code.

P.P.S: Encrypted mailto links do not yet preserve class or id attributes. That will maybe added in a future release depending on customers needs.

[cwsoft]

Dear all,

just to let you know. I uploaded my module EmailToEncryptedMailto to the ProcessWire modules directory: https://processwire.com/modules/email-to-encrypted-mailto/
Please note: Module needs to pass the official approval before it will show up in the modules directory for others too.

Cheers cwsoft

 

[cwsoft]

Yeah, my module was approved and is now listed in the ProcessWire module catalog https://processwire.com/modules/email-to-encrypted-mailto/. Thanks to all and have fun.

[Thomas -Allwinds Webstudio]

Hi 

I'm a medium pro in php and process wire and not so firm in all programming aspects. I just installed this model on a dev site and found it very easy to handle and perfect in functionality - thanks for this.

But in my PromailerPro installation I found that starting from a short form in the footer from where a user - after inserting his email address - he gets redirected to the profiler subscribe form. Here his email address is prefilled, but unfortunately also encrypted (what looks rather strange at this place - cf screenshot)

To solve this I commented out line 47 in the EmailToEncryptedMailto.module.php

// $html = preg_replace_callback($this->patternEmail, array($this, 'replaceTextEmails'), $html);

And found all working fine for now - didn't do too much testing so far. So: long question short: do you think this an appropriate hack, or do you see any problem going the quick and dirty with it?

Br Thomas