[SOLVED] Cloaking Email Addresses

Ask for help or provide support to other members.
User avatar
wiz
Posts: 749
Joined: Sat Oct 30, 2010 12:23 am

Re: Cloaking Email Addresses

Post by wiz »

Most welcome and not naive at all. Sure you can also put in in a PHP include filen (and echo it inside if it), but that isn't much different than putting it directy in your theme.php.
You could also create an email.php with the script and then include it in the theme, but that seems a bit unnecessary with the extra calls.

However this PHP file can't be called directly into the editor unless you're creating a plugin that would include/attach it each time.
NorfolkGreg
Posts: 87
Joined: Wed Sep 01, 2021 7:50 am

Re: Cloaking Email Addresses

Post by NorfolkGreg »

Turns out I can mark this item solved and, Robert, it's thanks to that link of yours!

You had said it was not "easily solvable, as document.write will always write the additional content each time you edit it" so, as the page at the link you suggested included some JavaScript that didn't include "document.write" I thought I would try its "on-click" approach.

To cut a long story short, my mistake was to enter my code, save the page, and then click on the link I had created to test it. NEVER click on the links created while in edit mode! As you suggested, if you do the code gets re-written. ie.

Code: Select all

<p>
<a href="mailto:johnATgmailDOTcom" onclick="this.href=this.href
              .replace(/AT/,'@')
              .replace(/DOT/,'.')">Contact Me</a>
</p>
becomes

Code: Select all

<p>
<a href="mailto:john@gmail.com" onclick="this.href=this.href
              .replace(/AT/,'@')
              .replace(/DOT/,'.')">Contact Me</a>
</p>
and

Code: Select all

<p>
<script type="text/javascript">
	<!-- Begin
		who = "user";
		where = "mydomain.com";
		document.write('<a href=\"mailto:' + who + '@' + where + '\">');
		document.write('Email Me' + '<\/a>');
	// End -->
</script>
</p>
becomes

Code: Select all

<p>
<script type="text/javascript">
	<!-- Begin
		who = "user";
		where = "mydomain.com";
		document.write('<a href=\"mailto:' + who + '@' + where + '\">');
		document.write('Email Me' + '<\/a>');
	// End -->
</script><a href="mailto:user@mydomain.com">Email Me</a>
</p>
However, if you enter the code, save the page AND logout, the correct code is preserved and the email links are usable when NOT logged in.

So, thanks to you, I now have two approaches to cloaking a clickable email link that work.
User avatar
wiz
Posts: 749
Joined: Sat Oct 30, 2010 12:23 am

Re: [SOLVED] Cloaking Email Addresses

Post by wiz »

This is awesome Greg, but what happens if you click inside the editable field (and not on the link itself) while you are logged in?

There's another idea if needed, if you use the additional contents plugin and create a new field, you can paste the cloaking script in a separate editable field from the plugin. A field which you would never "edit" in theory, as it would be used for email only.

Thank you for posting this solution and giving options to WonderCMS users!
NorfolkGreg
Posts: 87
Joined: Wed Sep 01, 2021 7:50 am

Re: [SOLVED] Cloaking Email Addresses

Post by NorfolkGreg »

In case it's relevant, I don't have Monaco or Summernote installed.

If I click anywhere in the editable area other than over the email link it simply opens edit mode. The email cloaking code is there in it's unadulterated original form. It's fine to change the email address details to point to somewhere else.

All that is important is not to attempt to test the revised code while still logged in.

Your "Additional Contents" plugin idea will be good for most users, but I'm less sure for the site I'm developing. It's for an organisation where each member needs to be emailed independently. Luckily member profile pages rarey need to be updated so the risk corrupting the cloaked email code is low for the guy who will be maintaining the site.
User avatar
wiz
Posts: 749
Joined: Sat Oct 30, 2010 12:23 am

Re: [SOLVED] Cloaking Email Addresses

Post by wiz »

It shouldn't make much difference where you're doing it in Monaco/Summernote or without editors, the result should be basically the same if you use the code editor mode.

Either way, this is great feedback, hopefully the solution stays there and makes it easy for whoever will be maintaining it.
Also thank you for marking this thread as solved!
NorfolkGreg
Posts: 87
Joined: Wed Sep 01, 2021 7:50 am

Re: [SOLVED] Cloaking Email Addresses

Post by NorfolkGreg »

After further testing I find that what I posted earlier is not entirely right.

Simply re-opening edit mode on an area that includes the "document.write" form of email cloaking code will cause the JavaScript to be actioned and add an uncloaked form of the email address to the code. So if using that code snippet there is much sense to wiz's suggestion that the email code should be placed in an "Additional Contents" area if at all possible. Of course, it's easy enough to delete the uncloaked address from the code when you open the area for editing, but it will be far too easy to forget to do that if you are focussed on some other edit that needs to be made.

The "on-click" version does not suffer in that way and remain unchanged on reopening the area for editing, so is probably the better option for use in WCMS.
User avatar
wiz
Posts: 749
Joined: Sat Oct 30, 2010 12:23 am

Re: [SOLVED] Cloaking Email Addresses

Post by wiz »

This is why I asked in one of the previous posts, it seemed that might happen.

It would be also interesting to also try creating a deperate JS file with the script and include it in the editor. However this would require editing the JS file each time.
NorfolkGreg
Posts: 87
Joined: Wed Sep 01, 2021 7:50 am

Re: [SOLVED] Cloaking Email Addresses

Post by NorfolkGreg »

The mistake was entirely mine. I appear to have confused myself by having various windows open some where I was logged in and some not - and also forgetting exactly where the uncloaked code appeared when it was generated by "document-write" and failing to see it.

I did try putting the document.write code in a separate file and using a PHP include to call it, but I found that the editor immediately commented out the PHP include line. That left two issues, the first, the need to repeatedly re-edit the include line and the second because WCMS's internal file upload feature bars .php files from upload.

For my purpose, I think my user will be able to cope with the "on-click" code version which I hope will be as successful as the document.write version I have been using successfully for the last ten years.

However, my lack of experience with JavaScript continues to show. I discovered that with a .co.uk address, the code didn't replace both dots. I had to add an extra "dot" line for both to be replaced.
User avatar
wiz
Posts: 749
Joined: Sat Oct 30, 2010 12:23 am

Re: [SOLVED] Cloaking Email Addresses

Post by wiz »

No worries at all.

What are if you created the separate JS file and include it with <script src="path/to/your/file.js></script> since PHP isn't allowed in the editable fields - with or without editor.

You can also paste the JS code to see if there's anyone that can help.
User avatar
mjxl
Posts: 43
Joined: Thu Jan 30, 2020 4:57 am

Re: [SOLVED] Cloaking Email Addresses

Post by mjxl »

Quick pro hack: open your webpage in incognito mode, this way you can be logged in, and view as visitor!

Also JS has (only since recently)

Code: Select all

BLA.replaceAll('DOT', '.')
Both original and replace value can be strings here.

Otherwise you can do this instead

Code: Select all

BLA.replace(/DOT/g, '.')
The G behind DOT RegEx means global, it will replace all of them!

I'll gladly answer JS stuff if needed!
Post Reply