Javascript express csurf(csrf中间件)在angularjs中不使用XSRF
Express和Angular都有自己的csrf中间件。我根本无法让他们工作,而且互联网上似乎也没有任何关于这方面的连贯指南。我的理解是express 4.0使用csurf作为其csrf中间件,我必须在angularjs上设置Javascript express csurf(csrf中间件)在angularjs中不使用XSRF,javascript,angularjs,node.js,express,csrf,Javascript,Angularjs,Node.js,Express,Csrf,Express和Angular都有自己的csrf中间件。我根本无法让他们工作,而且互联网上似乎也没有任何关于这方面的连贯指南。我的理解是express 4.0使用csurf作为其csrf中间件,我必须在angularjs上设置X-XSRF-TOKEN 关于如何做到这一点,有一些零散的信息,有时会产生冲突: 但我已经试过了,但都不管用。My\u csrf在Angular clientside上总是未定义,并且csurf总是给出成功,尽管客户端没有给出csrf令牌 此外,我正在使用expres
X-XSRF-TOKEN
关于如何做到这一点,有一些零散的信息,有时会产生冲突:
但我已经试过了,但都不管用。My\u csrf
在Angular clientside上总是未定义
,并且csurf总是给出成功
,尽管客户端没有给出csrf令牌
此外,我正在使用expressjwt
来保持用户会话,因此我不确定这是否会干扰cookie会话(curf要求)
以下是我的简单angular/express应用程序,用于使用csrf处理寄存器(不工作):
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');
});
}
}
]);
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");
});
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();
});
express 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');
});
}
}
]);
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");
});
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();
});
现在,如果我提交注册表,则警报()
将显示\u csrf
未定义。在expressjs端,app.post('/login')
一直运行,没有失败,即使csrf令牌应该是坏的(undefined
,因为角度端的csrf不工作)。这表明csurf
在快速端根本不工作
是否有人能提供一个深入的解释,说明如何在Express4.0中集成csurf
,在Angular中集成xsrf,并让它们一起工作?我在集成这两个方面也遇到了问题,并得出了以下结构(仅相关部分):
express 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');
});
}
}
]);
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");
});
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
现在,为了解释上面的代码,我需要参考csurflib。它是一个处理所有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中间件识别
希望能有帮助