[4.0] email cloaking without inline script #19089

dgrammatiko · 2017-12-16T14:27:56Z

Pull Request for Issue # .
This PR is part of the series of PRs that try to eliminate the inline scripts from Joomla. (The reason is CSP, please watch @wilsonge 's video from JWC17...)

Summary of Changes

We are using custom elements to keep this as simple as possible
The B/C break should be minimal (only if devs were using the internals of the plugin or the JHTML lib), I hope this is ok

Testing Instructions

Edit an article and add email: something@somewhere.com
Navigate to the article and check if the email is visible.
Disable javascript and reload the page (email shouldn't be visible)
Go to Admin->plugins->Content - Email Cloaking and change the option Mode then revisit the article, the email shouldn't be a link

Set the editor to codemirror and edit the article popular articles from the sample data.
Replace the contents of the article with:

<p>Test</p>
toto@toto.com

<p>Another</p>
<a href="mailto:toto@toto.com?subject=Mysubject" class="myclass" >email</a>

<p>Another</p>
<a href="http://mce_host/ourdirectory/email@example.org">anytext</a>

<p>Another</p>
<p><a href="mailto:joe@nowhere.com"><span style="font-style: 8pt;">Joe_fontsize8</span></a></p>

<p>Another</p>
<p><a href="mailto:joe@nowhere13.com?subject= A text"><span style="font-size: 14pt;">Joe_subject_ fontsize13</span></a></p>

<p>Another</p>
<p><a href="mailto:joe@nowhere.com"><strong>something</strong></a></p>

<p>Another</p>
<p><a href="mailto:joe@nowhere.com"><strong>mymail@mysite.com</strong></a></p>

<p>Another</p>
<p><a href="mailto:joe@nowhere.com"><strong><span style="font-size: 14px;">mymail@mysite.com</span></strong></a></p>

<p>Another</p>
<p><a href="mailto:joe@nowhere.com"><strong><span style="font-size: 14px;">Joe Nobody</span></strong></a></p>

<p>Another</p>
<p><a href="mailto:joe@nowhere.com?subject= A text"><strong><span style="font-size: 16px;">joe@nowhere.com</span></strong></a></p>

<p>Another</p>
<p><a href="mailto:joe@nowhere.com?subject=Text"><img src="/images/joomla_black.png" alt=""/>joe@nowhere.com</a></p>

<p>Another</p>
<a href="http://mce_host/ourdirectory/email@example.org">email@example.org</a>

<p>Another</p>
<p><a href="mailto:joe@nowhere.com?subject= A text" class="class1 class2"><strong><span style="font-size: 16px;">joe@nowhere.com</span></strong></a></p>

<p>Another</p>
<p><a href="mailto:joe@nowhere13.com?subject= A text" class="class 1 class 2"><span style="font-size: 14pt;">Joe_subject_ fontsize13</span></a></p>

<p>Another</p>
<a href="mailto:toto@toto.com" class="myclass" >toto@toto.com</a>

<p>Another</p>
<a href="mailto:toto@toto.com" class="myclass" >Click Here</a>

<p> More Tests </p>
<p><a href="mailto:demo@demo.com"><span style="color: red;">Contattare l'associazione</span></a></p>
<div class="contact email"> </div>
<p><a href="mailto:demo@demo.com"><strong>Contattare l'associazione</strong></a></p>
<div class="contact email"> </div>
<div class="contact email"> </div>
<div class="contact email"> </div>
<div class="contact email"> ---------------------------------------</div>
<div class="contact email"><a href="mailto:info@testsite.com"><img style="margin: 0px 3px 0px 0px; float: left; width: 21px; height: 21px;" title="A nice title" src="images/powered_by.png" alt="A nice title" width="21" height="21" />info@testsite.com</a></div>
<div class="contact email"> </div>

<div class="contact email"><a href="mailto:info@testsite.com"><img src="images/powered_by.png" alt="" />info@testsite.com</a></div>
<div class="contact email"> </div>
<div><p>texte apres image</p></div>
<div class="contact email"><a href="mailto:info@testsite.com"><img style="margin: 0px 3px 0px 0px; float: left; width: 21px; height: 21px;" title="A nice title" src="images/powered_by.png" alt="A nice title" width="21" height="21" />texte'apresimage</a></div>

<div class="contact email"><a href="mailto:info@testsite.com?subject= A text"><img style="margin: 0px 3px 0px 0px; float: left; width: 21px; height: 21px;" title="A nice title" src="images/powered_by.png" alt="A nice title" width="21" height="21" />texte'apresimage+ sujet</a></div>
<div>
<p>Testing with &lt;span something&gt;some text&lt;/span&gt;</p>
<p><a href="mailto:joe@nowhere.com"><span style="font-size: 18pt;">Joe_fontsize18</span></a></p>
<p><a href="mailto:joe@nowhere13.com?subject= A text"><span style="font-size: 14pt;">Joe'_subject_ fontsize13</span></a></p>
<p>Testing with &lt;span something&gt;email_adress&lt;/span&gt;</p>
<p><a href="mailto:joe@nowhere14.com"><span style="font-style: 14pt;">joe@nowhere14.com</span></a></p>
<p>Testing with (+subject)&lt;span something&gt;email_adress&lt;/span&gt;</p>
<p><a href="mailto:joe@nowhere16.com?subject= A text"><span style="font-size: 16pt;">joe@nowhere16.com</span></a></p>
<p><a href="mailto:joe@nowhere.com"><span style="color: red;">joe@nowhere.com</span></a></p>
<p>Uniquement strong</p>
<p><a href="mailto:joe@nowhere.com"><strong>something</strong></a></p>
<p>Uniquement strong avec subject et mail</p>
<p><a href="mailto:joe@nowhere.com?subject= A text"><strong>joe@nowhere.com</strong></a></p>
<p>strong+spansomething+text</p>
<p><a href="mailto:joe@nobody.com"><strong><span style="font-size: 9px;">Joe' Nobody</span></strong></a></p>
<p>strong+spansomething+mail</p>
<p><a href="mailto:joe@nobody.com"><strong><span style="font-size: 14px;">mymail@mysite.com</span></strong></a></p>
</div>
  

<div> Test plus sign</div>
test@example.com
test+test@example.com
test+@example.com
+test@example.com

Check in the front end that article, with and without javascript enabled!

Expected result

All the possible cases as described in the tests:

Actual result

Documentation Changes Required

Yes

C-Lodder · 2017-12-16T14:41:24Z

Seems good to me. Looking forward to the event listener for Ajax rendered content as I rely on this myself.

dgrammatiko · 2017-12-16T14:49:26Z

@C-Lodder check @Fedik 's comment: #18843 (comment)
I was thinking about something similar

dgrammatiko · 2017-12-16T19:38:20Z

@C-Lodder can you test this one against some ajax created email addresses?
I just moved the code to custom elements so there is no need for an update event, browsers will sort this automatically. There is another thing tho the ajax needs to update the Joomla storage with the new values...

dgrammatiko · 2017-12-16T20:39:44Z

Can someone from the Security Team confirm if simple encoding is ok here or if we need a stronger key-value approach?
Calling @yvesh @SniperSister @mbabker @wilsonge @nibra

dgrammatiko · 2017-12-16T21:12:52Z

Here is what the bots will see:

This is after the js has been executed:

Good part: ajax inserted content will work without any extra line of code (use the platform for the win)

C-Lodder · 2017-12-16T22:15:01Z

Sure, I'll test this tomorrow

Bakual · 2017-12-16T22:22:20Z

Just wondering: Does it even make sense to cloak emails? Afaik Google runs JavaScript when they index the sites, so they will index the email addresses as well.
I guess spam bots in 2017 are running JS as well, but that's guessing without having any clue myself 😄
Does anyone know?

dgrammatiko · 2017-12-16T22:33:49Z

@Bakual thats true 😂
But we can still keep it hidden. Since now there is a custom element we can add a click event listener and on click will redirect to the mail app (href=“mailto:a@b.c). This way the dom never gets the actual email printed. And actually that’s the best we can do, but as you said this might already been outdated (you can have a bot with codeception that will beat the above scenario). Anyways people feel secure with such things although all these are security through obscurity, in other words crap

SniperSister · 2017-12-17T07:39:01Z

Looks good to me

rdeutz · 2017-12-17T08:38:07Z

please fix code style issues

Fedik · 2017-12-17T09:14:32Z

I guess spam bots in 2017 are running JS as well

I think only a complex bots,
there still a lot of old and simple, most of them a dumb, like file_get_contents('http://blabla.com')

C-Lodder · 2017-12-17T10:50:45Z

build/webcomponents/js/hidden-mail/hidden-mail.js

@@ -0,0 +1,43 @@
+(() => {
+	class JoomlaHiddenMail extends HTMLElement {


Maybe a bit OCD of me but could we change the class to JoomlaCloakEmail or JoomlaEmailCloak? Apart from being better wording, it ties in more with the PlgContentEmailcloak PHP class

I think @C-Lodder has a good point,
it will be more clear, "where the thing are come from" 😉
JHtmlEmailCloak and JoomlaEmailCloak

Yup, makes sense, I will change it

C-Lodder · 2017-12-17T10:51:18Z

build/webcomponents/js/hidden-mail/hidden-mail.js

+				newEl.setAttribute('href', 'mailto:' + window.atob(this.getAttribute('first')) + '@' + window.atob(this.getAttribute('last')));
+
+				// Get all of the original element attributes, and pass them to the link
+				for(var i = 0, l = this.attributes.length; i < l; ++i){


for (...) { (spacing)

C-Lodder · 2017-12-17T10:52:39Z

media/system/webcomponents/js/joomla-hidden-mail.js

+				newEl.setAttribute('href', 'mailto:' + window.atob(this.getAttribute('first')) + '@' + window.atob(this.getAttribute('last')));
+
+				// Get all of the original element attributes, and pass them to the link
+				for(var i = 0, l = this.attributes.length; i < l; ++i){


for (...) { (spacing)

dgrammatiko · 2017-12-30T21:58:31Z

@C-Lodder did you manage to try this one?

C-Lodder · 2017-12-30T23:30:32Z

Ah crap, will test now

C-Lodder · 2017-12-31T10:42:25Z

Tested and seem to work perfectly with content rendered via Ajax

C-Lodder · 2017-12-31T10:56:32Z

I have tested this item ✅ successfully on d6f2d72

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/19089.}

rdeutz · 2017-12-31T11:08:59Z

please fix the CS issues and don't comment code just remove it

dgrammatiko · 2018-02-06T23:28:18Z

@C-Lodder can you test this with the sample data I put in the description?

infograf768 · 2018-02-08T08:30:03Z

Here are the tests to do:
Test

<p>UTF8 mail<a href="mailto:joomlatest@xn----7sblgc4ag8bhcd.xn--p1ai"> joomlatest@джумла-тест.рф</a></p>

gives

Inspector displays address and wrong encoding for utf8

And on image

<p><a href="mailto:joomlatest@xn----7sblgc4ag8bhcd.xn--p1ai" rel="alternate"><img src="images/powered_by.png" alt="" /></a></p>

displays nothing
Inspector source

and with your example with image above
I also do not get the image

Note: I do see the images correctly when editing the article in front or back-end. Therefore it may not be related.

infograf768 · 2018-02-08T08:36:15Z

Correction: I understand these screenshots do not really show source as they are picked from Web Developper Inspector.

In source, the mail adress is obsfucated as should.
So the issues remaining are UTF8 display and Image display

infograf768 · 2018-02-08T09:14:38Z

Concerning the image, I'm afraid it is a Routing issue due to your PR... The article is displayed in a blog menu item.

An image not concerned by the email cloak displays OK.

dgrammatiko · 2018-02-08T09:40:26Z

@infograf768 I knew you'll find some bugs here that's the reason I've asked you test! Thanks, will patch things in a bit

dgrammatiko · 2018-02-08T12:02:05Z

@infograf768 now should be ok, both failing cases:

infograf768 · 2018-02-08T15:47:34Z

UTF8 display is corrected but not the path to image when we call it from a blog

infograf768 · 2018-02-08T15:50:04Z

Also, when there is a UTF8 subject, it is still garble.

infograf768 · 2018-02-09T06:20:44Z

I have tested this item ✅ successfully on 385af9c

Ok now :)

Question: any way to also add test for utf8 mails ?

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/19089.}

ghost · 2018-02-09T06:26:04Z

@Fedik or @C-Lodder an you please retest?

dgrammatiko · 2018-02-09T08:14:13Z

Php tests or js tests?

infograf768 · 2018-02-09T08:17:33Z

Php tests or js tests?

No idea. Something in PlgContentEmailcloakTest.php I guess.

dgrammatiko · 2018-02-09T12:15:51Z

@infograf768 added two more tests for UTF-8, all tests pass now

Fedik · 2018-02-10T11:03:41Z

I have tested this item ✅ successfully on 5ec825e

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/19089.}

ghost · 2018-02-10T13:16:01Z

@infograf768 can you please retest?

dgrammatiko · 2018-02-10T13:17:36Z

@franz-wohlkoenig he doesn't have to, the last commit was to fix the tests, didn't touch the rest of the code 😏

ghost · 2018-02-10T14:33:09Z

Ready to Commit after two successful tests.

infograf768 · 2018-02-11T07:55:18Z

@dgt41 Thanks!

zero-24 · 2018-04-01T21:00:46Z

@wilsonge why did you merge this with drone / unit tests failing? All Joomla 4 PR's are now failing.

@dgt41 The error looks like to come from this line https://github.com/joomla/joomla-cms/pull/19089/files#diff-a5e4a8ab7a94472482aa9109f381223fR61 as HTMLHelper::_('webcomponent' expects an string and not a array. Here is a PR but please take a look into that too: #20053

joomla-cms-bot added the PR-4.0-dev label Dec 16, 2017

C-Lodder reviewed Dec 17, 2017

View reviewed changes

dgrammatiko added 7 commits February 6, 2018 22:53

cloak-init

08c3f50

Let’s move to custom elements here

c1c9d46

scratch Joomla storage, use simple encoding

03ac32e

more

48ae840

cs

7bedf06

upd

bb7d599

CS

d077183

dgrammatiko added 2 commits February 7, 2018 09:23

CS

f10ef78

unit tests

780477f

Fix failing cases

ec6f0a2

dgrammatiko added 2 commits February 8, 2018 13:22

escape is deprecated, let’s not use it then

1a1551b

let’s have media folder also for local images

c4cef26

dgrammatiko added 2 commits February 8, 2018 17:02

fix was not good

984c0ac

one slash missing

385af9c

fix tests

5ec825e

joomla-cms-bot added the RTC This Pull Request is Ready To Commit label Feb 10, 2018

brianteeman added this to the Joomla 4.0 milestone Feb 22, 2018

Merge branch '4.0-dev' into §4.0-dev-email-cloaking

ca16389

wilsonge merged commit 889d6aa into joomla:4.0-dev Apr 1, 2018

joomla-cms-bot removed the RTC This Pull Request is Ready To Commit label Apr 1, 2018

zero-24 mentioned this pull request Apr 1, 2018

[4.0] Email cloak unittests are failing on 4.0 #20054

Closed

		@@ -0,0 +1,43 @@
		(() => {
		class JoomlaHiddenMail extends HTMLElement {

[4.0] email cloaking without inline script #19089

[4.0] email cloaking without inline script #19089

Conversation

dgrammatiko commented Dec 16, 2017 • edited by joomla-cms-bot

Summary of Changes

Testing Instructions

Expected result

Actual result

Documentation Changes Required

C-Lodder commented Dec 16, 2017

dgrammatiko commented Dec 16, 2017

dgrammatiko commented Dec 16, 2017

dgrammatiko commented Dec 16, 2017

dgrammatiko commented Dec 16, 2017

C-Lodder commented Dec 16, 2017

Bakual commented Dec 16, 2017

dgrammatiko commented Dec 16, 2017

SniperSister commented Dec 17, 2017

rdeutz commented Dec 17, 2017

Fedik commented Dec 17, 2017

C-Lodder Dec 17, 2017

Choose a reason for hiding this comment

Fedik Dec 17, 2017

Choose a reason for hiding this comment

dgrammatiko Dec 17, 2017

Choose a reason for hiding this comment

C-Lodder Dec 17, 2017 • edited

Choose a reason for hiding this comment

C-Lodder Dec 17, 2017

Choose a reason for hiding this comment

dgrammatiko commented Dec 30, 2017

C-Lodder commented Dec 30, 2017

C-Lodder commented Dec 31, 2017

C-Lodder commented Dec 31, 2017

rdeutz commented Dec 31, 2017

dgrammatiko commented Feb 6, 2018

infograf768 commented Feb 8, 2018 • edited

infograf768 commented Feb 8, 2018

infograf768 commented Feb 8, 2018 • edited

dgrammatiko commented Feb 8, 2018

dgrammatiko commented Feb 8, 2018

infograf768 commented Feb 8, 2018

infograf768 commented Feb 8, 2018 • edited

infograf768 commented Feb 9, 2018

ghost commented Feb 9, 2018 • edited by ghost

dgrammatiko commented Feb 9, 2018

infograf768 commented Feb 9, 2018

dgrammatiko commented Feb 9, 2018

Fedik commented Feb 10, 2018

ghost commented Feb 10, 2018

dgrammatiko commented Feb 10, 2018

ghost commented Feb 10, 2018

infograf768 commented Feb 11, 2018

zero-24 commented Apr 1, 2018

dgrammatiko commented Dec 16, 2017 •

edited by joomla-cms-bot

C-Lodder Dec 17, 2017 •

edited

infograf768 commented Feb 8, 2018 •

edited

infograf768 commented Feb 8, 2018 •

edited

infograf768 commented Feb 8, 2018 •

edited

ghost commented Feb 9, 2018 •

edited by ghost