WKWebView, Form POST and Session Cookies

Thank you. No, there aren’t any request cookies.

Then it must be something WKWebView related, I assume the cookies and page works correctly when using it in a browser.

Found an issue that seems to mention the problem with the WKWebView not accepting cookies: https://github.com/ionic-team/cordova-plugin-wkwebview-engine/issues/23.

It doesn’t work in the browser either. It only seems to work inside Wappler…

Thanks again.

What browser and version are you trying? There is a new samesite cookies security restriction that might be blocking the cookies.

You should see some warnings in the sections console about that

I’ve tried it in the latest versions of Safari and Chrome. The only warning is the 401 error, because the user ID isn’t being passed to the second query.

I’ve found that it doesn’t work in either browser, regardless of whether WKWebView is installed. It always works on Android and in Wappler, and it works on iOS if WKWebView isn’t installed. This makes sense, because WKWebView should only be affecting iOS.

I’ve noticed that if WKWebView isn’t installed, there doesn’t seem to be any PHPSESSID cookie being set, but the Security Provider works. However, if WKWebView is installed, the cookie is being sent, but its value is changing between HTTP requests and it isn’t being sent in the request headers.

Have you got any ideas?

Here’s the solution that allows the session cookie to be set and sent back to the server in future request headers, which allows the Security Provider to function properly.

This plugin needs to be added to the project: ‘cordova-plugin-wkwebview-inject-cookie’.

Once that’s been added, you need to implement it by adding the following JavaScript to your ‘index.js’ file, just before the app is initialised:

document.addEventListener('deviceready', () => {
  wkWebView.injectCookie('domain.com/path');
  console.log('Ready');
});

You then need to add this code to the ‘CDVWKWebViewEngine.m’ file that’s installed by the ‘cordova-plugin-wkwebview-engine’ plugin:

@try {
  [configuration.preferences setValue:@TRUE forKey:@"allowFileAccessFromFileURLs"];
}
@catch (NSException *exception) {}
@try {
  [configuration setValue:@TRUE forKey:@"allowUniversalAccessFromFileURLs"];
}
@catch (NSException *exception) {}

It needs to be added inside ‘createConfigurationFromSettings’, just before the configuration is returned.

If you’re using PhoneGap Build, this won’t be included when it installs ‘cordova-plugin-wkwebview-engine’, so you’ll need to add this plugin instead: ‘cordova-plugin-wkwebviewxhrfix’.

You then need to add this to your app’s ‘config.xml’ file, to stop WKWebView from using iCloud storage:

preference name="BackupWebStorage" value="local"

That’s it!

4 Likes

Wow well found Glenn! I didn’t knew that there are so many hacks needed to get the new WKWebView running! Thanks for sharing!

I wonder why this isn’t already included in ‘cordova-plugin-wkwebview-engine’ per default.

Thank you George! I wasn’t expecting it to be that difficult either!

Thanks again for your help guys!

1 Like

Hey @Glenn,

Thanks for posting this, I’m dealing with it myself today and not getting very far.

Any more details you can provide?

I am trying to reference the security id for a search and new sessions keep getting created…on ios android and browser.

I’m trying your solution but the BackupWebStorage preference keeps reverting to cloud when I rebuild.

And on the cookie injection…is the path the name of the cookie, like PHPSESSID?

EDIT: In researching I’m now to understand this is basically a summy cookie and only for iOS 11.

Anybody have all the details to make WKWebview work with server actions? This is proving to be quite time consuming!

–Ken

Hey @mebeingken,

No worries!

I saw on one of your other posts that you’re using a different plugin to implement WKWebView. Can you try it with cordova-plugin-wkwebview-engine? I had issues with the Ionic plugin.

Have you kept the log inside the function that injects the first cookie? If so, are you seeing the message in the console?

Thanks,

Glenn

Okay, thanks for the assist!

removed ionic, added standard (I think the CORS problem is gone.)

Here’s my list:

cordova-plugin-splashscreen 5.0.3 “Splashscreen”
cordova-plugin-whitelist 1.3.4 “Whitelist”
cordova-plugin-wkwebview-engine 1.2.1 “Cordova WKWebView Engine”
cordova-plugin-wkwebview-inject-cookie 1.0.2 “WKWebViewInjectCookie”

I’m not getting the console log for this. I added just before and do receive that. I’ve tried both of these, which both show an error in the editor.

Screen Shot 2020-02-05 at 1.39.24 PM

And some errors:

So I’m not sure why wkwebview is not defined.

I’m going to reset here…I think I have it working in iOS, but need to test more. Will be back later. :slight_smile:

1 Like

Hi, did you use node.js for your ios project? and was cors required to connect your server data project?
Was there any missing step not covered in the Wappler documentation? I’m stuck :sob:

Nope, I haven’t done a mobile app project since node was added to Wappler. But yes, you do need to get the content security policy setup properly – you need to include the your server project domain. You can troubleshoot this easily by using the dev console of either your simulator or device.

1 Like

Thank you for confirming that to me, could you perhaps show me a screenshot of how you had cors set in your project? I didn’t really understand this documentation https://expressjs.com/en/resources/middleware/cors.html and how to adjust/incorporate for Wappler.

Sorry I’m not so technical :see_no_evil:

You need to modify this line, which should have been added by default to your page:

<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">

Adding your domain to the default-src is a good start. Again, follow the errors in the dev console as for what to do next.

1 Like

Awesome thank you, I will give that a try.

I fixed it now :slight_smile: I just needed to include as dependency in package.json so I edited manually