Cookies Ignored on First Application Execution

[doverdb12]

When installing a fresh build of my application and attempting to log in, it fails because the authentication cookie sent by the server is never stored. Closing the application and re-launching fixes the issue. There is an identical issue for cordova-plugin-wkwebview-engine here. Is this one of the issues that has been / will be fixed in this fork, or is there a viable workaround at this time?

[lucasforchino]

I have the same issue, cookies not working the first time.

[SpellChucker]

Same issue here. I don't think there is a solution in this fork. This is really a blocker for us in user experience. Please take a look at this!

[psirenny]

This also causes websockets to break on many apps that rely on sticky session cookies to connect to the same server. Even if you were to use localstorage for auth, it's hard to get around the sticky session issue.

[mukana-lahtelat]

This fork seems to have fix for this issue: https://github.com/agarcia17/cordova-plugin-wkwebview-engine
It is behind the current master of the plugin though.

[psirenny]

Yikes, that is one heavy handed fix.

[SpellChucker]

@mukana-lahtelat I don't think this fixes XHR requests, it seems to only deal with the loadRequest lifecycle, meaning on raw page loads it will re-inject the cookies. The better fix for non-XHR requests is outlined here.

[ajcrites]

I also seem to be experiencing this issue, but for me the cookies don't ever seem to be sent or stored even when I restart the application (using a simulator). I can see Set-Cookie is being sent back properly, and this all works fine in UIWebView, but for WKWebView the cookies never seem to be stored at all.

[beckson]

+1.
Because of the cookie issue, I had to uninstall the WKWebView plugin.
Any solutions?

[kas84]

+1
Still having this issue! Went back to UIWebView

[mezykr]

+1
Is it something what is going to be fixed in this plugin pretty soon?

[htcholdingsvn]

I uninstall WKWebView plugin then reinstall ios platform, so it working now.

[redgeoff]

This appears to be causing problems for me as well

[mezykr]

When you will call first the same request using cordova-plugin-fetch, it will "unlock" saving set-cookie header in next normal request. That fixes issue when app is opened first time after installation. But it's not so elegant solution ;) ...

[mezykr]

I'm using in my app cordova-plugin-file-transfer to download/save files on device. In request there is no cookie header, even when app is not first opened on device. Looks like above solution with cordova-plugin-fetch solves that issue .. Maybe it will help someone to better investigate and solve that issue.

[alonp99]

+1
mindf**k

edit:
@mezykr your solution worked, thanks.
I also found this https://github.com/psirenny/cordova-plugin-wkwebview-sync-cookies that I believe does the same thing under the hood.

[oliverjanik]

What happened to the PR ? Did it work? Why was it not merged?

[scottopolis]

Has anyone found a fix for this issue that is not listed here? Is anyone from Ionic working on this at all?

[schostin]

+1 Would also love to see a working fix!

[johnnyshields]

+1 Please fix this issue.

[thuelsmeier]

I've made a workaround for this so that the cookies work again after the first startup of the app. For that I created this plugin based on a different persons advice. If i find the Person again ill give him credit here and in the plugin of course:

https://github.com/COMLINE-AG/native-xhr-plugin/

This will make the use of cookies possible again.

[oliverjanik]

So do a native request and wait 3 seconds? Really?

[thuelsmeier]

@oliverjanik Well there is no real alternative for this until Ionic fixed this issue. I've tried many workarounds, but this workaround was the only one that worked.

If u have concerns about the 3 seconds of waiting, then make a request on application startup. If the user has to enter login data then the 3 seconds have passed already and the user will notice nothing about it.

Edit: I forgot to mention that u need to do this native request once. After this request and the wait of 3 seconds u can use normal xhr again.

[asrytis]

I tried most of the wkwebview xhr workarounds and went with this one:
https://github.com/sortdinc/cordova-plugin-wkwebview-ionic-xhr

The plugin caches cookies at the native layer between requests but it does not attempt to sync cookies between the WKWebView and the native sessions. From the JavaScript context, this means "document.cookie" won't contain any cookies returned from XHR handled at the native layer and the native iOS XHR will not see any cookies returned from remote resources fetched by the browser context, such as images.

[oliverjanik]

@asrytis do you use that to do all you ajax calls then?

[Abildtoft]

Are there any news on this?

[oliverjanik]

I think you need to get Apple to fix their Webview, to solve this, cleanly.

[l3ender]

I was struggling with this issue for some time now. Gladly I've come up to a working solution with ver 4.0.0 of Ionic plugin for iOS11+. Ironically all fix is done in config.xml file itself:
<preference name="Hostname" value="marek-rulez.com" />

So no need to setting cookies manually in native wrapper. For me setting the domain solved the issue. Hope it will help someone.

@marecektn Do you have a link to any doc page on how/why this preference is used? I can't seem to find anything related to it. Thanks!

[marecektn]

@l3ender I am not aware of any documentation about this. I've just realised it during debugging.
The github page says that Default value is localhost. Based on this knowledge you can assume, that safari syncs cookies based on domain name, therefore localhost != your-domain

Trial & error. That's why I commented on this post since it is really time consuming to find.

[jabinb]

Thanks @marecektn that solved our issue with cookies not being persisted inside an iframe in our Ionic Capacitor app.

[jefferk]

Thanks @marecektn
you saved my life.
I was more than a month without a solution.
sorry my english but i want to tank you

[NiklasMerz]

@l3ender I am not aware of any documentation about this. I've just realised it during debugging.
The github page says that Default value is localhost. Based on this knowledge you can assume, that safari syncs cookies based on domain name, therefore localhost != your-domain

Trial & error. That's why I commented on this post since it is really time consuming to find.

