WebSocket over insecure connection error when using HTTPS

[TheDcoder]

Describe the bug
Tracking doesn't work with an HTTPS end-point server, this message is displayed whenever the app is opened after the first initial login:

Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.

To Reproduce
Steps to reproduce the behavior:

1. Set the server URL to an https:// location
2. Login
3. Restart the app
4. See error

Expected behavior
No error

Smartphone (please complete the following information):

• Device: ASUS
• OS: Android 11
• Browser: Firefox (Fennec) Android System WebView
• Version: 100.1.3 96

Additional context
This might be a security issue specific to mobiles with Firefox set as the default browser. Somehow the app or website is trying to connect with HTTP even when the page is loaded via HTTPS.

This issue does not happen when the website is directly used from Firefox.

[tananaev]

Do you have a URL to try? Are you sure you configured your HTTPS proxy correctly?

[TheDcoder]

Do you have a URL to try?

I used the default demo server, but changed http to https 😄

Are you sure you configured your HTTPS proxy correctly?

I am not using a proxy.

[tananaev]

Just tested Firefox 100.0.2 (latest stable release) with demo and no issues.

[TheDcoder]

Did you set it as your default WebView implementation? The issue only happens in the app, not in the browser itself.

[tananaev]

No, haven't tried. Seems like an issue with your setup if it works in the browser.

[TheDcoder]

That's the issue, I can't control the setup inside the Manager app 😄

Something is causing the connection to be made via insecure protocol and it's (rightly) being blocked by Firefox due to security concerns.

[tananaev]

Have you tried the default Chrome-based WebView?

[TheDcoder]

Unfortunately I don't have that on my phone as I use a custom distribution (ROM) of Android.

So far I have not experienced any WebView issues with any of the other apps I use, so I think it's just some simple bug that we need to find and squish!

I'm willing to help with debugging the issue, is there a way to get access to the browser console of the WebView inside the app?

[tananaev]

With the standard Chrome WebView you can access developer tools in the debug mode. Not sure about custom WebView.

[TheDcoder]

I see, sounds tricky...

Am I correct to assume that the manager app is just a shell for the remote website? If yes, then we can debug the website directly and review the code responsible for making the WebSocket.

[tananaev]

I already reviewed the code. Here's the relevant part:

https://github.com/traccar/traccar-web/blob/master/web/app/controller/Root.js#L245

[TheDcoder]

It's hard to go wrong with that code.

Can I deploy a local server with modified code to test it out? Perhaps we can catch this specific exception and modify the logic to try again with wss in that case.

Which parts do I have to install in the backend to do this?

[tananaev]

How would a local server help? All this code is run on the client, not server.

[TheDcoder]

I want a local server so that I can serve my modified JavaScript code and test it with the manager app.

P.S I know web development and JavaScript :)

[tananaev]

We have documentation on how to run it locally.