How to serve Ionic app with https?

[moroshko]

Running ionic serve allows to run the app on http://0.0.0.0:8100.

Trying to access https://0.0.0.0:8100 results in:

SSL connection error

Is there a way to run the app on https?

The reason I need https is because I use Firebase and it requires requests to be made over https. See: http://stackoverflow.com/q/24431924/247243 http://stackoverflow.com/q/24442013/247243

Any ideas?

[c0bra]

You could use http-proxy and connect to create a couple https proxy servers, one of which rewrites the livereload port. Just point your browser to https://localhost:8101 instead of 8100.

var fs = require('fs');
var util = require('util');
var httpProxy = require('http-proxy');
var https = require('https');
var connect = require('connect');

// Create a connect app that can transform the response
var app = connect();
app.use(function (req, res, next) {
    if (req.url === '/') {
      util.puts("Transforming response");

      var _write = res.write;

      // Rewrite the livereload port with our secure one
      res.write = function (data) {
        _write.call(res, data.toString().replace('35729', '35700'), 'utf8');
      }
    }

    proxy.web(req, res);
  }
);

// Proxy fpr connect server to use
var proxy = httpProxy.createServer({
  target: {
    host: 'localhost',
    port: 8100
  }
});

// Live reload proxy server
httpProxy.createServer({
  target: {
    host: 'localhost',
    port: 35729
  },
  ws: true,
  ssl: {
    key: fs.readFileSync('server.key', 'utf8'),
    cert: fs.readFileSync('server.crt', 'utf8')
  }
}).listen(35700);

// Create the https server
https.createServer({
  key: fs.readFileSync('server.key', 'utf8'),
  cert: fs.readFileSync('server.crt', 'utf8')
}, app).listen(8101);

util.puts('http proxy server started on port 8101');

[perrygovier]

Hey @moroshko, what platform are you on? Your situation requires creating an SSL certificate, a self signed cert should be fine. Once you have one of those set up the solution @c0bra mentioned looks like it will work. If you're on mac, MAMP Pro makes setting up a virtual host with SSL pretty easy as well. On linux, there's no shortage of tutorials for getting Apache or Nginx set up.

Closing since it's not really an issue with Ionic, but lets keep the discussion going.

[justindmyers]

Sorry to jump back on this, but I spent a while trying to get this to work as well. Seeing as this thread comes up quite high on search results, the above solution didn't quite work for me as getting the SSL certificate working was a problem.

The only article that I found that successfully walked me through the solution was https://matoski.com/article/node-express-generate-ssl/

I combined both to finally get it working with this as the final setup: https://gist.github.com/justindmyers/266d169e97de20068f78

[nicopace]

Hi guys, This is important because when you are developing a mobile app that uses any html5 feature (geolocation, rotation,..) chrome now requires it to be used from a secured location.

[Quirksmode]

Agreed, any simple solution for this, I am using Ionics built in server (ionic serve), where do I need to go to make the changes needed for https?

[scrivy]

to create a self signed cert and run it with a go proxy script https://gist.github.com/scrivy/0909468fde8f117a3d66507c8bb3fe12

[rainmak33r]

Any idea how to make this working on an actual app ?

[niczak]

Any movement on this item in the last 6 months? I am working w/ the Twilio API and again everything must be under HTTPS as opposed to HTTP.

[perrygovier]

heyo, sorry I don't have a silky smooth ionic solution, but I find that you can use ionic serve and then an ngrok proxy to get things behind https. it's not ideal, but it should work.

[niczak]

@perrygovier Hey buddy, long time no talk! :)

Do you happen to have a guide for using ngrok locally for this purpose? Would be a huge help right now...

[niczak]

@perrygovier I think I am all set, thanks for the suggestion! I will be doing a ton of testing on Monday but the setup I have no looks very promising.

[perrygovier]

Awesome. You might have trouble with the proxy and a corporate firewall, but just ngrok http 8100 should give you an https URL you can hit.

[ronaiza-cardoso]

Hi, I made the HTTPS server, but where do I need to go to make the changes needed for using ionic serve with HTTPS?

[Qvatra]

any update on how to configure ionic to use https for serve?

[niczak]

@Qvatra I used https://ngrok.com - point it at your ionic serve URL and then use the HTTPS ngrok URL to do your stuff that requires HTTPS such as API calls, WebRTC, etc.

[Qvatra]

@niczak, would it be a problem when app would be deployed on a mobile device? at that point I would not be able to run ngrok to make it serve in secure way...

To give the context I'll explain what i'm doing in my app: 1) I’m sending authentication request from my app to SSL server using ionic proxy. 2) Server response contains sessionId in secure cookie. 3) I’m sending another request that suppose to have this sessionId in requestHeader cookie.

In reality the last request doesn’t have sessionId in requestHeader cookie and that's why I get 401 ‘Unauthorized’. When I look at responseHeader cookie of the first request I see the following: set-cookie:PHPSESSID=5583u6dcq803qlm5mnnc79vua4i0hs10htoj1mavskhv0bdg8m31; path=/; secure; HttpOnly

My idea is to make it somehow run in secure mode so that this secure cookie would be passed through. But don't know how..

[gx200918]

@Qvatra , any news on it?

[cristhian-net]

How to configure ionic cordova run android to point to my https ngrok address? I tried ionic cordova run android -l -c --address "https://urlto.ngrok.io", but then an error appeared. "[ERROR] app-scripts serve unexpectedly failed.settings: undefinedcontext: [object Object]"

[miqmago]

That's working fine: https://stackoverflow.com/a/43426714/513570:

You need to create a port-forwarding in chrome://inspect/#devices:

Port: 8101 Forward: localhost:8100

Enable port-forwarding.

On the mobile device visit localhost:8101 Notice: localhost on mobile device and port 8101.

[valmayaki]

In case any one is experiencing such issue, you can use Chrome port forwarding to forward 8103 on the device to localhost:8100 on your PC as well as as the livereload port 35729:localhost:35726 with the debugger port 53703:localhost:53703 and then you can visit in your phone browser localhost:8103 to view app after ionic serve -c. You can also use this in ionic Dev app by manually adding the url

[Domvel]

Any status update? Webpack should support https. Why is this not yet implemented for ionic livereload?

[XMalatji]

Still no Ionic support. Had to self generate.

[redplane]

I have the same question for ionic 3 . So frustrating.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.