Update for angular 5.0+
Http service beign is deprecated in favor of HttpClient , the CookieXSRFStrategy class CookieXSRFStrategy also deprecated, now this mission is delegated to the HttpClientXsrfModule class. If you want to customize header and cookie names, you just need to import this module as follows:
@NgModule({ imports: [ HttpClientModule, HttpClientXsrfModule.withConfig({ cookieName: 'My-Xsrf-Cookie', headerName: 'My-Xsrf-Header', }), ] }) export class MyModule{}
For future readers:
Ajax Answer Files
You cannot access any cookie from any Ajax response, if you check the XHR specification , you will notice that any access to the match of the Set-Cookie headers is denied:
The forbidden response header name is the header name that matches the byte case for one of:
But my cookie is not httpOnly
Good for you, but httpOnly only states that your cookie cannot be accessed through document.cookie (see below).
API document.cookie
The only cookies you can access with javascript is document.cookie , but document.cookie refers to the cookie sent with the document (the page your script is running on) and will not be changed at any time . MDN clearly indicates the current document:
document.cookie
Get and set cookies associated with the current document. For a shared library, see this simple cookie structure.
Source: MDN
Any cookie set using an Ajax response is not relevant to the current document.
How do I implement csrf protection, then?
cookie to protect header markers is the way to go. Please note that the token you submit will be the same throughout the entire session, and it will not be changed in accordance with the wild Ajax requests sending cookies .
Web applications that use JavaScript for most of their operations can use the anti-CSRF method, which uses a policy of the same origin:
Upon logging in, the web application sets a cookie containing a random token that remains unchanged for the entire user session
Set-Cookie: Csrf-token=i8XNjC4b8KVok4uw5RftR38Wgp2BFwql; expires=Thu, 23-Jul-2015 10:25:33 GMT; Max-Age=31449600; Path=/
Client-side JavaScript reads its value and copies it to the custom HTTP header sent with each transaction request
X-Csrf-Token: i8XNjC4b8KVok4uw5RftR38Wgp2BFwql
The server checks for the availability and integrity of the token
The security of this method is based on the assumption that only JavaScript running in the same source can read the cookie value. JavaScript running from a fraudulent file or email will not be able to read it and copy to a custom header. Although the csrf-token cookie will be automatically sent requesting an exile, the server still expects a valid X-Csrf-Token header.
Source: Wikipedia: CSRF
With angular 2+, this mission is accomplished by the CookieXSRFStrategy class.
Original answer
How and where can I access the x-csrf token and how to add it to my requests?
Using CookieXSRFStrategy like adding it to your request. Unfortunately, the answer may be “you cannot” (see below).
What is CookieXSRFStrategy ('x-csrf token', 'x-csrf token'); I definitely do. I don’t like the feeling of a black box / understand how his documents explained.
CookieXSRFStrategy
export class CookieXSRFStrategy implements XSRFStrategy { constructor( private _cookieName: string = 'XSRF-TOKEN', private _headerName: string = 'X-XSRF-TOKEN') {} configureRequest(req: Request): void { const xsrfToken = getDOM().getCookie(this._cookieName); if (xsrfToken) { req.headers.set(this._headerName, xsrfToken); } } }
A source
Basically, it reads the cookie from document.cookie and changes the Request headers accordingly.
Right now I am sending a cookie to a server with sessionid and csrf token, but what sends it? CookieXSRFStrategy or 'withCredentials' flag.
This withCredentials flag indicates that XHR should send all cookies sent (even those that were previously set using the Ajax response, but as cookies, not headers ), and there is no way to change this behavior)
It does not set the title in my case ... but why?
The cookie you are talking about is not sent with a document ( index.html ), but from another ajax request. The fact is that you cannot access the cookies set with the ajax response ( see this answer ), as this will be a security issue: a simple ajax on www.stackoverflow.com will receive a cookie from an arbitrary web page, and an attacker can easily steal it (if the header Access-Control-Allow-Origin: * present in the stackoverflow response).
On the other hand, the document.cookie API can only access cookies that are set when the document loads, and not others.
So, you should rethink the flow of interaction with the client and server on the server side, because the only cookie that you can copy to the headers is the one sent with the document, your script running (index.html).
it is not a httpOnly cookie, so it should be accessible with js, even if it is X origin
httpOnly makes cookies unavailable for the document.cookie API , but , as I told you, document.cookie refers to the file that was sent with the document, and not those sent via Ajax responses . You can make thousands of ajax calls with the Set-Cookie header in the response, document.cookie will still be the same line without any changes.
Billion dollar solution
The server should send only one x-csrf-token cookie containing the token along with the document, and you should use this token, which will be valid for the entire session for each request, using CookieXSRFStrategy . What for? because this is how it works .