Why are images / buttons displayed incorrectly in the XPhone Connect Mobile app?

In this article you will learn how an incorrect display of buttons / images in the XPhone Connect Mobile App occurs.

Problem:

Photos are displayed too large/small or buttons are moved in the mobile app or the compelte design is not funktional after updating the XPhone server.

Cause:

If, for example, the WebApplicationFirewall from Sophos is used as a reverse proxy and the entry URL is hardened accordingly, it can happen that the stylesheet (CSS) is corrupt after an update of the XPhone server.

The stylesheets are provided by the XPhone server and loaded by the app. The stylesheets pass through the firewall.

In some cases, the quotation marks (") were filtered out of the data URLs.

In other cases, it was because the reverse proxy did not respect upper and lower case in the API URLs (keyword case sensitive).

The solutions for both causes are described below.

Solution for the missing quotation marks:

So that the (") in the URL declaration are not filtered out, an exception must also be created which states that HTML is passed through unchanged in the case of URL hardening. Sophos classifies passing URLs in quotation marks as a security risk.

This only refers to the specification of the links, all other quotation marks in the CSS stylesheet are not filtered out.

Solution to consider case sensitive:

The URL calls that we use on the mobile app side are hardcoded in this app - regardless of whether the URL in the server was only stored with lowercase letters, for example.

Example server: https://<customerdomain>/xphoneconnect/mobile/content/css/default.min.css 

is used in the mobile app as follows:

https://<customerdomain>/XPhoneConnect/Mobile/Content/css/default.min.css 

This can only be solved by ensuring that both spellings are passed through unchanged in the reverse proxy.

To test for yourself:

You can check the behavior as follows:

Open the following mobile link from external (and replace <customerdomain>):

https://<customerdomain>/XPhoneConnect/Mobile/Content/css/default.min.css 

You should be able tosee something like the following:

CORRECT (with quotes after the parenthesis - see screenshot):url("data:image/svg+xml

FALSE (quotation mark after the parenthesis is missing):url(data:image/svg+xml

If the quotation marks (") are missing when calling from external, you can check with the following link locally on the XPhone server if the quotation marks (") are present there:

https://localhost/xphoneconnect/mobile/content/css/default.min.css

This way you can determine if the problem is on the XPhone server or in the customer's proxy configuration. If the quotation marks (") are present in the link, this proves that the problem is with the proxy/firewall.