I'm working on an AngularJS webapp with a Laravel backend.
I want to enable CSRF protection with cross-domain requests. Is it possible?
$http reference in "Cross Site Request Forgery" says "The header will not be set for cross-domain requests"
Looking the Developer Tools logs I see that after the $http.post call the preflight request is sent (OPTION verb) and it has the XSRF-TOKEN cookies set, but the POST request has no cookies so I can't do:
$http.defaults.headers.post['X-CSRFToken'] = $cookies['XSRF-TOKEN'];
Any idea?
UPDATE:
#zeroflagL: I tried with
$http.defaults.headers.common.xsrfCookieName = 'XSRF-TOKEN';
$http.defaults.headers.common.xsrfHeaderName = 'X-XSRF-TOKEN';
And now in the Request headers of the POST I have:
xsrfCookieName:XSRF-TOKEN
xsrfHeaderName:X-XSRF-TOKEN
But the CSRF check is not passed (TokenMismatchException on the server).
I suppose that in the Request headers there should be the XSRF-TOKEN to work...
As zeroflagL said CSRF protection can't be applied to cross domain requests.
To reply to my question: no, it's not possible.
Related
I'm going through the following security tutorial and it configures a CsrfTokenRepository like this:
.csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
Is that all that is required to get Ajax requests working across all libraries? The Angular documentation for $http says that Angular reads the CSRF cookie that Spring provides and sets a corresponding a header when it makes requests. So I'm assuming it does this because the cookie will not automatically be included when sending Ajax requests?
[Update]
I read the article again and it says that the CSRF protection is provided by the header. So if I interpret that the right way it's the fact that the client is sending back the cookie value in a unique way that is different than it was sent in the first place that provides the CSRF protection. In other words the client receives the cookie and changes the way it is sent back, so that the server knows that the client is indeed in control of the cookie?
CSRF protection with Spring CookieCsrfTokenRepository works as follows:
Client makes a GET request to Server (Spring backend), e.g. request for the main page
Spring sends the response for GET request along with Set-cookie header which contains securely generated XSRF Token
Browser sets the cookie with XSRF Token
While sending state changing request (e.g. POST) the client (Angular) copies the cookie value to the HTTP request header
The request is sent with both header and cookie (browser attaches the cookie automaticaly)
Spring compares the header and the cookie values, if they are the same the request is accepted, otherwise 403 is returned to the client
Note that only state changing requests (POST, PUT, DELETE) are CSRF protected by default and only these need to be protected when API is properly designed (i.e. GET requests don't have side effects and modify the state of the app for example).
The method withHttpOnlyFalse allows angular to read XSRF cookie. Make sure that Angular makes XHR request with withCreddentials flag set to true.
I have two web apps, one for the Web UI in AngularJS and one for the REST webservices in Java. Both are deployed on separate domains.
The applications uses cookie for authentication. Whenever user enters a valid username and password, server returns a http only cookie back containing the token and that cookie is passed across all requests. I have enabled CORS on both apps, thats why the session cookie is working properly.
Now, I am trying to add CSRF protection for this. I was trying to use the csrf cookie where in the server will send the csrf cookie(not httponly) as part of REST response and the UI will read the value from the cookie and pass that in a csrf token header for the other REST calls.
The problem with this approach I am facing is that since the server is in different domain, I cannot read the cookie using $cookies in AngularJs. Is there a way to read a value of that cookie?
If not, then can I implement CSRF in some other way?
I also tried to implement the creation of the csrf cookie on the Web UI itself in the browser but the browser does not send the cookie to the webservice as its in different domain.
So, my question is how to implement csrf protection for this kind of situation?
You were on the right track with this:
I also tried to implement the creation of the csrf cookie on the Web UI itself in the browser but the browser does not send the cookie to the webservice as its in different domain.
The CSRF cookie isn't meant to be "sent" to the server, it is meant to be read by the client and then supplied in a custom HTTP request header. Forged GET requests (triggered by HTML tags such as <img src="">) from other domains cannot set custom headers, so this is how you assert that the request is coming from a javascript client on your domain.
Here is how you can implement the idea you were working on, imagine you have api.domain.com and ui.domain.com:
1) User loads the Angular client from ui.domain.com
2) User posts authentication information from Angular client to api.domain.com
2) Sever replies with an HttpOnly authentication cookie, called authCookie, and a custom header e.g. X-Auth-Cookie, where the value of this header is a unique value that is linked to the session that is identified by the authCookie
3) The Angular client reads the X-Auth-Cookie header value and stores that value in a XSRF-TOKEN cookie on its domain, ui.domain.com
So now you have:
XSRF-TOKEN cookie on ui.domain.com
authCookie cookie on api.domain.com
4) User makes a request of a protected resource on api.domain.com. The browser will automatically supply the authCookie value, and Angular will automatically send the X-XSRF-TOKEN header, and will send the value that it reads from the XSRF-TOKEN cookie
5) Your server asserts that the value of X-XSRF-TOKEN is linked to the same session that is identified by the value of the authCookie
I hope this helps! I've also written about token authentication for Angular, Token Based Authentication for Single Page Apps (SPAs) (Disclaimer: I work at at Stormpath)
Angularjs has built-in support for CSRF but unfortunately it doesn't work cross domain, so you have to build your own.
I managed to get it working by first returning a random token in the headers and cookies on the first request. In order to read the header you need to add it to Access-Control-Expose-Headers. This is then added to all posts
$http.get('url').
success(function(data, status, headers) {
$http.defaults.headers.post['X-XSRF-TOKEN'] = headers('XSRF-TOKEN');
});
Then on the server you can compare the cookie value with the value in the header to ensure they are the same.
$http docs : Angular provides a mechanism to counter XSRF. When performing XHR requests, but will not be set for cross-domain requests.
This is a small lib put together might help you https://github.com/pasupulaphani/angular-csrf-cross-domain
I have an angular application that retrieves data from an ASP.Net web api service.
The web api is hosted on a different domain.
The web api contains multiple URL's to query different types of data, for instance site2/api/Employees, site2/api/Managers, etc.
The web api has a global configuration, as it does normally, i.e. no special configurations are made for any specific controllers.
I have created different controllers in angularjs and for each controller there is a service(copy-pasted code, but I have checked and updated all the necessary references correctly).
When I access site2/api/Employees from my angular code in site1, data is returned from the web api service.
However, when I access /site2/api/Managers from my angular code I get an error OPTIONS:/site2/api/Managers 404 not found
XMLHttpRequest cannot load /site2/api/Managers invalid status code 404
Could someone please,provide a solution for this issue
is i am not angularjs user but i can help you in cors
The cors request works when browsers allow cross-domain request.
One way is to Allow Cors request is through client browser
(jquery) jQuery.support.cors = true this line would be help full if
you are aiming IE Only
For Enabling in other Browser you may check this javscript
Another way is to set HTTP responses header to all access to Cors from server side
below is my php code to all access to Cors through HTTP responses header
<?php
header('Access-Control-Allow-Origin: http://yourdomain.com');
header('Access-Control-Allow-Methods: POST, GET, OPTIONS, PUT, DELETE');
header('Access-Control-Allow-Headers', 'Content-Type');
i hope this may help you..
I'm making a call to the WebApi service, which sets the cookie in the response object.
The call is made from angularjs via $resource
So this is the server code:
CookieHeaderValue cookie = new CookieHeaderValue("Token", "blah") { HttpOnly = true, Expires = DateTime.Now.AddYears(10), Path="/" };
response.Headers.AddCookies(new CookieHeaderValue[] { cookie });
This works, I can see the Set-Cookie header in a response, however the cookie is not being set.
A friend of mine had to set xhrFields' withCredentials to true when he was using jQuery, so I wonder if there's something that needs to be configured in angular as well ?
There could be a number of things going on.
First, since you are on separate domains, you may need to implement CORs (cross origin resource sharing), but it seems that the request is being made successfully. I'm not sure why that works, I would think that browsers would prevent it. In any case here's a jsfiddle that illustrates using CORs with angularjs to make both $http & $resource requests. The trick seems to be to configure the $http service:
$http.defaults.useXDomain = true;
Another thought is that cookies from one domain, can't be accessed by another domain. Here is another question on cookies with angularjs, but the request and server seem to be on the same domain. Here is a discussion on cookie domains, and how they are applied.
If it's possible I would try to get the cookie request/response working on the same domain, and then move the client to another domain.
I am using AngularJS with Rails. I have the following request which updates users in bulk.
$http{
method: 'POST',
url: $scope.update_url,
params: {selected_ids: userIds}
}
This cannot be a 'GET' request due to restrictions in the length of the URL (http://support.microsoft.com/kb/208427)
But for 'POST' request, we need to have a CSRF authenticity token in the header.
How can we set the CSRF Token to the post request header?
You can set http headers as explained in the $http service.
You can set it up globally:
$httpProvider.defaults.headers.post['My-Header']='value' (or)
$http.defaults.headers.post['My-Header']='value';
or for a single request:
$http({
headers: {
'My-Header': 'value'
}
});
Here is an important quote from Angular:
Cross Site Request Forgery (XSRF) Protection XSRF is a technique by
which an unauthorized site can gain your user's private data. Angular
provides following mechanism to counter XSRF. When performing XHR
requests, the $http service reads a token from a cookie called
XSRF-TOKEN and sets it as the HTTP header X-XSRF-TOKEN. Since only
JavaScript that runs on your domain could read the cookie, your server
can be assured that the XHR came from JavaScript running on your
domain.
To take advantage of this, your server needs to set a token in a
JavaScript readable session cookie called XSRF-TOKEN on first HTTP GET
request. On subsequent non-GET requests the server can verify that the
cookie matches X-XSRF-TOKEN HTTP header, and therefore be sure that
only JavaScript running on your domain could have read the token. The
token must be unique for each user and must be verifiable by the
server (to prevent the JavaScript making up its own tokens). We
recommend that the token is a digest of your site's authentication
cookie with salt for added security.
If you're wondering how to actually set a XSRF-TOKEN cookie value in Rails this answer has an implementation Rails CSRF Protection + Angular.js: protect_from_forgery makes me to log out on POST
I recently faced the same issue and adding the gem angular_rails_js solved it. To my understanding it creates for every rails controller a cookie with the rails CSRF-TOKEN that will be catch (default $http behaviour) by angular $http.