Develop Reference

I created an api in express, and a page in react to consume this api, but the page is not sending the cookie in headers [duplicate]

I am trying to send Cookies to a PHP Script within a javascript fetch CORS request. The Request starts on https://sub1.example.com and contains the following options:
let response = await fetch('https://sub2.example.com/target.php', {
method: "POST",
headers: headers,
body: formData,
mode: 'cors',
credentials: 'include',
cache: 'no-store'
});
The corresponding PHP Script sets the following Headers:
header('Access-Control-Allow-Origin: https://www.example.com');
header('Access-Control-Allow-Methods: POST, OPTIONS');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Headers: Origin, Content-Type, Accept, Authorization, X-Request-With, Set-Cookie, Cookie, Bearer');
But the Cookie Header is not send with the request. I also tried:
let headers = new Headers();
headers.set('Cookie', document.cookie);
That also had no effect. What exactly am I doing wrong here?
I checked the Network Tab in the Development Tools. Also $_COOKIE in the PHP Script is empty. There is absolutely no error. I can also see that the Cookie Header is sent in any not CORS fetch request.
EDIT: Here are the Settings of one of the Cookies:
Name: PHPSESSID
Path: /
Secure: true
SameSite: none
I can't share the Domain because it's not public. But the Cookie Domain has the same Value as the Origin in the Request Header (Minus the https://).
EDIT 2: Changed the fetch URL to make clearer what's happening.

Problem
Be aware that, depending on
the value of the cookie's Path attribute,
the effective value of the cookie's Domain attribute,
the value of the cookie's Secure attribute,
the effective value of the cookie's SameSite attribute,
the request's issuing and destination origins,
a cookie may or may not be attached to the request. Of particular relevance to your case is the Domain attribute; check out MDN's page on the topic:
The Domain attribute specifies which hosts can receive a cookie. If unspecified, the attribute defaults to the same host that set the cookie, excluding subdomains. If Domain is specified, then subdomains are always included. Therefore, specifying Domain is less restrictive than omitting it. However, it can be helpful when subdomains need to share information about a user.
You're setting the cookie as follows on origin https://sub1.example.com:
Set-Cookie: PHPSESSID=whatever; Path=/; SameSite=None; Secure
Therefore, that cookie will get attached to (credentialed) requests whose destination origin is https://sub1.example.com, and no other.
Solution
If you want your cookie to be sent to all secure origins whose domain is an example.com subdomain, you need to explicitly set its Domain to example.com.
About sending cookies with fetch
The Fetch standard specifies a list of forbidden header names; Cookie is one of them. You cannot set a header named Cookie on a request sent with fetch; the standard simply forbids it. If you want to attach existing cookies to a cross-origin request, use the 'include' value for the credentials parameter passed in fetch options.

Cookies normally are not supposed to be attached to preflight requests in CORS mode. You might want to check this out.
Note: Browsers should not send credentials in preflight requests irrespective of this setting. For more information see: CORS > Requests with credentials.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

These are the conditions that need to be met in order for the browser to save and then use cookies initiated using fetch:
Client initializes asynchronously a fetch request with credentials: 'include'. See [here][1] for more details.
To do CORS, server response header must contain Access-Control-Allow-Origin explicitly set to a domain, could be different from the server domain. For example, in a Single-Page-App architecture, your frontend site is temporarily hosted at localhost:3000 and your backend server hosted at localhost:8000, then the header should be Access-Control-Allow-Origin: http://localhost:3000. See [here][2] and [here][3].
To allow client to process cookies, which is obviously a sensitive resource, server response header must further contain Access-Control-Allow-Credentials: true. See [here][4]. Note that this enforces a non-wildcard setting for Access-Control-Allow-Origin. See [here][6] - that's why in point 2 above, it has to be explicitly set to something like http://localhost:3000 rather than *
When server sets the cookie, it has to include SameSite=None; Secure; HttpOnly. So overall something like Set-Cookie: session_id=12345; SameSite=None; Secure; HttpOnly. SameSite seems to be a relatively [new requirement][5] in latest browsers, and must be used with Secure together when SameSite is set to None.
With regard to HttpOnly, I haven't found relevant materials, but in my experiment, omitting it caused the browser to ignore the Set-Cookie header.
Further requests to the backend server also must have credentials: 'include' set.
Source: https://stackoverflow.com/a/67001424/368691

Response cookie not being set in browser

I have an express app set up that can authenticate users and generates a JWT, and now I want it to save as a httpcookie, but the cookie sent in the response, visible under network in the browser, is not saved in the browser, if I check under application>cookies, so I cannot then use it to verify another request to the app.
res.cookie("token", thetoken, {httpOnly:true, sameSite:"Lax", expires: new Date(Date.now() + 14 * 86400000)});
The cookie is only 165 bytes so it's definitely not too big, and since the browser is receiving the cookie in the response for the fetch, it should be able to set it too?
Edit: I added credentials: "include" and the relevant CORS header, and now the cookie is visible, received and set, but gets removed when the page refreshes, so is as useful as no cookie at all (so something else is at issue as well?)

I was not using credentials: "include" in my fetch arguments, and this CORS header: res.header("Access-Control-Allow-Credentials", "true");, which is necessary in order for a cookie to be set from a 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 to send cookie and redirect at same time in response ? (serverless framework)

Below is code i used to set cookie and redirect link at a single response but only either will work. If statusCode is 301/302 the redirection is happening but cookie is not set. If statusCode is 200 cookie is set but redirect is not working. Does anyone know how to use both in a single request ? Should i change the StatusCode some status code dont allow setting cookie ?
const response = {
statusCode: 302,
headers: {
"Access-Control-Allow-Origin" : "*",
"Access-Control-Allow-Credentials" : true,
"Set-Cookie": 'data='+data,
"Location":"http://localhost:8040/#/dashboard",
},
body: JSON.stringify({
message: data,
}),
};
callback(null, response);
I am using serverless framework of nodejs.
Here is a screenshot of the response
But in cookie noting is der

Browsers won't accept a cookie for a completely different domain than the request was sent to. So, if you're redirecting to a new domain, you can't set a cookie for that new domain.
The domain part of the cookie works only for domains that have the same root domain, but differ only in subdomain.
This is taken from RFC 6265:
The user agent will reject cookies unless the Domain attribute
specifies a scope for the cookie that would include the origin server.
For example, the user agent will accept a cookie with a Domain
attribute of "example.com" or of "foo.example.com" from
foo.example.com, but the user agent will not accept a cookie with a
Domain attribute of "bar.example.com" or of "baz.foo.example.com".
So, to recap. You can't set a cookie from your server for a completely different domain and the domain attribute in the cookie won't save you either. Under specialized circumstances, you can set a cookie for a different domain that is different only in sub-domain (e.g. shares the same root domain).
FYI, if your cookie every did get set appropriately, you'd have to change this:
"Set-Cookie": 'data='+data,
to this:
"Set-Cookie": 'data=' + JSON.stringify(data),
to properly serialize your object.

You're setting your cookie equal to data=[Object object] not the actual information.
You need to serialize your data object in that string.

Set-Cookie in HTTP header is ignored with AngularJS

I'm working on an application based on AngularJS on client side and Java for my API (Tomcat + Jersey for WS) on server side.
Some path of my API are restricted, if the user doesn't have a session the response status returned is 401. On the client side, 401 http status are intercepted to redirect the user to the login page.
Once the user is authenticated, I create a session on the server side httpRequest.getSession(true);
and the response send to the client does have the Set-cookie instruction in its header :
Set-Cookie:JSESSIONID=XXXXXXXXXXXXXXXXXXXXX; Domain=localhost; Path=/api/; HttpOnly
The problem is that the cookie is never put on the client side. When I inspect cookie for localhost domain it's empty, so the next requests don't have this cookie in their header and client side still couldn't access to the restricted path of my API.
The client and the server are on the same domain but they don't have the same path and the same port number :
Client : http://localhost:8000/app/index.html
Server : http://localhost:8080/api/restricted/
Additional info : CORS is enabled on the both side :
"Access-Control-Allow-Methods", "GET, POST, OPTIONS"
"Access-Control-Allow-Origin", "*"
"Access-Control-Allow-Credentials", true
Any idea for making the Set-cookie works properly ?
Is it an AngularJS related issue ?

I found an issue in AngularJS that help me to move forward.
It seems that "Access-Control-Allow-Credentials" : true was not set on the client side.
Instruction $httpProvider.defaults.withCredentials = true was ignored.
I replace $resource call by a simple $http call with {withCredentials:true} in the config parameter.

I've managed to solve an issue very similar to yours.
My Play! backend tried to set a session Cookie which I could not catch in Angular or store via browser.
Actually the solution involved a bit of this and a bit of that.
Assuming you've solved the initial issue, which can be solved only by adding a specific domain to the Access-Control-Allow-Origin and removing the wildcard, the next steps are:
You have to remove the HTTP-Only from the Set-Cookie header, otherwise you will never be able to receive a cookie "generated" by your angular code
This setup will already work in Firefox, though not in Chrome
To make it work for Chrome too, you need to:
a) send a different domain from localhost in the cookie, using the domain your WS are "hosted". You can even use wildcards like .domain.com instead of ws.domain.com
b) then you'll need to make a call to the domain you specified in the cookie, otherwise Chrome won't store your cookie
[optional] I would remove that /api path in favor of a /
And that should to the trick.
Hope to have been of some help

