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?
Related
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
I've been trying to access the Set-Cookie value from the response headers. I have went through a lot of questions on here and also through other forums. The cookie is not 'HTTPOnly', SameSite: None, Secure: True.
I'm trying to make a post request, response status is 302(Redirect) and also the response body(in PostMan) is {redirect: '/next/', someId: 'random_id_value'}.
However no matter how much I try to access the set-cookie, I'm failing at it.
I have used the CORS extension as well. Changed 'withCredentials: true', "credentials: 'include'". Used a proxy too. Also, I'm using localhost:3000 to render the page in my react dev server.
Really hoping that someone could give me a solution to access the set-cookie.
In accordance with the Fetch standard, client code cannot read Set-Cookie response headers, even if the server happens to be configured for CORS and lists Set-Header in its responses' Access-Control-Expose-Headers header. See this section of the standard:
A forbidden response-header name is a header name that is a byte-case-insensitive match for one of:
Set-Cookie
Set-Cookie2
and further down:
A CORS-safelisted response-header name[...] is a header name that is a
byte-case-insensitive match for one of
[...]
Any item in [Access-Control-Expose-Headers] that is not a forbidden response-header name.
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
This is my fetch request:
fetch(`${process.env.REACT_APP_API_DOMAIN}/auth/user/full`, { method: "GET", credentials: "include" })
It should send my session cookies, but im getting this error in the request cookies on network tab in chrome:
This means my backend doesn't recieve the cookie and thinks the user is not authenticated.
So it was my backend cookie settings. I tried to set sameSite: false (what it says in the docs of cookie) but turns out proper way is sameSite: "none". The library i use is cookie-session which refer you to cookie docs for sameSite.
I'm doing a /login POST request with the flag withCredentials = true. And the response is the expected and if I inspect with Chrome Dev Tools -> Network I can see a response header named Set-Cookie with this content:
Set-Cookie:JSESSIONID=1944a870623c3499ea938df17a5g; Path=/; Secure; HttpOnly
But...
The cookie is not created in the browser 😅 (if I refresh the page neither). BTW: in Postman the cookie is created...
I'm doing the requests via Angular v.2.4.2
In theory the cookie will be created automatically, isn't it? BTW I can't access neither to the Set-Cookie response header:
const options = new RequestOptions({ headers, withCredentials: true });
const body = `username=${username}&password=${password}`;
return this.http.post(`${host}${basePath}/login`, body, options)
.do(r => {
console.log(r.headers.get('Set-Cookie')); // Nothing… :( Only I can access to Content-Type header
})
.map(r => r.json())
I imagine that this is normal if in theory the cookie will be created automatically, but is not created....
Why the cookie is not created? How can I solve it?
Thank you so much! 😊
The fact, that you can't access cookie via javascript, does not mean it is not created.
Http-only cookie CAN'T be reached from javascript (this is protection against XSS attack)
Your browser will send given cookie automatically with every request which contains withCredentials: true.
I had similar problem few days ago. Take a look here:
Angular2 http post - how to send Authorization header?
Unable to exchange cookie between Spring and Angular2
More about httponly cookies and XSS
https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#Secure_and_HttpOnly_cookies
https://www.owasp.org/index.php/HttpOnly
https://www.owasp.org/index.php/Cross-site_Scripting_(XSS)