Cross domain Cookies not working on Safari

Question

I have 2 websites:

1. 3rdpartycookiemanager.com
2. website.com

From website: https://www.website.com

I do an Ajax call to: https://www.3rdpartycookiemanager.com/cookies.php

with the following jQuery call:

$.ajax({
  ...
  type: 'POST',    
  url: 'https://www.3rdpartycookiemanager.com/cookies.php',
  cache: false,
  crossDomain: true,
  dataType: 'json',
  data: {
    email: '[email protected]'
  },
  xhrFields: {
    withCredentials: true
  },
  ...
});

On the Developer Tools of the browser I see the following:

General
    Request URL:https://www.3rdpartycookiemanager.com/cookies.php
    Request Method:POST
    Status Code:200 

Response Headers
    Access-Control-Allow-Credentials:true
    Access-Control-Allow-Origin:https://www.website.com
    Content-Type:application/json
    Date:Thu, 22 Oct 2020 16:47:32 GMT
    Server:
    Set-Cookie:data=%7B%22email%22%3A%22bill.gates%40microsoft.com%22%7D; expires=Fri, 22-Oct-2021 16:47:32 GMT; Max-Age=31536000; path=/; secure; SameSite=None
    Vary:Origin
    Provisional headers are shown

Request Headers
    Accept:application/json, text/javascript, */*; q=0.01
    Content-Type:application/x-www-form-urlencoded; charset=UTF-8
    Origin:https://www.website.com
    Referer:https://www.website.com/
    User-Agent:Mozilla/5.0 (iPhone; CPU iPhone OS 13_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1

Form Data
    action:set
    data[email]:[email protected]

where on the Response Headers you can see this:

Set-Cookie:data=%7B%22email%22%3A%22bill.gates%40microsoft.com%22%7D; expires=Fri, 22-Oct-2021 16:47:32 GMT; Max-Age=31536000; path=/; secure; SameSite=None

My problem is:

This works on:

• Windows - Edge, Chrome, Firefox
• Android - Chrome, Firefox
• macOS - Chrome, Firefox

But doesn't work on:

• macOS - Safari
• iOS - Safari, Chrome

Extra notes:

On website: 3rdpartycookiemanager.com I use PHP and have the following:

~/public_html/3rdpartycookiemanager.com/.htaccess

# ----------------------------------------------------------------------
# Allow loading of external fonts
# ----------------------------------------------------------------------
<FilesMatch "cookies\.php$">
    <IfModule mod_headers.c>
        SetEnvIf Origin "http(s)?://(www\.)?(website.com)$" AccessControlAllowOrigin=$0
        Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
        Header add Access-Control-Allow-Credentials true
        Header merge Vary Origin
    </IfModule>
</FilesMatch>

~/public_html/3rdpartycookiemanager.com/cookies.php

<?php

$action = $_POST['action'] ?? '';

switch ($action) {
  case 'set':
    $data = $_POST['data'] ?? '';
    $arr_cookie_options = [
      'expires' => time() + 365*24*60*60,
      'path' => '/',
      // 'domain' => '.local',
      'samesite' => 'None',   // required to enable cross-site usage
      'secure' => true,       // required in order to use: 'samesite' => 'None'
      'httponly' => false
    ];
    setcookie('data', json_encode($data), $arr_cookie_options);
    $response = [
      'status' => 'success',
    ];
    break;
  case 'get':
    $response = json_decode($_COOKIE['data'] ?? '', true);
    break;
}

header('Content-Type: application/json');
echo json_encode($response);

?>

Any idea on how to make this work on:

• macOS - Safari
• iOS - Safari, Chrome

as it works on the rest of the Devices and Browsers?

Thanks!

Answer 1

I run into the same problem, the only solution I’m aware of is changing safari settings on your iOS devices. Find Settings->safari->prevent cross-site tracking and uncheck it.