Node JS/Angular 2アプリケーション、ForbiddenError：無効なcsrfトークン

Question

私は、サーバ側でNode.js、フロントエンドでAngular 2を使ってサンプルアプリケーションを開発しています。 CSRF攻撃を防ぐために

、Iは以下 ヘッダ

router.get('/:id/products/:pid' , wrap(function *(req , res , next) { 

try 
{ 
    console.log('url' , req.url); 
    res.setHeader('_csrf', req.csrfToken()); 
    let product = yield category.getProduct(req , res , next); 
    res.send(product); 
} 
catch(err) 
{ 
    res.status(500).send(err); 
} 

})) 

"_csrf" のNode.jsルートセットの下ミドルウェア

// cookie parser 
app.use(cookieParser()); 

// express session middleware , this should be after cookie parser 
app.use(session({secret:'clickclick'})); 

app.use(session({ 
secret: 'clickclick', 
cookie: { 
    path:'/', 
    httpOnly:true, 
    maxAge:null 
} 
})); 

// CSRF middleware 
app.use(csurf()); 

を設定するために、関連するコードが "csurf" ミドルウェアを使用しています上記の経路 '/：id/products /：pid'は、以下のアンギュラ2サービス方法から呼び出されます。

// Get Product 
GetProduct(id:string, pid:string):Observable<Product> { 

    return this.http.get('./categories/' + id + '/products/' + pid) 
        .map(data =>{ let headers:Headers = data.headers; 
            this.csrfToken = headers.get('_csrf') ; 
           return data.json() }) 
        .catch(this.handleError); 
} 

このメソッドは、サーバーから返された_csrfヘッダーを "this.csrfToken"プロパティに割り当てます。

また、以下のサービスメソッドがAJAX POST要求を行う場合、上記メソッドで設定された "this.csrfToken"プロパティ値を使用し、ヘッダー "_csrf"値を設定します。

// Add an item to cart 
AddTocart(product:Product) 
{ 
    let item = { pid:product._id , name:product.name , price:product.price , qty:1 , total:product.price }; 
    //this.cart.push(item); 

    // make an AJAX call to save the item in server session 
    let url = './cart/add'; 
    let headers = new Headers({'Content-Type':'application/json' , '_csrf':this.csrfToken}); 
    let requestOptions = new RequestOptions({headers:headers}); 

    this.http.post(url , item , requestOptions) 
      .map(data => {         
          this.cart.push(item); 
          } 
      ) 
      .catch(this.handleError) 
      .subscribe(data => { });     

} 

以下はGetProductサービスメソッドのレスポンスヘッダーです。

以下は、 "AddTocart"サービスメソッドのリクエストヘッダーです。

"ForbiddenError：無効CSRFトークン" 原因となっているすべてのアイデアエラー。 詳細を提供する必要がある場合や、提供された情報が明確でない場合は、教えてください。

Answer 1

これは古い質問ですが、将来誰かがそれを見つけた場合に備えてここに追加しています。同様のプロジェクトに取り組んで同じエラーが発生したので、POSTリクエストにXSRF-TOKENヘッダーを追加して修正しました。その値は$.cookie("XSRF-TOKEN")（jqueryとCookieプラグインを使用）から取ったものです。ドキュメントによると、_csrfもうまくいくはずです。 the project pageから

：

The default value is a function that reads the token from the following locations, in order: 

req.body._csrf - typically generated by the body-parser module. 
req.query._csrf - a built-in from Express.js to read from the URL query string. 
req.headers['csrf-token'] - the CSRF-Token HTTP request header. 
req.headers['xsrf-token'] - the XSRF-Token HTTP request header. 
req.headers['x-csrf-token'] - the X-CSRF-Token HTTP request header. 
req.headers['x-xsrf-token'] - the X-XSRF-Token HTTP request header. 

私の知る限り、エラーが正しいCookieを含むPOST/PUT要求から来ているようだが、nodejs/csurfがあり、それらを探していません。

具体的なケースでは、_csrfはカートのアイテムとともにリクエスト本体に入れてください。そうでない場合は、ヘッダーの名前をcsrf-tokenに変更するか、その他のオプションの1つに変更する必要があります。