csurf express.jsとトークンで上書きされた角、秘密

Question

私はexpress.jsと角度でプロジェクトに取り組んでいます。私は角ビューをロードするときに生成secretは、第2の要求にtokenによって上書きされることに気づいcsurfソースコードをデバッグするときhttps://github.com/expressjs/csurf

にreadmeファイルで説明したように、私はcsurfを実現しようとしました。従ってsecretとtokenは等しい。なぜそれが起こったのか、何が間違っているのかを理解するのに2日を費やしました。

あなたは何が間違っているのか分かり、私を助けることができますか？

これは私のexpress.js構成

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) => { 
    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,() => console.log(`Running on localhost:${port}`)); 

と@arthurr

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<Response> { 
    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 => res.json()).toPromise(); 
    } 
} 

Answer 1

バックエンドのAPIを呼び出す角度サービスである -

私は徹底的に見えたが、まず最初にしていませんあなたが設定した場所が目立ちます：

// Send all other requests to the Angular app 
app.get('*', csrfProtection, (req, res) => { 
    const cookie = req.csrfToken(); 
    console.log("COOKIE", cookie); 
    res.cookie('XSRF-TOKEN', cookie); 
    res.sendFile(path.join(__dirname, 'dist/index.html')); 
}); 

誰かが間違っていると私を修正しますが、req.csrfToken（）メソッドは秘密からトークンを生成しています。このトークンを送信するフォームに埋め込みます。それを秘密と比較します（上記のようにクッキーモードを使用している場合、クッキーとしてクライアントに保存されます。これはXSRF-TOKENという名前です）。

一見すると、ヘッダーにcsurf TOKENを正しく送信するのではなく、csurf COOKIE（要求によって送信しないでください）を送信しようとしているという問題があります。

これは間違っていますか？