Develop Reference

How withCredentials works?

I want to send httpOnly cookies in request's header. I found that I can use withCredentials: true but I can't found information (with example) how it works. How does request know which cookie it must send. If I created instance (axios.create()) and i made cookie after login it will work?

Why my web application (ReactJS) doesn't accept the cookies sent by backend?

I have a frontend web app made in ReactJS, and a backend made in HapiJS. Backend is running on http://localhost:3000 and frontend in http://localhost:1234.
I'm trying to implement authentication based on cookies. In my frontend, I'm doing the request for login (where I expect to get the cookies back) using Axios.
In my backend, I already have the code that set the cookies like this (I was setting a second cookie just for testing purposes):
//Config for user session cookie
server.auth.strategy('session', 'cookie', {
cookie: {
name: 'sid-example',
isSameSite: 'None',
path: '/',
password: 'password-should-be-32-characters',
isSecure: false,
isHttpOnly: false
},
...
}
//Config for a normal cookie
server.state('data', {
ttl: null,
isSecure: false,
isHttpOnly: false,
encoding: 'base64json',
clearInvalid: true,
strictHeader: true,
isSameSite: 'None',
path: '/'
});
//In my route's code where authentication takes place
//Set user session cookie
request.cookieAuth.set({ uuid });
//Set normal cookie
h.state('data', { foo: 'bar' });
When I do the request (login attempt), I can see in Chrome dev tools -> Network tab that the cookies are set and come as part of the response. In development, I'm not setting the cookies as httpOnly true nor secure, and this can be seen in the request details.
However, when I check the application cookies, I cannot see them. In the application tab in dev tools, I can see noo cookies (I already refreshed the tab).
It detects there are 2 cookies but they are not shown:
Also, if I attempt to make requests using Axios, expecting the cookie to be sent back to the server (to authorize the request), they are not sent (I'm using the flag withCredentials in Axios (as explained HERE). This can be seen in the Network tab as well (in the column cookies shows the count of cookies sent, while in Set Cookies the ones that are set either by the server or from the web app).
Also I already disabled (for testing purposes) the browser flags #same-site-by-default-cookies and #cookies-without-same-site-must-be-secure, as I'm not running it via HTTPS. Is there anything I'm missing that is preventing the browser to accept these cookies?

I had to use this setting in the backend:
SameSite = 'None'
Secure = True
(for localhost, Secure=True works, I guess)
On the client side, apart from including withCredentials: true in the subsequent requests, I had to include that in the initial login request as well, otherwise the browser doesn't consider the set-cookie headers in the response.

Replicating a browser https request in javascript

I'm trying to hit an API that needs a cookie to return data.
If i hit the url directly in the browser I get the data i want. The protocol is https.
However, whenever I try to fetch the data using window.fetch I run into CORS errors. I think this is happening because I cant get the cookie in the client request, which is causing the server to redirect to an auth server that is not sending back a CORS header.
I have tried using { credentials: 'include' } to no avail.
I was assuming that because the cookie exists in the browser it will be part of the request.
Any fundamental knowledge I'm missing here?

hmm this is a bit weird, by default fetch uses { credentials: 'same-origin' } which will allow cookies to be sent { credentials: 'include' } also will send cookies even if its not the same origin and that's the only difference.
what i am thinking here is that either somewhere in your code the cookie gets deleted somehow or your request is firing before the cookie is set, or the server doesn't allow CORS or it doesn't allow the OPTIONS method if its a different origin.

How do I use window.fetch() with httpOnly cookies or basic auth

I'm playing around with window.fetch() in Firefox and Chrome. For some reasons, fetch() doesn't send any cookies. Now that wouldn't be a problem, as I can send them using
fetch('/something', { headers: { Cookie: document.cookie } })
But this won't work for httpOnly cookies.

Okay, I found out after reading on the Mozilla Developer Network a bit more and trying out the credentials option.
Looks like the credentials option is what I should have looked for.
fetch('/something', { credentials: 'same-origin' }) // or 'include'
Will send the cookies.

There are three points here:
If you're making a cross-origin request, set the Access-Control-Allow-Credentials: true. So that the server accepts your cookies.
Set the credentials options either to include for cross-origin requests or same-origin for same-origin requests
Set the credentials option of fetch on both requests that you retrieve and send the cookie

Javascript: remove a cookie that was set by an ajax response

in my Webapp (that is running at localhost/myApp/), I have an ajax call like:
$.ajax({
type: "GET",
url: "http://localhost:8080/my.module/Login/login?user=abc&password=123",
xhrFields: {
withCredentials: true,
},
success: onResult,
error: onError,
});
to login on the server. The server responds with a boolean value if the login was successful and the response also contains this header:
Set-Cookie: JSESSIONID=167C57FA1E3529433938E744F7C4AC52; Path=/my.module
With the previously set xhrField "withCredentials: true", the browser automatically handles the cookie and appends the Cookie header in all following requests:
Cookie: JSESSIONID=167C57FA1E3529433938E744F7C4AC52
This works perfectly fine. But now I have the problem, that the server has a bug so it doesn't remove a session when calling the logout interface, a session can't be closed (and I don't have access to the server). In order to logout properly I would have to remove the session cookie on the client so I would get a new one from the server. But i can't find a way to access or remove the cookie, the document.cookie variable is empty in my webapp. I also tried to read the document.cookie variable from localhost/myApp/my.module/ and localhost/my.module/, but it is always empty. Another thing i tried was overwriting the cookie with
document.cookie = "JSESSIONID=ABC; Path=/my.module";
but the server requests still have the cookie from before. Can anyone tell me how i could remove it?
I know this solution would be a hack, but that's what I'm looking for, because the server programmers can't fix the bug in time and asked me to implement such a hack on the client.

"An HttpOnly cookie is not accessible via non-HTTP methods, such as calls via JavaScript " -http://en.wikipedia.org/wiki/HTTP_cookie#Secure_and_HttpOnly
First of all, the client javascript shouldn't care about the cookie.
When the server sees a login request, it creates a new cookie and calls Set-Cookie.
On receiving any other ajax request, server validates the current cookie, before serving the request.
On logout request, it will clear the cookie from its (server's) session info i.e. any further requests from the client with the same cookie will fail since its not in the server store.