WKWebView, Form POST and Session Cookies

We are running through CloudFlare and we also do use https. I will check and see if there are any blocks but I don’t know if there is anything specific that I should be looking for?

Also I should mention that I did also try just sending username via POST and hard-coded password and still the same issue.

Hi Patrick,

I’m having a similar issue. I’ve enabled CORS on the website, so my login attempts function correctly, but as soon as I try to make reference to the identity in the Security Provider, it returns ‘null’.

I’ve noticed that the ‘PHPSESSID’ cookie value is changing between HTTP requests. Could this be related to the issue?

Thanks.

If the PHPSESSID cookie value is changing for each request then it is generating a new session for each request. That probably causes the null being returned. Check session.use_cookies in your php.ini file. Must be set to 1. I’m not sure if it is the server that is causing the issue in your case or the webview, does the webview send the php session cookie back to the server?

Hi Patrick,

Yes, ‘session.use_cookies’ is set to 1. I’m not sure what you mean. How can I check?

Thanks again.

In devTools when you inspect the request in the Network tab you should be able to inspect the request headers, it should include the cookie there.

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