title: ng2 get csrf token from cookie post it as header
body: <p>After spending 2 full days searching the web and reading docs and tons of open questions of people facing the same problem, i still don't grasp how Angular 2 handles the (x-origin) cookies and how to access them. </p>
  
  <p><strong>The problem:</strong>
  Back-end sends 2 cookies with x-csrf-token &amp; JSESSIONID inside of it. My job is to keep the csrf token in memory (ng2) and send it (only) back as <strong>header</strong> (not cookie) with every post to the back-end.</p>
  
  <pre><code>HTTP/1.1 200 OK
  Server: Apache-Coyote/1.1
  Access-Control-Allow-Origin: http://localhost:4200
  Access-Control-Allow-Credentials: true
  Access-Control-Expose-Headers: Access-Control-Allow-Origin,Access-Control-Allow-Credentials
  Set-Cookie: x-csrf-token=8555257a-396f-43ac-8587-c6d489e76026; Path=/app
  Set-Cookie: JSESSIONID=73E38392C60370E38FBAF80143ECE212; Path=/app/; HttpOnly
  Expires: Thu, 12 Apr 2018 07:49:02 GMT
  Cache-Control: max-age=31536000
  Content-Type: application/json;charset=UTF-8
  Transfer-Encoding: chunked
  Date: Wed, 12 Apr 2017 07:49:02 GMT
  </code></pre>
  
  <p><strong>My partial solution:</strong>
  I created a custom RequesstOptions class that extends the BaseRequestOptions. Added some extra headers, and set the 'withCredentials' as true.</p>
  
  <pre class="lang-js prettyprint-override"><code>export class MyRequestOptions extends BaseRequestOptions {
  
    headers: Headers = new Headers({
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    });
  
    withCredentials = true;
  }
  </code></pre>
  
  <p>In my HttpService i do the post and get like so:</p>
  
  <pre class="lang-js prettyprint-override"><code>@Injectable()
  export class HttpService {
  
    constructor(
      protected _http: Http,
      protected requestOptions: RequestOptions
    ) {  }
  
    get(url): Observable&lt;any&gt; {
      return this._http.get(url, this.requestOptions).map( res =&gt; res.json() );
    }
  
    post(url: string, object: any): Observable&lt;any&gt; {
      return this._http.post(url, object, this.requestOptions).map( res =&gt; res.json() );
    }
  }
  </code></pre>
  
  <p>and in my app.module i do the magic like so:</p>
  
  <pre class="lang-js prettyprint-override"><code> providers: [
      { provide: RequestOptions, useClass: DocumentumDefaultRequestOptions },
      { provide: XSRFStrategy, useFactory: xsrfFactory }
    ],
  </code></pre>
  
  <p>my xsrfFactory</p>
  
  <pre class="lang-js prettyprint-override"><code>export function xsrfFactory() {
    return new CookieXSRFStrategy('x-csrf-token', 'x-csrf-token');
  }
  </code></pre>
  
  <p><strong>My partial result:</strong> 
  At this point angular sends a cookie with every request (GET and POST without discrimination) with the jsessionid and x-csrf-token like so:</p>
  
  <pre><code>POST /app/business-objects/business-objects-type HTTP/1.1
  Host: localhost:8040
  Connection: keep-alive
  Content-Length: 26
  Pragma: no-cache
  Cache-Control: no-cache
  Authorization: Basic ZG1hZG1pbjphZG1pbg==
  Origin: http://localhost:4200
  User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
  Content-Type: application/json
  Accept: application/json
  Referer: http://localhost:4200/page
  Cookie: JSESSIONID=B874C9A170EFC12BEB0EDD4266896F2A; x-csrf-token=0717876e-f402-4a1c-a31a-2d60e48509d3
  </code></pre>
  
  <p><strong>My billion dollar questions:</strong></p>
  
  <ul>
  <li>How and where do i access the x-csrf-token, and how do i add it to my requests?</li>
  <li>What does <code>CookieXSRFStrategy('x-csrf-token', 'x-csrf-token');</code> exactly do. I don't like the blackbox feeling / understand the way the docs explained it. Can i access it for data ?</li>
  </ul>
  
  <blockquote>
    <p>Before sending an HTTP request, the CookieXSRFStrategy looks for a cookie called XSRF-TOKEN and sets a header named X-XSRF-TOKEN with the value of that cookie.</p>
  </blockquote>
  
  <ul>
  <li><p>It doesn't set the header in my case ... but why ?</p></li>
  <li><p>Right now i'm sending the cookie to the backend with the sessionid and the csrf token but what is sending it? The CookieXSRFStrategy or 'withCredentials' flag.</p></li>
  </ul>
  
  <p><em>Please don't answer with one liner like "document.cookie". Data is useless without its metadata</em></p>