bug: Capacitor Cookies - document.cookie not behaving as expected on iOS

[crhayes]

Bug Report

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 4.6.3
  @capacitor/core: 4.6.3
  @capacitor/android: 4.6.3
  @capacitor/ios: 4.6.3

Installed Dependencies:

  @capacitor/cli: 4.6.3
  @capacitor/android: 4.6.3
  @capacitor/core: 4.6.3
  @capacitor/ios: 4.6.3

[success] iOS looking great! 👌
[success] Android looking great! 👌

Platform(s)

iOS

Current Behavior

How it Manifests

I have an Ionic React application using Auth0 React. I have successfully configured it so that user sessions persist when the user closes and relaunches the app. However, this is broken on Native iOS when Capacitor Cookies is enabled; after closing and relaunching the app the session is lost. Disabling Capacitor Cookies restores the correct behaviour.

Config:

// capacitor.config.ts
const config: CapacitorConfig = {
  ...,
  plugins: {
    CapacitorCookies: {
      enabled: true,
    },
  },
};

Technical Details

After some investigation I've uncovered an issue with the iOS monkeypatch of document.cookie with regards to how multiple cookies are joined into a single string. Specifically, multiple cookies are separated by ; rather than ; :

Native iOS with Capacitor Cookies disabled

Native iOS with Capacitor Cookies enabled

Native Android with Capacitor Cookies enabled/disabled

Note that Native Android with Capacitor Cookies both enabled and disabled, as well as Native iOS with Capacitor Cookies disabled, all separate cookies with a semicolon and space. However, when Capacitor Cookies is enabled, Native iOS separates cookies with only a semicolon. This results in critical errors parsing cookies.

From MDN:

RFC 6265 mandates a single space after each semicolon, but some user agents may not abide by this.

Furthermore, popular libraries expect ; when parsing the document.cookie string:

• js-cookie splits on ;
• es-cookie splits on ;

The relevant code in the iOS moneypatch appears to be this line.

The Auth0 client library leverages es-cookie which is why this issue manifests for me.

Expected Behavior

The native iOS document.cookie (get) functionality should return cookies separated by ; (semicolon+space).

Code Reproduction

No (If would be helpful in this case let me know and I will create one)

Other Technical Details

npm --version output: 8.5.0

node --version output: v16.14.2

pod --version output (iOS issues only):

Ignoring ffi-1.15.5 because its extensions are not built. Try: gem pristine ffi --version 1.15.5
1.11.3

Additional Context

N/A

[OskarLebuda]

@crhayes I've reported same bug as you.
#6311

The problem is right here https://github.com/ionic-team/capacitor/blob/main/ios/Capacitor/Capacitor/Plugins/CapacitorCookieManager.swift#L91

The CookieManager joined cookies without the space

[crhayes]

@crhayes I've reported same bug as you. #6311

@OskarLebuda Hopefully this issue is addressed quickly! I suggest closing your issue so we don't have duplicates. You can post any additional details or proposals in this thread.

[OskarLebuda]

I've closed my report. My proposal is to add to the CapacitorConfig:

plugins: {
    CapacitorCookies: {
      enabled: true,
      separator: '; ',
    },
  },

to manage this your self. Or fix it globaly. But some of reason this works like now.

[efuturetoday]

I have the same issue with the delimeter and the whitespace. Another quick solution would be to also enable to overwrite the document.cookie property - so everyone can modify the getter and setter of the cookie property. Currently that is not possible and I opened a issue for that. The original unpatched document.cookie property can be overwritten and will be overwritten by capacitor cookie plugin but the new property can not be overwriten as the original one.
#6275

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Capacitor, please create a new issue and ensure the template is fully filled out.