HTTPS requests with XMLHttpRequest [Resolved]

AppLee

Hi everyone,

I have an issue sending HTTPS requests using XMLHttpRequest().
My code works well with non secure connections but I always have an error when sending the request to secure server.

Here is the code I'm using to send a simple JSON request.

  function callRequest(url) {
    var req = new XMLHttpRequest();

    req.open("get", url, true);
    req.setRequestHeader("Content-type", "application/json");
    if (settings.myAuth != "") {
      req.setRequestHeader("Authorization", "Basic "+settings.myAuth)
    }
    req.onreadystatechange = function() {requestItem.onChange(req)}
    req.send();
  } // callRequest()

Is there something I miss in my usage of XMLHttpRequest() or is there another way to address secured API?
I'm trying to improve my app for domoticz and I first thought it was because of self generated certificate, but then I started another app (a client for Slack messenger) and I had the same issue with HTTPS requests.

I'm beginner in QML and Javascript, but I'm advanced developer in QT/C++.
So maybe my question is one of a noob, but I can't figure it out by myself.

Another idea I had was maybe it requires different rights for the app?
I only set "networking" and I added "push-notification-client" for experimenting a bit.

Regards,
Richard

haveaniceday

What happens if you enter the url with HTTPS in the address bar of the web browser? Does it work or are there certificate errors?

Krille

I don't see any problems with your request. So the problem is this line?

req.setRequestHeader("Authorization", "Basic "+settings.myAuth)

Are you sure that it is 'Basic' and not the keyword 'Bearer'?

Ingo

Do you have the exact error message?

flohack

@Krille he said it works unsecured, so I assume the problem is with https, certificate exchange etc but not with authorization.

AppLee

My issue is with any https url. I tried with different kind of URL to identify the source of my problem.

@Ingo I checked the values for req.readyState and req.status, req.readyState=4 as expected and req.status=0 wich is bad news ; I expect 200

@haveaniceday Yes, I tested the url from Slack's API in the web browser and I got my JSON answer as expected.
With domoticz https url I've got an error because the certificate is self validated.
That is not my issue.
So the problem is not between my device and the URL.

With HTTP request : everything goes well, so my code seems fine except if something special has to be done for HTTPS requests ; hence my question here...

@Krille The authentication was not required when I tried HTTPS requests (start small, grow big )

@Flohack Yes, I suspected something like that too, but I don't know how to check or fix anything on this side.

Maybe I have to try another method to send my requests ; I mainly send them to request JSON

I'm noob developing for UT, I don't know if I can debug the code executed on my phone ; I use popups and text items to give me hints

Thanks for your answers, I hope to find and answer and that it could help new developers too!

dobey

Can you please specify the exact error you are receiving, and what URL you are trying to access?

As it stands, everyone has to guess at what you're getting, which makes it quite difficult to provide help. Is the code in question on github/gitlab/etc… somewhere? If others can run the code themselves, it will be easier to provide solutions.

There is nothing special needed to open HTTPS URLs via XMLHttpRequest. As long as the certificate and request are valid, it will work.

BTW, setting Content-Type header on a GET request, is not correct. Also, the way you're setting the Authorization header does not work for either OAuth 1.0 or 2.0.

Ingo

Maybe this code helps debugging the problem with HTTPS?
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/How_to_check_the_secruity_state_of_an_XMLHTTPRequest_over_SSL

readyState=4 while status is still 0 sounds a bit as if the request never was actually made to the server, e.g. something in the handshake went wrong.
Maybe this points in the right direction: https://stackoverflow.com/questions/36416389/why-does-my-xmlhttprequest-have-readystate-4-but-status-0

AppLee

@dobey I don't know how a specific url will change anything, because it does not work with any https...
The first test I did was for this app :
https://gitlab.com/AppsLee/domoticz-ubports

