mockEngine does not work with Globaleaks v5.0.11

[aetdr]

What version of GlobaLeaks are you using?

v5.0.11

What browser(s) are you seeing the problem on?

Chrome

What operating system(s) are you seeing the problem on?

Windows

Describe the issue

Hi @evilaliv3

I have just upgraded from v4.15.4 to v5.0.11
Since the upgrade, all the mocks do not work.

There are no errors in the browser console.
The mocks are still defined fine and I can see them by executing "GL.mockEngine.mocks;" in the console.

I suspect recent changes to angular to cause the issue.

Proposed solution

No response

[evilaliv3]

Hello @aetdr ,

actually this is not really a bug but an expected situation where we are trying to support the community.
You can type here some debugging information or reach us on slack and we could try to support you.

Basically updteing from AngularJS to Angular and from Boostrap 4 to 5 even if we maintained full general retrocompatibility, all depends on your javascript and your CSS files; I you use variables names that do not exist anymore (e.g. old angularjs functions or old boostrap css ID and classess) the mocks wont activate properly.

[aetdr]

Hi @evilaliv3

If I understand it correctly than the mocksEngine still function but GL.mockEngine.mocks is not used.

It is nothing advanced, I just followed the guidance I recieved earlier with couple of javascript functions:

GL.mockEngine.addMock("*", "#Identifier", function(elem) {
    elem.innerHTML = '<h3>Text</h3>';
 } 

There is no error in browser console, and I can se that GL.mockEngine.mocks variable is populated.
What has to be changed to make it work?

[aetdr]

Hi @evilaliv3

Apperently, mocks get triggered and work fine at those places where complete page gets loaded (with HTML and so on)
Many places, the navigation (click on links and buttons) trigger only API calls without refreshing UI. There the mocks do not get triggered.

Example 1 (whistleblower form submission): 
#ReceiptText does not get changed (used to work before)

Example 2 (user logon)
#UserWelcomeMessage gets updated at first logon (HTML refreshed).
Subsequential navigation to the page by using "Home" navigation menu link, resets the change.

Is it possible to trigger mocks after certaing API calls? It used to work before.

[evilaliv3]

Thank you. This is probably related to the mocks implementation that could miss some of the previos capabilities and is not listening for these situations.

@msmannan00: would you please give it a look at this?

[msmannan00]

Yes will look into it

[evilaliv3]

@aetdr is it possible for you to load here the code that we could use to reproduce the situation?

[aetdr]

Hi @evilaliv3 and @msmannan00

This one will get called and the change is shown when recipient logs in as full HTML is retrieved.
But if you navigate to the same page by using left-hand menu item "Home", the change get overwritten by the default text.

GL.mockEngine.addMock('*', '#UserWelcomeMessage', function(elem) {

  elem.innerHTML = '<div>Changed #UserWelcomeMessage</div>';

});

This one will never get called.
Should be triggered when the whistleblower has been trough the submission steps and has arrived at the confirmation page.

GL.mockEngine.addMock("*", "#ReceiptText", function(elem) {

  elem.innerHTML = '<div>Changed #ReceiptText</div>';
});

There is a single non-related issue, probably caused by switching from angularjs to angular.
We try to emhasize the onion link and need a way to read the public.node.onionservice value from custom javascript.
The following used to work before:

var scope = angular.element(document.body).injector().get("$rootScope");
var tor_onion = '<span class="onionaddress">' + scope.public.node.onionservice + '</span>';

The solutions I found using Google do not work, as the angular object is undefinded.
Could you point me in rigt direction here? How to achieve this with Angular?

[aetdr]

@evilaliv3 @msmannan00

I can not move further with updating Globaleaks before this is solved.
Do you have an estimate when the fix will get implemented?

[msmannan00]

Hi, we tried to reproduce the issue and worked fine on our test deployment, if you don't mind can you please share your complete js file so we can reproduce the exact environment, there might be a difference in how the file is loaded, would not take that much long when we reproduce the issue

[aetdr]

He @msmannan00

I can not share the original file. I have just done the following:

• created whole new tenant(site) with default Globaleaks settings (no customizations), v 5.0.11
• added test users and added custom script file with following exact content (as posted before):
• mocks do not work, even not the case when user logs in
• tested in brave, edge and firefox

GL.mockEngine.addMock('*', '#UserWelcomeMessage', function(elem) {

  elem.innerHTML = '<div>Changed UserWelcomeMessage</div>';

});


GL.mockEngine.addMock("*", "#ReceiptText", function(elem) {

  elem.innerHTML = '<div>Changed ReceiptText</div>';
});

are you able to make this file work with v 5.0.11?

[aetdr]

@msmannan00

Just tried it on your demo platform https://test511.try.globaleaks.org/
It does not work

[msmannan00]

Hi not an issue just give me an hour to reproduce it on the dev version and share the working script with you. I have almost pin pointed it would fix it don't worry

[msmannan00]

Thanks for reporting, the issue has been pointed out, during the angular update mock trigger implementation on dom changes were missed, it has been implemented and fix would be released in a day or two

[aetdr]

Thank you @msmannan00

Can you please point me in right direction regarding this question.
I can create new thread if it is neccessary.

There is a single non-related issue, probably caused by switching from angularjs to angular.
We try to emhasize the onion link and need a way to read the public.node.onionservice value from custom javascript.
The following used to work before:

var scope = angular.element(document.body).injector().get("$rootScope");
var tor_onion = '<span class="onionaddress">' + scope.public.node.onionservice + '</span>';

The solutions I found using Google do not work, as the angular object is undefinded.
Could you point me in rigt direction here? How to achieve this with Angular?

[msmannan00]

please do create a seperate ticket, I would also take a look into it

[aetdr]

Thanks @msmannan00

I have created separate thread here: #4231

[msmannan00]

changes have been made, fix would be released in next version soon, thanks for reporting

[aetdr]

Hi @msmannan00

I have tested it and everything works fine. Thank you.
One thing I have noticed is that the mocked element constantly refreshes after the page is rendered, every second or so.
If I look at the source with element selector (F12), the mocked element is flashing and it is not possible to expand it as it constantly gets overwritten.

It is not a problem, was just wondering if this is by design?

[msmannan00]

Yes at the moment it's a small limitation but we are working to optimize it