WebView iOS cookie issue

[prabudevarrajan]

Tell us about the problem

web-view for iOS is not automatically passing the cookies after the recent change of iOS UIWebView to WKWebView(#5093)

Previous Nativescript "web-view" was using UIWebView and native code cookies(using NSURLConnection/NSURISession) is shared and the application worked fine.

We are using this feature for authentication cookies to be shared between native and web-view.

Also, I don't see easy way to set the http cookie for the current NativeScript web-view ui control.

Take a look the following link for ways to set cookie for WKWebView

https://stackoverflow.com/questions/26573137/can-i-set-the-cookies-to-be-used-by-a-wkwebview

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it)

$ tns --version
3.5.0-2017-12-20-10289

• Cross-platform modules: (check the 'version' attribute in the
  node_modules/tns-core-modules/package.json file in your project)

  "typings": "tns-core-modules.d.ts",
  "version": "3.4.0"

• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the
  package.json file of your project)

   "tns-ios": {
      "version": "3.4.0-rc-2017-12-4-1"
    }

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tsonevn]

Hi @prabudevarrajan,
Thank you for contacting us,
I tested the reported case and the setting and getting the NSHTTPCookie via NSHTTPCookieStorage seems to work as expected on iOS, while using the latest NativeScript CLI runtime and modules.

For your convenience I am attaching sample project, you should review it.
Archive 2.zip

If you still facing an issue with accessing the cookies, please make the needed changes in the attached project, which will allow us to debug the case on our side.

[prabudevarrajan]

I was able to exactly reproduce your issue with the following changes. I added code to add cookie to native code some domain(mydomain.com) and then exactly when to same domain URL and web-view(WKWebView) is not posting all the cookies related to URL domain. But, previous "web-view" based on {"UIWebView") was posting all the domain related to the src url domain.

../Archive.2/app/main-page.ts

let props = new NSDictionary([".mydomain.com", "test", "/", "test12345"], [NSHTTPCookieDomain, NSHTTPCookieName, NSHTTPCookiePath,NSHTTPCookieValue]);

../Archive.2/app/main-page.xml

  <WebView loaded="loadedwebview" src="https://xyz.mydomain.com/show_cookies.php" />

Now, on the show_cookies.php code, I am just printing all the cookies

<?php
print_r($_COOKIE);
?>

Actual Result: I am see empty cookie array

Excepted Result: Should have seen cookie with "test" -> "test12345" as it belongs to same domain "mydomain.com".

[tsonevn]

Hi @prabudevarrajan,
Thank you for writing us back.
I have researched further the case and have to confirm that the behavior, how we work with cookies and WebView in NativeScript has been changed.

After the replacement of UIWebView with WKWebView we could assign cookies for a specific URL, while creating new NSMutableURLRequest and setting up the needed cookies. This scenario is demonstrated in the attached sample project.

Archive.zip

Also, I will log this issue as a new feature and we will research, how this functionality could be included for iOS in NativeScript as well as how it could be done for Android.

Hope this information helps

[JPM84]

This is a real blocker for us too. We have manually patched web-view-ios.js for now.

[bonsaibox]

@JPM84 : could please share how you have implemented in web-view-ios.js ??

[JPM84]

Hi @bonsaibox, for our projects we forked tns-core-modules and edited /node_modules/tns-core-modules/ui/web-view/web-view.ios.js as we need our X-XSRF-TOKEN cookie.

Have a look at this gist:
https://gist.github.com/marcel-ploch/3a606723c9f230db866fc250da9615e8#file-web-view-ios-js (Line 18 ist the interesting part).

A colleague of mine wrote a nice article on the issue (in german) as it keeps haunting us.... https://blog.coodoo.io/nativescript-setcookies-for-webview-for-android-and-ios-26d88433f812

Hope this helps.

[iMarwan-k]

Hi, I tired to follow the solutions that proposed here, but I could not find any way to fill cookie attributes beside name and value.

I did something like
cookiesString += cookieObject.name + "=" + cookieObject.value + "=" + cookieObject.domain+"=web;"; <-- didn't work

NSHTTPCookieStorage.sharedHTTPCookieStorage.cookieAcceptPolicy=NSHTTPCookieAcceptPolicy.Always;

let props = new NSDictionary(["192.168.85.77", "TOKEN", "/web", "test12345"], [NSHTTPCookieDomain,NSHTTPCookieName, NSHTTPCookiePath,NSHTTPCookieValue]);
 
let ck = NSHTTPCookie.cookieWithProperties(props);

cookiesStorage.setCookie(ck);              <-- also didn't work

Any help?
Thanks

[bagnos]

Hi

the solution before works only at first called.
In the subsequent calls from the wevbiew it seems that the cookie doesn't send to server.

Hope this helps.

Thanks

[wendt88]

anyone found a solution?
I tried the folowind line: webView.configuration.websiteDataStore.httpCookieStore.setCookie, from this solution but it seems, that setCookie is not defined inside the WKHTTPCookieStore class, but it should be looking the apple docu
Is there maby something not implemented in nativescript?

[manoldonev]

The native method signature is setCookie:completionHandler: and it is translated to setCookieCompletionHandler(cookie: NSHTTPCookie, completionHandler: () => void): void; in NativeScript.

Check this article here on how to have access and Intellisense for the native APIs in TypeScript.

[itsEspen]

This is how I solved it.

Template:
<WebView [src]="html"></WebView>

OnNgInit:

this.http.get(url, {withCredentials: true, responseType: 'text'})
  .subscribe(res =>{
            this.html = res;
        });