Set-cookie header works on Google Chrome and FF but no Safari

[Siel]

Hello everyone!

I’m facing the most strange error ever. Inspired by @jstlroot post here, I planned to implement his solution on my most recent project, but now I have an error, and this error only occurs using Safari.

basically I put a ‘set-cookie’ header by modifying conn with Plug.Conn.put_resp_cookie("token", token, http_only: true, secure: false, max_age: 604800) I can easily check it works because for example on FF:

and then

also on Google Chrome

But when it comes to Safari, It receives the ‘set-cookie’ header

But the Cookie does not get stored

So if an user refresh the page on safari, he needs to login again.

I know this is a very specific problem but I’m close to surrender and store the token in the local storage.

[joaoevangelista]

Hi

So I googled and found this question which is similar to your problem. The short version is, Safari think it is right and won’t set a cookie from ajax request.

There are some workarounds on the answer, but I will also say one that comes to my mind

You could probably fetch manually the header from the response of you call and set the value using javascript, I don’t know if it will work but it would be something like (using fetch api)

function onSuccess(response) {
  let cookieHeader = response.headers.get('set-cookie'); // or if decided other header name
  document.cookie = cookieHeader;
}

fetch('myurl', {method: 'POST'}).then(onSuccess)

more details on how to manipulate cookies with JS you can find here.

[Siel]

Thank you for your response, but as I’m setting the cookie as htmlOnly, it cannot be accessed from javascript, In my case Axios cannot reach it.

[blatyo]

Looks like you’re using CORS.

I’m not certain this is necessary, but I believe you need to specify the Access-Control-Expose-Headers header to include Set-Cookie, which is not one of the defaults. Same with the Access-Control-Allow-Headers header and Cookie.

[jstlroot]

Hi @Siel,

Sorry for the huge delay.

I tested my authentication with Safari (had to install OSX on a Virtualbox VM, wasn’t a very fun experience XD) and it’s working fine.

Did you find a solution to your problem? What did you end up doing?

Cheers

[Siel]

Hi @jstlroot, Thank you! your post helped me a lot.

I finally worked it out, the problem were a safari’s security measurement, it prevents cross-site cookies to be saved, Finally just compiled the VueJs app and putted it into the phoenix app and now it’s working correctly.

Thank you all!

[sunno.14]

Could you tell me your solution please!?

[Siel]

Hi @sunno.14, I solved my problem just as I mentioned earlier, changed my development setup making phoenix serve the vue app, if you need more specific help just try to explain me the error you are getting.