ionic-cli
ionic-cli copied to clipboard
HTTPS support for `ionic serve` and Cordova livereload (--ssl)
Known issues:
- ~HTTPS support in DevApp: https://github.com/ionic-team/ionic-cli/issues/3748~
- iOS wkwebview doesn't accept self-signed certificates: https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/224
GPS wont work outside of safe env. aka: https.
Any solutions for this ? I'm having the same issue with ionic cordova run browser --livereload
@redplane That command (and the Cordova browser platform) isn't fully supported. See https://github.com/ionic-team/ionic-cli/issues/3043. The solution is forthcoming and this issue will be updated when it arrives.
Will it be for ionic-3 or ionic 4? Im having a project on ionic 3.9.2, a little big that Im afraid of changing
No plans to add HTTPS to @ionic/app-scripts
for Ionic 3.
Updates?
Hi any update on this? I'm struggling to get the Geo-location to work on the Ionic Dev App with HTTP so to be able to serve over HTTPS would be great assuming that would fix the issue.
CLI 4.4.0 is out with an --ssl
flag:
ionic serve --ssl
There are a few gotchas, which I've documented in the original issue description: https://github.com/ionic-team/ionic-cli/issues/3305#issue-332072032
So now livereload should work in https with --ssl ?
@sebast1219 ionic cordova run
with --ssl
will work, but it seems the iOS wkwebview doesn't accept self-signed certificates. So, it should work with Android.
The --ssl
flag is an experimental feature (and is marked as such in ionic serve --help
), we expect issues.
@dwieeb
Thanks for this feature, I wanted to try this out and therefor updated to ionic 4.4.0. I can see (and use) ionic ssl
commands, but no ionic serve
with --ssl
flag when performing ionic serve --help
.
Using ionic serve --ssl
works so far, but still in http mode, so the ssl flag is not acknowledged. Do I need to update something else?
@phal0r Likely, you are not using Ionic 4. This feature depends on the Angular CLI, which is not used in Ionic 3. See https://github.com/ionic-team/ionic-cli/issues/3305#issuecomment-416695886
Can someone clarify something for me as a similar issue to mine was marked as duplicate and pointed here but this thread doesn't seem to address it.
If I generate a certificate:
ionic ssl generate
And then run project:
ionic serve --ssl
Then it does not use the certificate that has been generated. It generates a new certificate on the fly. This makes it impossible to run dev app in https as I can't add the certificate being used to the trusted root store as it ignores the generated cert and makes a new one on each run. The angular webserver won't allow calls from https frontend to https api if certificate isn't trusted.
This is same issue with angular but angular allows you to specify the path of cert when you give serve command. We are working on http as a workaround but the fact that there is a generate ssl command is confusing as it's not being used.
Can someone confirm for me Ionic doesn't have this functionality or if I am encountering a bug of some sort.
Thanks
@GuerrillaCoder You can pass arguments to the Angular CLI in ionic serve
with a separator, like so:
ionic serve --ssl -- --ssl-cert ./path/to/file --ssl-key ./path/to/file
The idea of this issue is to make the --ssl
flag do that for you, if you've previously used ionic ssl generate
. We just haven't gotten to it yet.
@dwieeb This is how we do it for angular but ionic appears to ignore these arguments. I specify the correct paths but it always uses a 1 month long cert it generates itself instead of using my 1 year long cert I have in my trusted root.
I am using CLI version 5.1.0
@GuerrillaCoder Did you notice the separator (--
) in the command? With the separator, arguments after it are forwarded as-is to the Angular CLI. The command I posted works for me in CLI 5.1.0.
@dwieeb oooooh no I didn't. Many thanks for that, my apologies for taking your time.
Dear guys
I still get error trying to use --ssl flag:
ionic serve --ssl -- --ssl-cert ..ionic\ssl\cert.pem --ssl-key ..ionic\ssl\key.pem Error: spawn EPERM
at ChildProcess.spawn (internal/child_process.js:358:11) at Object.spawn (child_process.js:533:9) at spawn (C:\Users\d038471\AppData\Roaming\npm\node_modules\ionic\node_modules\cross-spawn\index.js:12:24) at spawn (C:\Users\d038471\AppData\Roaming\npm\node_modules\ionic\node_modules@ionic\utils-subprocess\dist\index.js:169:12) at Subprocess.spawn (C:\Users\d038471\AppData\Roaming\npm\node_modules\ionic\node_modules@ionic\utils-subprocess\dist\index.js:142:16) at Shell.spawn (C:\Users\d038471\AppData\Roaming\npm\node_modules\ionic\lib\shell.js:152:24)
Could you be so kind to help?
Many thanks
Solution for me for ionic serve
is to add cert and key to serve configuration section in angular.json
:
// ...
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"sslKey": "src/certificates/dev.key",
"sslCert": "src/certificates/dev.crt"
},
// ...
BUT this won't work for ionic capacitor run ios -l --ssl
...
@muuvmuuv You can make a feature request for that in this repo: https://github.com/ionic-team/angular-toolkit
Basically, the ionic-cordova-serve
needs to forward sslKey
and sslCert
options to the Angular serve builder.
is this supposed to work with react, or just angular? is DevApp still a thing, or can #3748 be closed?
The goal would to get it working with react-scripts too, yes. I closed the other issue, thanks!
I'm currently unable to get the following boot params to work: ionic capacitor run android -l --ssl --external
- it launches the app correctly but on the emulator I just get a white screen with no url in the webview. I believe it's linked to this issue because it only arises when I add the --ssl
flag to the command. This is on Windows 10, using Ionic 5 and running on an emulated Pixel C API 29.
FYI for React apps, ionic serve --https
does work, I use it for testing my PWA 👍
https://github.com/ionic-team/ionic-cli/blob/0932ff04f45633e51b1d4b78857dbecedaee0c45/packages/%40ionic/cli/src/lib/project/react/serve.ts#L27-L29
FYI for React apps,
ionic serve --https
does work, I use it for testing my PWA 👍https://github.com/ionic-team/ionic-cli/blob/0932ff04f45633e51b1d4b78857dbecedaee0c45/packages/%40ionic/cli/src/lib/project/react/serve.ts#L27-L29
Fantastic! Thanks for pointing this out; I couldn't find any other reference to this flag
Unfortunately our online CLI documentation is still specific to Angular. For React, you can use the --help
flag in your terminal: ionic serve --help
.
The --https
flag for React is a bit different than what this issue was originally trying to accomplish. It uses a webpack plugin that automatically generates an SSL certificate at runtime, but when I last tried to use it there were trust issues.
I'm currently unable to get the following boot params to work:
ionic capacitor run android -l --ssl --external
- it launches the app correctly but on the emulator I just get a white screen with no url in the webview. I believe it's linked to this issue because it only arises when I add the--ssl
flag to the command. This is on Windows 10, using Ionic 5 and running on an emulated Pixel C API 29.
I have the same problem. How to resolve it. command: ionic cap run android -l --external --ssl -- --ssl-cert .ionic/ssl/cert.pem --ssl-key .ionic/ssl/key.pem
I have the same problem. How to resolve it. command: ionic cap run android -l --external --ssl -- --ssl-cert .ionic/ssl/cert.pem --ssl-key .ionic/ssl/key.pem
Same problem but I couldn't resolve it. I tried to generate a ssl certificate and run that command, still a white screen on --ssl. I don't know what I'm doing wrong here.
I managed to make the --ssl flag work by including another override in: node_modules/@capacitor/android/capacitor/src/main/java/com/getcapacitor/BridgeWebViewClient.java
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
handler.proceed();
return;
}
Also import there:
import android.webkit.SslErrorHandler;
import android.net.http.SslError;
But this is a nuisance since you need to document this in your project or inform other people that is going to pull it to follow this steps with their own module.
I managed to make the --ssl flag work by including another override in: node_modules/@capacitor/android/capacitor/src/main/java/com/getcapacitor/BridgeWebViewClient.java
@Override public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) { handler.proceed(); return; }
Also import there:
import android.webkit.SslErrorHandler; import android.net.http.SslError;
But this is a nuisance since you need to document this in your project or inform other people that is going to pull it to follow this steps with their own module.
Thank you, this works for me! But it is of course not a good solution to make changes in a node module. Would be great to have a fix in a clean way.