Will a cookie with the HttpOnly and Secure attributes be sent using Fetch API in case {credentials: "include"} is present in options?
fetch("https://some.url", {
mode: "same-origin",
credentials: "include",
redirect: "manual"
})
There are several conditions that have to be met, but yes they are.
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
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 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
Recently due to Chrome 80, it has been noted that cookies without the SameSite=None and Secure attributes will not get set in Chrome browsers.
Currently, I use the Flask-JWT-Extended library to generate my cookies for my backend, but even though it has the samesite=None in the set_cookies function the cookies still do not get set in the browser.
I sent the request with Postman and viewed my cookie and got the below cookie:
access_token_cookie=my_token; Path=/; Domain=127.0.0.1; Secure; HttpOnly;
I have tried manually setting the headers with:
resp.headers.add('Set-Cookie', 'access_token_cookie=bar; SameSite=None; Secure')
But even after setting the cookie manually, I still get the following cookie with no SameSite attribute:
access_token_cookie=bar; Path=/user; Domain=127.0.0.1; Secure;
I'm wondering if there is a way to set the SameSite attribute within the cookies right now.
Edit
This is the code that I have for the site.
List item
access_token = create_access_token(identity=user.username)
resp = jsonify({"username": user.username,
"user_type": user.roles
})
resp.headers.add('Set-Cookie', 'access_token_cookie=' + access_token + '; SameSite=None; Secure')
return resp
Chrome ignores cookies marked as Secure that was received via insecure channel.
So, you can either test this via https or remove the Secure attribute
In order to do this, I use make_response without any Flask plugins:
from flask import make_response, render_template
resp = make_response(render_template("index.html"))
resp.set_cookie('pwd', pwd, samesite="Lax")
The important part is resp.set_cookie('pwd', pwd, samesite="Lax"). The samesite argument lets you set the SameSite of the cookie.
You're correct in thinking that Chrome now requires cookies marked SameSite=None to also be marked Secure:
Any cookie that requests SameSite=None but is not marked Secure will be rejected.
However, the Domain you specify for your cookie (127.0.0.1) indicates that the request's server origin is an insecure one (i.e. using the http scheme), and you should be aware that, due to a feature known as Strict Secure Cookies, attempts to set a Secure cookie from an insecure origin fail in Chrome 58+:
This adds restrictions on cookies marked with the 'Secure' attribute. Currently, Secure cookies cannot be accessed by insecure (e.g. HTTP) origins. However, insecure origins can still add Secure cookies, delete them, or indirectly evict them. This feature modifies the cookie jar so that insecure origins cannot in any way touch Secure cookies.
Therefore, if you want to set a cookie marked SameSite=None in modern Chrome, the origin needs to be secure (i.e. use the https scheme).
I'm using fetch to do a request to the backend.
The cookie ISN'T set when I use a different domain.
The cookie IS set when I use the same domain.
Why is it not being set?
I modified my /etc/hosts file to use pseudonymns to test using the same and different domain, and made sure they are not blacklisted by the browser either.
If I use local-test-frontend.com for both the browser and server domain it works, but if I change the backend url to local-test-backend.com it fails.
*Note that my front end url I test it from is * http://local-test-frontend.com:3000/login
Javascript
fetch('http://local-test-backend.com/login', {
mode: 'cors',
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify(loginRequest),
credentials: 'include'
}).then(// Other code here.....
Server Response Headers
Access-Control-Allow-Credentials
true
Access-Control-Allow-Origin
http://local-test-frontend.com:3000
Content-Length
103
Content-Type
application/json
Date
Wed, 10 Jul 2019 07:23:49 GMT
Server
Werkzeug/0.15.1 Python/3.7.3
Set-Cookie
MY_TOKEN=a7b8ad50f19…end.com; Path=/; SameSite=Lax
As of 2021 with Edge 90.0.796.0 on Linux, I managed to set CORS cookie with the following approach:
Client initializes asynchronously a fetch request with credentials: 'include'. See here 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 and here.
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. Note that this enforces a non-wildcard setting for Access-Control-Allow-Origin. See here - 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 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.
I'm just trying to get a cookie set for my current domain by calling a server on a different domain.
You can't, at least not directly. Cookies belong to the origin that set them.
The closest you could come would be for the different domain to return the data in a non-Cookie format (such as the body of the response), and then to use client-side JS to store it using document.cookie.
I'm using both a front-end and a back-end application on a different domain with a session-based authorization. I have setup a working CORS configuration, which works as expected on localhost (e.g. from port :9000 to port :8080). As soon as I deploy the applications on secure domains (both domains only allow HTTPS), the CSRF cookie is not accessible anymore within JavaScript, leading to an incorrect follow-up request of the front-end (missing the CSRF header).
The cookie is set by the back-end in the Set-Cookie header without using the HttpOnly flag. It is actually set somewhere in the browser, because the follow-up request contains both the session cookie and the CSRF cookie. Trying to access it by JavaScript (using e.g. document.cookie in the console) returns an empty string. The DevTools of Chrome do not show any cookies on the front-end domain (the back-end domain is not even listed).
I'm expecting the cookie to be set and being visible on the current domain (front-end domain). I'm using the withCredentials flag of the axios library.
Do you have any idea, why the cookie cannot be accessed from JavaScript nor from the DevTools in Chrome? Does this have anything to do with the Strict-Transport-Security header?
Headers
1. Initial GET Response Header
HTTP/1.1 401 Unauthorized
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://[my-frontend-domain]
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Encoding: gzip
Content-Type: application/json;charset=UTF-8
Date: Wed, 20 Sep 2017 11:57:07 GMT
Expires: 0
Pragma: no-cache
Server: Apache-Coyote/1.1
Set-Cookie: CSRF-TOKEN=[some-token]; Path=/
Vary: Origin,Accept-Encoding
X-Content-Type-Options: nosniff
X-Vcap-Request-Id: [some-token]
X-Xss-Protection: 1; mode=block
Content-Length: [some-length]
Strict-Transport-Security: max-age=15768000; includeSubDomains
2. Follow-up POST Request Header
POST /api/authentication HTTP/1.1
Host: [my-backend-host]
Connection: keep-alive
Content-Length: [some-length]
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json, text/plain, */*
Origin: [my-frontend-host]
User-Agent: [Google-Chrome-User-Agent]
Content-Type: application/x-www-form-urlencoded
DNT: 1
Referer: [my-frontend-host]
Accept-Encoding: gzip, deflate, br
Accept-Language: de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4,de-CH;q=0.2,it;q=0.2
Cookie: [some-other-cookies]; CSRF-TOKEN=[same-token-as-in-the-previous-request]
This request should contain a CSRF header which would automatically be added if the cookie was accessible with JavaScript.
TL;DR: Read-access to cross-domain cookies is not possible. Adding the CSRF token to the response header would be a solution. Another solution to completely circumvent CORS & cross-domain requests would be to use a reverse proxy.
Problem
As stated in my question above, the JavaScript part of my front-end (e.g. https://example1.com is trying to access a non-HttpOnly cookie from my back-end on e.g. https://example2.com. To be able to access a remote API with JavaScript, I'm using CORS. This allows the requests to go through. I'm using withCredentials: true on the front-end side and Access-Control-Allow-Credentials: true on the back-end side. The Set-Cookie header then sets the cookie on the back-end origin and not on the front-end origin. Therefore, the cookie is neither visible in the DevTools nor in the document.cookie command in JavaScript.
Cookies, set on the back-end origin, are always part of a request to the back-end via CORS. I would, however, need access to the content of the CSRF cookie to add the token into the request header (to prevent CSRF attacks). As I found out, there is no way to read (or write) cookies from a different domain with JavaScript – no matter what CORS setting is used (see these StackOverflow answers: [1], [2]). The browser restricts access to the content of a cookie to same-domain origins.
Solutions
This leads to the conclusion, that there is no possibility to access the contents of a non-HttpOnly cookie of a different domain. A workaround for this issue would be to set the CSRF token into an additional, custom response header. Those headers can usually also not be accessed by a different domain. They can however be exposed by the back-end's CORS setting Access-Control-Expose-Headers. This is secure, as long as one uses a strictly limited Access-Control-Allow-Origin header.
Another workaround would be to use a reverse proxy, which circumvents the issues with CORS and cross-domain requests at all. Using such a reverse proxy provides a special path on the front-end, which will be redirected to the back-end (server-side). For example, calls to https://front-end/api are proxied to https://back-end/api. Because all requests from the front-end are made to the front-end proxy on the same domain, the browser treats every call as a same-domain request and cookies are directly set on the front-end origin. Drawbacks of this solution comprise potential performance issues because of another server being in-between (delays) and the cookies need to be set on two origins (login twice when directly accessing the back-end). Setting up a reverse proxy can be done with nginx, apache or also very easy by using http-proxy-middleware in Node.js:
var express = require('express');
var proxy = require('http-proxy-middleware');
var options = {
target: 'https://[server]',
changeOrigin: true,
secure: true
};
var exampleProxy = proxy(options);
var app = express();
app.use('/api', exampleProxy);
app.use(express.static(__dirname + "/public"));
app.listen(process.env.PORT || 8080);
In short, it is not possible to access cross-origin cookies, document.cookie can only access the current (or parent) domain cookies.
The hint for that being the root cause, was ssc-hrep3 mentioning "both domains" in his question.
It's very to easy to make that mistake when switching from a localhost deployment, using only different ports for back-end and front-end servers, to one that uses two different hosts. That will work locally, because cookies are shared across ports, and will fail when two different hosts are used. (Unlike some other CORS issues that will be also exposed locally)
See ssc-hrep3's answer for more information and a workaround.
1
You may need to add Access-Control-Allow-Headers header to allow passing of specific headers.
Please try to add following into your server response headers (OPTIONS method) for testing purposes
Access-Control-Allow-Headers: Content-Type, *
In production I recomend to limit headers as following (but I'm not 100% sure in correct header list, need to experiment here if it works)
Access-Control-Allow-Headers: Cookie, Set-Cookie
See this for the reference https://quickleft.com/blog/cookies-with-my-cors/
2
Another problem that you may experince is that you cookies will be set on that domain where your backend service located (not on the domain you querying from)
Please check this also
3
As an option of last problem - browser can prohibit setting cookie for domain b.xxx.com from request which comes from a.xxx.com
In this case you may try to set cookie on the parent domain xxx.com, so it will be available for your client side
As you can read here, the XHR specification explictily disallows reading Set-Cookie. The best way to do it would be to pass information in a header instead of a cookie.