title: csurf express.js and angular, secret overwritten by token
body: <p>I'm working on project with express.js and angular. I tried to implement csurf as explained in readme file on <a href="https://github.com/expressjs/csurf" rel="nofollow noreferrer">https://github.com/expressjs/csurf</a></p>
  
  <p>When I debug through <code>csurf</code> source code I noticed that <code>secret</code>, generated when loading angular view is overwritten by <code>token</code> in second request. So <code>secret</code> and <code>token</code> are equal. I spent two days figuring out why that happen and what am I doing wrong.</p>
  
  <p>Maybe you have idea what is wrong and can help me?</p>
  
  <p>this is my express.js configuration</p>
  
  <pre><code>const express = require('express');
  const cookieParser = require('cookie-parser');
  const bodyParser = require('body-parser');
  const path = require('path');
  const http = require('http');
  const csurf = require('csurf');
  
  const app = express();
  
  const csrfProtection = csurf({
    cookie: {
      key: 'XSRF-TOKEN',
      path: '/'
    }
  });
  
  // Parser
  app.use(cookieParser());
  app.use(bodyParser.urlencoded({
    extended: false
  }));
  // Angular DIST output folder
  app.use(express.static(path.join(__dirname, 'dist')));
  
  // API location
  app.use('/api', csrfProtection, bodyParser.json(), api);
  
  // Send all other requests to the Angular app
  app.get('*', csrfProtection, (req, res) =&gt; {
    const cookie = req.csrfToken();
    console.log("COOKIE", cookie);
    res.cookie('XSRF-TOKEN', cookie);
    res.sendFile(path.join(__dirname, 'dist/index.html'));
  });
  
  // Set port
  const port = process.env.PORT || 3000;
  app.set('port', port);
  
  const server = http.createServer(app);
  server.listen(port, () =&gt; console.log(`Running on localhost:${port}`));
  </code></pre>
  
  <p>and angular service which calls backend api</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { Http, Response, Headers } from '@angular/http';
  import 'rxjs/add/operator/toPromise';
  import 'rxjs/add/operator/map';
  
  import { AppService } from '../../shared/services';
  
  @Injectable()
  export class LoginService {
  
    constructor(private http: Http) { }
  
    login(cred: any): Promise&lt;Response&gt; {
      const HEADERS = new Headers();
      const csrfCookie = AppService.getCookie('XSRF-TOKEN');
      console.log(csrfCookie);
  
      if (csrfCookie) {
        HEADERS.append('csrf-token', csrfCookie);
      }
      console.log(HEADERS);
  
      return this.http.post('/api/login', JSON.stringify(cred), { headers: HEADERS })
        .map(res =&gt; res.json()).toPromise();
    }
  }
  </code></pre>