CODEWITHSUNDEEP
iosionic-frameworkcors
Dan Z
Dan Z

Reputation: 796

Ionic app on iOS requires turning off Safari setting "prevent cross-site tracking"

We have an Ionic 4 (Cordova/Angular) app that makes requests to a REST API backend with HttpClient, using cookies for authentication.

The app runs fine on Android (which apparently proves that we've configured CORS correctly). We are now in the process of adapting it for iOS. We have found that when the Safari setting "prevent cross-site tracking" is turned on (which it is by default), WkWebView ignores the Set-Cookie header that is sent by the backend in response to a successful login request, causing all subsequent requests to fail.

Is there a way to avoid the problem without requiring all users to turn off this setting (which is definitely not an option)? We have considered switching to JWT authentication, but I'm afraid that it won't solve the problem, as our backend expects JSON, and according to the docs, "Content-Type: application/json" headers also cause the request to be considered as a CORS request.

Additionaly, we have come across another problem which seems to be related. The app won't run on the iOS simulator on macOS - the Set-Cookie headers are ignored, even if we switch the above setting off! Meaning we can debug the app only on a physical device, which is quite a hindrance.

After several hours of searching on the web, and not finding any similar complaints, I have the feeling that I'm missing something obvious.

Upvotes: 2

Views: 1549

Answers (1)

Dan Z
Dan Z

Reputation: 796

This library has come to my rescue: ionic-native-http-connection-backend

Quoting from the docs:

This library adds @ionic-native/http (when available) as a connection backend to Angular's Http and HttpClient Motivation

Now that Apple promotes/requires the use of WKWebView instead of the deprecated UIWebView, Ionic has switched newly created apps over via their cordova-plugin-ionic-webview (and Cordova offers it via their cordova-plugin-wkwebview-engine). That causes requests that used to work just fine to fail with CORS errors.

The real solution of course is to fix the CORS issues server side - but this may not be possible with e.g. 3rd party APIs.

Even though there is a way to solve CORS issues without changing server's response header by using @ionic-native/http, this only works on device and doesn't provide all the power of Angular's Http and HttpClient. How it works

The library provides a HttpBackend interface for Angular's HttpClient This HttpBackend interface tries to use @ionic-native/http whenever it is possible (= on device with installed plugin) If HttpBackend finds it impossible to use @ionic-native/http, it falls back to standard Angular code (HttpXhrBackend, which uses XmlHttpRequest)

This strategy allows developers to use Angular's HttpClient transparently in both environments: Browser and Device.

Although I still find it strange, that the developer only mentions the library's intended use for situations where CORS can't be configured server-side, but not the 2 problems that it solves for me, namely 1) having to require all users to allow cross-site tracking, and 2) not being able to use the simulator.

Upvotes: 2

Related Questions