javascript - express csurf(csrf 中间件)不能在 angularjs 中使用 XSRF

Question

Express 和 Angular 都有自己的 csrf 中间件。我根本无法让它们工作，而且互联网上似乎也没有关于此的连贯指南。我的理解是 express 4.0 使用 csurf 作为它的 csrf 中间件，我必须在 angularjs 上设置 X-XSRF-TOKEN。

有关如何执行此操作的信息分散，有时会出现冲突:

How to test endpoints protected by csrf in node.js/express

angular, django and csrf

CSURF Angular Implementation

但是我已经尝试过了，但它们不起作用。我的 _csrf 在 Angular 客户端上始终是 undefined，并且 csurf 总是给出 success，尽管没有从客户端提供 csrf token 。

此外，我正在使用 express-jwt 来保持用户 session ，所以我不确定这是否会干扰 cookie-session(curf 要求)。

这是我使用 csrf 处理注册的简单 angular/express 应用程序(不工作):

Angular 应用程序.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 方面，app.post('/login') 一直运行而没有失败，即使 csrf token 应该是错误的(undefined 因为 csrf on Angular 边不起作用)。这表明 csurf 在 express 端根本不起作用。

有人可以提供一个深入的解释，将 csurf 集成到 express 4.0 中，将 xsrf 集成到 Angular 中，并让它们协同工作吗？

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 方法生成一个 secret 并存储在你的 session 中。您可以通过变量 req.session.csrfSecret 访问它。但是，它不执行 req.csrfToken 方法，该方法使用此 secret 返回一个 csrf Token。要正确返回 csrf token ，您需要在另一个中间件中调用它。

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

希望对您有所帮助。