Origin is ionic:// not http://

Ionic Framework
1

Hi,

anybody knows why on my requests the Origin is ionic:// not http://?

I think that’s the reason why my firebase authentication requests fail…
This happes on iOS only, not android…

Request
Connection: Upgrade
Host: xxxxxxx.firebaseio.com
Origin: ionic://localhost
Pragma: no-cache
Cache-Control: no-cache
Sec-WebSocket-Key: xx
Sec-WebSocket-Version: xx
Sec-WebSocket-Extensions: x-webkit-deflate-frame
User-Agent: Mozilla/5.0 Google

Here’s my config

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic 3.1.3, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 14 other plugins)

System:

   ios-deploy : 1.9.4
   ios-sim    : 7.0.0
   NodeJS     : v11.8.0 (/usr/local/bin/node)
   npm        : 6.5.0
   OS         : macOS Mojave
   Xcode      : Xcode 9.0 Build version 9A235

plugins

cordova-plugin-add-swift-support 1.7.2 "AddSwiftSupport"
cordova-plugin-app-event 1.2.1 "Application Events"
cordova-plugin-badge 0.8.8 "Badge"
cordova-plugin-browsertab 0.2.0 "cordova-plugin-browsertab"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-customurlscheme 4.3.0 "Custom URL scheme"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-ionic 3.1.3 "IonicCordova"
cordova-plugin-ionic-keyboard 2.1.3 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 3.1.2 "cordova-plugin-ionic-webview"
cordova-plugin-local-notification 0.9.0-beta.2 "LocalNotification"
cordova-plugin-splashscreen 4.1.0 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova-sqlite-storage 3.1.0 "Cordova sqlite storage plugin - cordova-sqlite-storage plugin version"
cordova-universal-links-plugin 1.2.1 "Universal Links Plugin"

Thanks!

2

Hi @MSC29 :wave:

That is correct. The Ionic Webview plugin 3.x uses ionic:// as protocol because it needs a custom scheme in order to serve local files.

You can find all the different origins at the CORS Errors page on the Ionic docs.

I saw somewhere that a Googler was suggesting to use a special string as origin in the Firebase console but I can’t find it now :disappointed_relieved: I’ll post here if I do.

Best,
Rodrigo

3

I found it, but it was affecting Google Maps so I’m not sure if it applies to all Google APIs (which Firebase use under the hood): https://issuetracker.google.com/issues/124858510#comment62

So if your origin is ionic://localhost, can you try with __ionic_url__/localhost?

4

Hi Thanks for the reply.

It took me a while, but I indeed found the documentation specifying that it’s ionic:// that’s being used now, with WKWebView.

Firebase auth does a client side check on the location.protocol, which is ionic://, therefore it won’t even let me connect to firebase.

I’m now trying to bypass firebase’s google signin and do the sign in to google directly.
The plan is then to grab to token and pass it to firebase.
No idea of this is going to work, but i’ll post the solution here if it does.

5

Sounds good. I’ll reach out to the Ionic team and see if there’s a better way, because this can affect a lot of people.

6

Follow up,

I can get the direct OAuth sign in to google to work perfectly on a browser, but not within WKWebView on iOS.

I reckon the problem is the same; the origin is ionic://, not https, therefore google won’t allow it.

I’ll reach out to the ionic team too, that’s a pretty bad issue.

The next thing I’ll try is to downgrade the UI View and use the old one.
That way i’m hoping to stick to https://

Regards

7

Have you tried using the special rewrite string from my previous message in the Google Cloud console?

8

I haven’t found where this can be configured in Google Cloud Console.
It’s definitely not in firebase, as it’s only expecting the domain name, not the protocol.

i’ll keep looking, but let me know if you find the page :wink:

9

I did find it, it’s the one in the 3rd post about the change in Google Cloud APIs affecting Google Maps (and possibly others) :slightly_smiling_face:

10

ah ok, misread it.
I understand what to do; that is, set the referrer to __ionic_url__/localhost
But can’t quite figure out a way to change the referrer yet.
Looking into it

11

If you mean changing the Referer header in the requests, you can’t. It will always be overwritten by the browser/webview.

12

correct, that’s why I can’t find what referrer they mean and how can I configure it.
Maybe it’s something lile X-REFERRER

13

I’m not sure. I tried entering __ionic_url__/localhost in the Firebase console > Authentication > Authorised domains, but it doesn’t pass the validation. Maybe adding this origin from the Google Cloud APIs console may work, but I don’t know how where to find it there.

14

yeah it’s domain name only…

From this reply; I gather native solutions may work… https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/319
https://github.com/angular/angularfire2/issues/243

In the meantime, I think I’ll just downgrade and see if I can get the google auth to work on ios…

15

For anyone following this thread, it looks like a similar issue exists using API’s that are fronted by Azure API Manager.

The CORS policy in APIM only allows origins beginning with “http” or “https”
So it works for the app in a browser, and on Android (Origin=http://localhost) but iOS (Origin=ionic://localhost) cannot even be configured. It errors with
One or more fields contain incorrect values:

  • Error in element ‘cors’ on line 21, column 18: Origin must be a valid URL consisting of scheme, host, and port only

So looks like Ionic as a mobile web dev technology cannot be used OOTB with an Azure API Manager managed backend? … still looking for a workaround in APIM but it looks like changing the origin from the ionic side will have to be done using the documented https://ionicframework.com/docs/native/http/ workaround… blurk :frowning:

1 Like
16

If anyone else is trying to use ionic with Azure APIm - you can up vote the suggestion for custom url schemes here.

Would be better if ionic could do something to resolve the underlying problem and let the scheme be specified or just use https://localhost on ios like they do for android…

1 Like
17

Any help on this related question please? :slight_smile: https://stackoverflow.com/questions/56044902/how-to-add-missing-referrer-header-to-cordova-ios-app

18

This is a simple and effective workaround thanks to Dmitry Snisarenko

plug it in and off you go…

1 Like
19

@aholland Hi , Is this the best workaround for the moment?currently i’m using third party azure api as backend and i get this cors error in ios bcz of this ionic://localhost.

20

Hi @nalaka-au yes this mitigates the CORS issue as it’s not using a browser based http client and requires minimal changes to existing code.
Azure API Management team have triaged this and may add support for custom schemes eventually


You could vote it up - but in the meantime I think Dmitry’s solution is a good one.

1 Like