Express的csurf中间件与AngularJS中的XSRF不兼容。

Question

Express和Angular都有自己的csrf中间件。我无法让它们正常工作，也没有任何关于此的连贯指南。我的理解是，express 4.0使用csurf作为其csrf中间件，并且我必须在angularjs上设置X-XSRF-TOKEN。

关于如何做到这一点，有一些零散的信息，有时会产生冲突： 如何测试由node.js/express保护的端点 angular、django和csrf CSURF Angular实现 但我已经尝试过它们，它们不起作用。我的_csrf始终在Angular客户端处是undefined，而csurf总是给出success，尽管客户端未提供任何csrf令牌。

此外，我正在使用express-jwt来保持用户会话，因此我不确定这是否会干扰cookie-session（curf所需）。

以下是我用于处理注册并包含csrf的简单angular/express应用程序（未能正常工作）： angular app.js

var app = angular.module('app', ['ngCookies', 'ui.router']);

app.config(function($stateProvider) {
    $stateProvider.state('register', {
        url: '/register',
        controller: 'RegisterCtrl',
        templateUrl: 'views/register.html'
    });
});

// register csrf
app.run(['$http', '$cookies', function($http, $cookies) {
    $http.defaults.headers.post['X-XSRF-TOKEN'] = $cookies.csrftoken;
}]);

// controller
app.controller('RegisterCtrl', ['$scope', '$cookies', '$http', 
    function($scope, $cookies, $http) {
        $scope.data = { email: "", password: "", _csrf: $cookies._csrf};

        $scope.submitForm = function() {
            // This will alert 'undefined'
            alert("This is csrf token: " + $scope.data._csrf);

            $http.post('/register', data).success(function(done) {
               console.log('success');
               var jwt_token = done["jwt_token"];
               // save token to local storage.
            }).error(function(err) {
               console.log('error');
            });
        }
    }
]);

express app.js

var express = require('express');
var app = express();
var http = require('http').Server(app);
var expressJwt = require("express-jwt");
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: true});
app.use(bodyParser.json());

// csrf setup
var session = require('cookie-session');
var csrf = require('csurf');
app.use(session({
    secret: 'keyboard cat'
}));
app.use(csrf());
// This part taken from csurf guide:
// https://github.com/expressjs/csurf
app.use(function(err, req, res, next) {
    if (err.code !== 'EBADCSRFTOKEN') return next(err)
    res.status(403);
    res.send('session has expired or form tampered with');
});

app.post("/login", function(req, res) {
    var email = req.body.email;
    var password = req.body.password;

    // save user to db ...
    var jwt_token = // create and sign jwt token to be given back to registered user

    res.json({"jwt_token": jwt_token});
});

http.listen(3000, function() {
   console.log("Express started");
});

现在，如果我提交注册表单，alert()会显示_csrf是undefined。在expressjs方面，即使csrf令牌应该是错误的(undefined，因为angular端的csrf不起作用)，app.post('/login')也一直运行而没有失败。这表明在express端根本没有工作csurf。

有人能够提供一个深入的解释，将csurf集成到express 4.0中，将xsrf集成到Angular中，并使它们一起工作吗？

- fanhats

Answer 1

我也曾在集成这两个方面遇到了问题，并得出了以下结论（只是相关部分）：

express app.js

var cookieParser = require('cookie-parser');
var session = require('cookie-session');
var csrf = require('csurf');
app.use(session({
    secret: 'keyboard cat'
}));
app.use(cookieParser('secret'));
app.use(csrf());
app.use(function (req, res, next) {
    res.cookie("XSRF-TOKEN",req.csrfToken());
    return next();
});

在AngularJS方面，不需要进行任何更改。它会自动识别XSRF-TOKEN。

现在，为了解释上面的代码片段，我需要引用csurf库。它是一个处理所有csrf认证的中间件，但它实现了另一个csrf库，称为csrf。这个csrf返回一个“类”，有四个函数（secret、secretSync、create、verify）。

当您调用其中间件时，csurf会生成一个秘密，通过secretSync方法存储在您的会话中。您可以通过变量req.session.csrfSecret访问它。然而，它不执行req.csrfToken方法，该方法使用此密钥返回csrf令牌。要正确返回csrf令牌，您需要在另一个中间件中调用它。

另一件重要的事情是，返回的cookie名称必须是“XSRF-TOKEN”，而不是“_csrf”。因此，Angular会自动识别它，并将“X-XSRF-TOKEN”附加到HTTP请求中，由csurf中间件进行识别。

希望这能帮助你。

- João Bruno Abou Hatem de Liz