Using HTTPS server with a mobile app

Hi There,

I am doing a project, basically I have a mobile app (for android and ios), which connects through ajax to several webservices that are located in a web server.

Everything is running fine, since I have an HTTP configuration for my web server.

Now, I want to configure my web server as an HTTPS one. As far as I remember, in order to access to an HTTPS server, the client must have a certificate. My question is where and how can I add that certificate to my mobile app, so the execution of he application does not depends if the final user has installed the correct certificate.

If you have any documentation or drop me some ideas that would be great.

Thanks in advance,
Adrian

The client doesn’t need a certificate, only the server does. On the client side you just reference your endpoint with the https. Don’t forget to change your CSP.

Thanks I will check the CSP.

Regards,
Adrian

Good night, I have the same problem. Can I solve it? How do I modify CSP? Sorry for the language

help. I can not establish ajax connection with https.
I have my server with PHP without being able to connect. Thank you

We’re here for AppStudio questions, so we can’t really help with server configuration issues.

Does your php script work if you call it from the Chrome browser URL bar?

What error is returned in the Chrome Console when you do the Ajax() call?

Hello Goodnight. if from the url since Chrome works well it brings me the result.
When running on chrome it works fine, the problem is on android does not connect.

problem is android httpsERROR1 ejemplo del codigo

You need two things… One, you have to set your content security policy or CSP. Your app will not connect to a server using http so without it. Two, your server has to return the header/handshake as the first response. I’m on my iPad right now so I can’t give you code examples but remind me tomorrow and I’ll give you what you need.

Tonny, here’s a pretty good and generic development CSP. This one is setup to use some google code (like google maps) and you’ll have to edit it and change “yourdomain” to whatever your domain is.

<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' filesystem: gap: https://*.yourdomain.com/ https://maps.googleapis.com/; style-src 'self' 'unsafe-inline' https://*.googleapis.com/; font-src 'self' https://fonts.gstatic.com/; script-src 'self' 'unsafe-eval' 'unsafe-inline' https://maps.googleapis.com/; img-src 'self' data: https://*.gstatic.com/ https://*.googleapis.com/; connect-src 'self' https://*.yourdomain.com/ ws://localhost:*; media-src 'self';">

As I mentioned before, on the server side, your scripts need to provide the correct response in the header. For ease I’m including a small .php file that I use to simply return the latest version of my app (for when I or a user checks for upgrades).

As before, you’ll need to change yourdomain.com to your domain. In this case I pass in an appid string as Mob1.0 but you can make this anything you want.

<?php

// latest version
$version = "1.0";

// send the content back
header('Access-Control-Allow-Origin: https://www.yourdomain.com');
header('Content-type: application/json');

// see if whomever is calling is authorized to do so
// in the future this will allow us to support different versions
switch( $_POST['appid'] )
{
  case "Mob1.0":
    $options = Array('status' => "OK", 'version' => $version);
    break;
    
  default:
    // return a failed status to the page
    $options = Array('status' => "FAILED", 'text' => "Unauthorized Access Attempt: " .$_POST['appid']);   
}

// return the results to the client
$output = json_encode($options);
// error_log($output);
echo "$output";       // send it to the browser
?>

Lastly, I make the call using the following jquery ajax:

function checkVersion()
{
  // serviceURL is defined as:
  // var serviceURL = "https://www.yourdomain.com/mobile/";
  $.ajax({
      type: 'POST',
      url: serviceURL + 'serGetVersion.php',
      data: "appid=Mob1.0",
      datatype: 'json',
      timeout: 5000,
      cache: false,
      beforeSend: function() {
  	     //Show spinner
   	     $.mobile.loading('show');
      }                  
  }).done(function(data, textStatus, jqXHR) {
        if(data.status == "OK")
        {
            latestVersion = data.version;
        }
  }).fail(function(xhr, textStatus, error) {
      ajaxError(xhr, textStatus, error, 1041);
  }).always(function(jqXHR, textStatus) {
     $.mobile.loading('hide');  
  });
}

Hi Petree, thank you very much for the code. I do some tests and then I inform you.