That's indeed a good workaround for some situations. Thank you for sharing. From iOS 13 WKWebView ignores cookies completely if the request is cross-origin. That's why I filed this Webkit bug.

[dminkovsky]

Here is a good summary of cookies/XHR CORS -related issues around WKWebView from the Cordova blog: https://cordova.apache.org/news/2018/08/01/future-cordova-ios-webview.html

[lowzhao]

ionic 3.20.0 - solution - https://github.com/CWBudde/cordova-plugin-wkwebview-inject-cookie

npm i cordova-plugin-wkwebview-inject-cookie
ionic cordova plugin add cordova-plugin-wkwebview-inject-cookie

in app.components.ts :

declare var wkWebView: any;

...

    document.addEventListener('deviceready', () => {
      wkWebView.injectCookie('https://domain.com/');
    });

Thank you for the wonderful introduction of the plugin.
But I am still facing cookie persistence problem. Anyone have any idea?

[ahayder]

Thank you very much @marecektn ! This solved the problem for me. My hostname was something like:
ionic://domain
and I changed it to
ionic://domain.net

and now it works. The API sending the cookie is on api.staging.domain.net

This worked for me.

[mrflo]

Thank you very much @marecektn
For those who are on capacitor: Just change/add this to capacitor.config.json:

  "server": {
    "hostname": "yourdomain.com"
  }

It will change your ionic address to capacitor://yourdomain.com and cookies are passing correctly

[jcarloss]

When you will call first the same request using cordova-plugin-fetch, it will "unlock" saving set-cookie header in next normal request. That fixes issue when app is opened first time after installation. But it's not so elegant solution ;) ...

Thanks!

[lucky3491]

Here is my solution for cookie problem in ios devices
https://github.com/lucky3491/cordova-plugin-wkwebview-inject-cookie

[juliannehalversen]

I have tried changing the host name and the https://github.com/lucky3491/cordova-plugin-wkwebview-inject-cookie with no luck. Are there any other workarounds for this?

[Elardzhi]

Thank you very much @marecektn
For those who are on capacitor: Just change/add this to capacitor.config.json:

  "server": {
    "hostname": "yourdomain.com"
  }

It will change your ionic address to capacitor://yourdomain.com and cookies are passing correctly

Works on ios and doesn't work on android.
If "hostname" in config the same as external API hostname it does local request.

[sachinkumaram-veoci]

I was struggling with this issue for some time now. Gladly I've come up to a working solution with ver 4.0.0 of Ionic plugin for iOS11+. Ironically all fix is done in config.xml file itself:
<preference name="Hostname" value="marek-rulez.com" />

So no need to setting cookies manually in native wrapper. For me setting the domain solved the issue. Hope it will help someone.

Can i use <preference name="Hostname" value="ionic://localhost" /> in cordova ios version 6.0.0 ?

[qmarcos]

I'm having similar issues than @Elardzhi

Initially we think it could be related to allowNavigation because we have set it to the same domain, but after removing it
shows the same problem: we get a local request on android instead a remote one.

Doing some debugging on the browser through simulator, we get this reponse headers (note the shouldInterceptRequest the same as if we were using allowNavigation with the same domain)

Cache-Control: no-cache
Client-Via: shouldInterceptRequest
Content-Length: 112124
Content-Type: text/html

We need to set the androidScheme to https to avoid CORS error, like this one

Line 0 - Msg: Failed to load https://mydomain.com/app/config: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://mydomain.com' is therefore not allowed access.

Our final version of capacitor.config.json server section is like this:

  "server": {
     "androidScheme": "https",
    "hostname": "mydomain.com",
  },

And same results than @Elardzhi , it works on iOS but not on android because we get a local request instead

[afulkersonApollo]

Thank you very much @marecektn
For those who are on capacitor: Just change/add this to capacitor.config.json:

  "server": {
    "hostname": "yourdomain.com"
  }

It will change your ionic address to capacitor://yourdomain.com and cookies are passing correctly

This actually worked for me after an excruciating amount of troubleshooting but now the problem is that users of our app are going to be making requests to potentially more than one backend which makes this particular setting useless to us. Any ideas other than using a native plugin?

[JulianLaval]

@afulkersonApollo an option might be to proxy these multiple backends / microservices through an endpoint on your main host, using something like http-proxy-middleware:

ionic://yourdomain.com -> yourdomain.com proxy -> backend1, backend2

[Lyfei]

I was struggling with this issue for some time now. Gladly I've come up to a working solution with ver 4.0.0 of Ionic plugin for iOS11+. Ironically all fix is done in config.xml file itself: <preference name="Hostname" value="marek-rulez.com" />

So no need to setting cookies manually in native wrapper. For me setting the domain solved the issue. Hope it will help someone.

If there are multiple domain..

[Lyfei]

@l3ender I am not aware of any documentation about this. I've just realised it during debugging. The github page says that Default value is localhost. Based on this knowledge you can assume, that safari syncs cookies based on domain name, therefore localhost != your-domain

Trial & error. That's why I commented on this post since it is really time consuming to find.

If so, why is it only ignored for the first time。If the Hostname is not set, the cookie will be synchronized the second time startup

[leodelgadodev]

bump?

[RobertZetterlund]

Thank you very much @marecektn
For those who are on capacitor: Just change/add this to capacitor.config.json:

  "server": {
    "hostname": "yourdomain.com"
  }

It will change your ionic address to capacitor://yourdomain.com and cookies are passing correctly

Works on ios and doesn't work on android. If "hostname" in config the same as external API hostname it does local request.

It appears that the same goes for ios now too, it'll create a local request as of recent changes (not more than 3 months)