how to implement csrf protection for cross domain requests

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