New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to serve Ionic app with https? #1686

Closed
moroshko opened this Issue Jun 27, 2014 · 24 comments

Comments

Projects
None yet
@moroshko
Copy link

moroshko commented Jun 27, 2014

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

This comment has been minimized.

Copy link

c0bra commented Jun 27, 2014

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

This comment has been minimized.

Copy link
Member

perrygovier commented Jun 27, 2014

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

This comment has been minimized.

Copy link

justindmyers commented Jan 17, 2016

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

This comment has been minimized.

Copy link

nicopace commented Jun 6, 2016

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

This comment has been minimized.

Copy link

Quirksmode commented Jul 15, 2016

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

This comment has been minimized.

Copy link

scrivy commented Jul 17, 2016

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

@rainmak33r

This comment has been minimized.

Copy link

rainmak33r commented Jan 18, 2017

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

@niczak

This comment has been minimized.

Copy link

niczak commented Jun 15, 2017

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

This comment has been minimized.

Copy link
Member

perrygovier commented Jun 16, 2017

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

This comment has been minimized.

Copy link

niczak commented Jun 16, 2017

@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

This comment has been minimized.

Copy link

niczak commented Jun 17, 2017

@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

This comment has been minimized.

Copy link
Member

perrygovier commented Jun 19, 2017

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

This comment has been minimized.

Copy link

ronaiza-cardoso commented Jul 21, 2017

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

This comment has been minimized.

Copy link

Qvatra commented Aug 18, 2017

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

@niczak

This comment has been minimized.

Copy link

niczak commented Aug 18, 2017

@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

This comment has been minimized.

Copy link

Qvatra commented Aug 18, 2017

@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

This comment has been minimized.

Copy link

gx200918 commented Dec 18, 2017

@Qvatra , any news on it?

@CristhianUNSa

This comment has been minimized.

Copy link

CristhianUNSa commented Dec 30, 2017

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

This comment has been minimized.

Copy link

miqmago commented Mar 15, 2018

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

This comment has been minimized.

Copy link

valmayaki commented May 16, 2018

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

This comment has been minimized.

Copy link

Domvel commented Jun 19, 2018

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

@XMalatji

This comment has been minimized.

Copy link

XMalatji commented Jul 3, 2018

Still no Ionic support. Had to self generate.

@redplane

This comment has been minimized.

Copy link

redplane commented Aug 27, 2018

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

@ionitron-bot

This comment has been minimized.

Copy link

ionitron-bot bot commented Sep 26, 2018

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Sep 26, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.