In your post request on the client side, make sure to add the following:
For jquery ajax requests:
$.ajax({
url: "http://yoururlgoeshere",
type: "post",
data: "somedata",
xhrFields: {
withCredentials: true
}
});
With Angular's $http service :
$http.post("http://yoururlgoeshere", "somedata", {
withCredentials: true
});

You need work on both the server and client side.
Client
Set $http config withCredentials to true in one of the following ways:
Per request
var config = {withCredentials: true};
$http.post(url, config);
For all requests
angular.module("your_module_name").config(['$httpProvider',
function($httpProvider) {
$httpProvider.interceptors.push(['$q',
function($q) {
return {
request: function(config) {
config.withCredentials = true;
return config;
}
};
}
]);
}
]);
Server
Set the response header Access-Control-Allow-Credentials to true.

The addition HttpOnly means that the browser should not let plugins and JavaScript see the cookie. This is a recent convention for securer browsing. Should be used for J_SESSIONID but maybe not here.

Just solved a problem like this.
I was doing this and not working...:
$cookies.put('JSESSIONID', response.data);
Cookies are saved in the browser, but when I sent a new request, all the cookies were sent exept mine. (my cookie is JSESSIONID)
then i look in the chrome inspector and i found this:
THE PROBLEM IS THAT WAS NOT THE CORRECT PATH!!!
then I tried this and my cookies were sent. yay! :
$cookies.put('JSESSIONID', response.data, {'path':'/'});
I do not know if this is your case, but this worked for me.
regards!