In this case, the certificate is not ok, so I didn't worry much.
Now I'm creating a client for Slack, so I tried with a genuine HTTPS request (I use the same Request.qml as for domoticz, but now I put some debug code)
The url tested is : https://slack.com/api/conversations.history?token=<myToken>&channel=<myChannelId>
I also tested other HTTPS url : https://www.appliancetherapy.com and https://addons.mozilla.org for example, but none worked, but all of them worked with Morph browser.

In each case I got the same answer: status=0 and readyState=DONE
There no other kind of error message, I don't know what you expect.

To trigger the request I use this:

Component.onCompleted: reqFct.getMessages("https://addons.mozilla.org")

The request is sent by:

function getMessages(url) {
  var req = new XMLHttpRequest();
  req.open("get", url, true);
  req.onreadystatechange = function() {requestItem.readMessages(req)}
  req.send();
} // getMessages()

And the readMessages has been reduced to that:

function readMessages(objReq, refresh) {
  if ( objReq.readyState === XMLHttpRequest.DONE ) {
    if (objReq.status == 200) {
      inputMsg.text += "Answer OK\n"
    } else {
      inputMsg.text += "Answer KO "+objReq.status+"\n"
    }
    inputMsg.text += "YY"+objReq.responseText+"XX\n"
    }
  } else {
    inputMsg.text += "NOT DONE yet\n"
  }
} // readMessages()

In inputMsg, I've got:

Answer KO 0
YYXX

I removed the Content-type just to be sure (I added it hoping it might help) but same result.
I tried various example from the net but nothing solved my issue, that's why I thought maybe I need to enable something or send some magic command to enable HTTPS.

@Ingo thanks for the links, I'll read, try and go back here later this weekend.

Ingo

@AppLee said in HTTPS requests with XMLHttpRequest:

There no other kind of error message, I don't know what you expect.

For that I guess you need to add an xhr.onerror callback (or whatever is needed to catch errors of XMLHttpRequest in JavaScript).

dobey

@AppLee said in HTTPS requests with XMLHttpRequest:

In each case I got the same answer: status=0 and readyState=DONE
There no other kind of error message, I don't know what you expect.

This generally means that what happened was a connection to the server was not possible. So you of course will not get the response status code from the server, and instead you need to handle the onerror callback for the XMLHttpRequest object, to get an error. Most common cause there is connecting to a site with cert that couldn't be verified.

AppLee

@dobey and @Ingo

Thank you both, I'm looking into the code @dobey posted to implement the onerror so I can go forward.
I'll give you an update tomorrow after spending some time on this.

AppLee

Hi, I promised a feedback.

My first tests weren't successful, I need to work on how to implement the onerror method to have better understanding of my issue.

Thanks again for your ideas

AppLee

Ok guys, I finally found my mistake, so here is the story.
After too much time spent on this issue, I decided to use the "big gun" to move forward.

So, this weekend I started to create a C++ plugin based on QNetworkAccessManager.
And I did the same error, so I got nothing in return.
Few coding later (after implementing the error management) I had my answer : Host not found !?!

I tried with another HTTPS URI and I got an access denied error...

After a few try I finally understood how stupid I had been.
I forgot to add "networking" in the app apparmor !!!

In fact my many tries and switching from a working app to a WIP app hid the real problem.

But it seems there is a little tricky thing:
When you change apparmor or the app logo, you have to uninstall the app before pushing it again to debug, changes have no effect otherwise...

Many thanks for all the help guys. I'll be more cautious next time

dobey

@AppLee said in HTTPS requests with XMLHttpRequest [Resolved]:

When you change apparmor or the app logo, you have to uninstall the app before pushing it again to debug, changes have no effect otherwise...

There is a known issue, where you need to change the version number whenever you change the apparmor, to cause the profile to be regenerated.

wangqinfeng

谢谢您！解决了我的问题！

advocatux

@wangqinfeng hi, welcome and remember that this Forum is English only

It seems you're saying something like Thank you! Solved my problem! and that's why I didn't remove your post but, please, keep in mind that English requirement