WKWebView and Ionic proxy

Ionic Framework ionic-v3
1

I try to use WKWebView with my Ionic2 project.

I installed and configured my app like described by @flavordaaave

http://stackoverflow.com/questions/36477450/even-basic-ionic-project-with-cordova-wkwebview-engine-plugin-produces-white-scr/38119239#38119239

App start but then I face some CORS problem.

According @jcesarmobile, WKWebView is affected by CORS

http://stackoverflow.com/questions/34270037/ajax-call-fails-with-http-status-0-when-using-cordova-wkwebview-plugin-on-ios

I tried to implement the solution he provided and it worked for my server. But this isn’t the all solution for my app because I’m also using the Yelp V3 API which doesn’t allow *.

To solve the same issue while debugging in the browser, I was using the Ionic proxy. For that reason I thought that this could also solve the issue while using WKWebView, but it turns out that the Ionic proxy on iOS doesn’t work while using WKWebView or I don’t know how to set up the Ionic proxy while running iOS.

Do someone noticed the same behavior? Has someone a solution to use a proxy while using WKWebView in a Ionic2 project?

Best regards

2

Try adding this in your index.html

    <meta http-equiv="Content-Security-Policy" content="script-src * 'unsafe-eval' 'unsafe-inline'; connect-src * 'unsafe-eval'; object-src *; style-src * 'unsafe-inline'; img-src *">
3

thx. already got that in my index.html file. doesn’t worked.

WKWebView only allow “Access-Control-Allow-Origin: *” in header which is not usable und unfortunately this configuration doesn’t changed it.

I think that the use of a proxy would solve it. But the Ionic proxy, if I’m not wrong, only work for browser use (ionic serve). Or maybe there is a way to “include” it in a build?

4

Do you have added the plugin https://github.com/robertklein/cordova-ios-security.git too?

5

Don’t have the plugin but my plist contains what is described in the plugin

<key>NSAppTransportSecurity</key> 
<dict>
    <key>NSAllowsArbitraryLoads</key> <true/> 
</dict>
6

Seems that I’m not the only one facing CORS problem with WKWebView. Seems to be unclear if it’s possible or not to set CORS header in WKWebView.

https://issues.apache.org/jira/browse/CB-10109

7

So…wkwebview…

So far, I don’t suggest using WKWebview in any cordova project. There’s so much that is not supported in WKWebview that it just becomes a burden.

To be honest, you probably don’t need wkwebview for your app. UIWebview has always been fast and reliable.

8

Thx for the hints. You’re right, Cordova and wkwebview doesn’t seems really mature right now and that CORS limitation is a little bit driving me crazy.

In the other hand, once I installed everything, I tweaked temporarily my server with CORS: * and tried my app on my iPhone 4s (iOS 9) and I’ve to say that the performance were better. Maybe not once every views are loaded but at least at the first load of each view, it was really an improvement in loading time, that was quite visual.

That’s why I still don’t totally gave up the idea of adding the wkwebview support … but if a next beta of Ionic2 will improve loading time, that won’t be necessary :wink:

1 Like
9

Good news, Ionic released an awesome easy to install plugin for WKWebView, so no harder installation anymore to use that technology.

http://blog.ionic.io/cordova-ios-performance-improvements-drop-in-speed-with-wkwebview/

Bad news, I still face my CORS problem, because WKWebView only support Access-Control-Allow-Origin *

Therefore I opened following ticket in the Ionic plugin issues list

10

Cors issue are now partially solved in the WkWebView.

With partially I mean that CORS issue with your own server could be solved (add ionic.local or http://localhost:8080) to your CORS header.

If you use third party services which doesn’t accept CORS requests, the only solution, I guess, is to route these queries to your own backend as a middlepoint which reroute then these requests to the third party services you want to use.

11

Hey guys, I’ve created AngularHttp service backend handling CORS issues by using @ionic-native/http plugin. Feel free to use https://github.com/sneas/ionic-native-http-connection-backend

It is not a silver bullet. Using XLMHttpRequest directly without Http service still doesn’t work. But solves my problems, may be it could be helpful for you.

2 Likes
12

Hey @sneas

On your repo I see following line :
“Even though there is a way to solve CORS issue without changing server’s response header by using Cordova HTTP plugin”

Would you mind giving me some direction on how to do this? I assume the idea is to use this plugin as a proxy but I am not sure how to implement it in order to bypass CORS restriction. I don’t have control of the backed. If you have any resource I can use that will really help.

Thanks

13

Hi @nitinsh98, all you have to do is to follow Installation and then Usage instructions.

14

@sneas Thank you very much for the plugin. I have integrated it and doesn’t have any problem with CORS but occasionally I am getting error message on “too many http redirects”. Do you have any clue? I am also using the HttpInterceptor together with this.

15

Hi @anoop_ar. It’s always good to know the plugin helps. Could you please copy the exact error message so I can research where the error comes from?

16

The error message is

There was an error with the request: java.net.ProtocolException: Too many redirects: 21

This occurs for the authentication request.
For example: First time logging in is OK. Next time after logout and try login this error comes.
Not sure whether it has something to do with cookies while sending the http request. (Platform Server - Attach cookies to HTTP requests ¡ Issue #15730 ¡ angular/angular ¡ GitHub)

17

The error is triggered by Cordova plugin (https://github.com/silkimen/cordova-plugin-advanced-http) which is being used by ionic-native-http-connection-backend library to perform requests. And apparently it’s being caused by cyclic redirection on server. Does the app work correctly in browser when cordova plugin is disabled?

18

I removed the Cordova plugin and checked in the browser and it is working without any issues.

19

Can you show the request example with all the headers and get/post params? In the format:

this.http.post(‘http://sample.url’, {params}, {headers})

Btw removing Cordova plugin is not necessary. ionic-native-http-connection-backend automatically falls back to XmlHttpRequest usage when app runs in browser.

20

Didn’t set any headers or params explicitly. I use the get method like,
this.http.get(“http://abc.com?x=x&y=y”, {withCredentials: true});