Error: CSRF token missing, hackathon-starter plus AngularJS
Error: CSRF token missing, hackathon-starter plus AngularJS
我正在将 AngularJS 整合到 hackathon-starter 中。它是按照我提到的 here 和以下 test.html 和 test.controller.js
完成的
<div>
The record: {{record}}
</div>
<div align="right">
<button class="btn btn-lg btn-primary" ng-click="createRecord()" onclick="window.location.href='/order/shipping'">
<i class=""> Create record</i>
</button>
</div>
test.controller.js
(function () {
'use strict';
var injectParams = ['$scope', '$location', '$http'];
function TestController($scope, $location, $http) {
$scope.record = {
interId: 1,
sku: '107k',
category: 'Useful'
};
function createRecord(record) {
return $http.post('/order/create', record).then(function (response) {
return response.data;
})
}
$scope.createRecord = function () {
var record = $scope.record;
createRecord(record)
.then(function (data) {
if (data.success) {
return $location.url('/shipping');
}
alert('Something wrong...');
});
}
};
TestController.$inject = injectParams;
angular.module('miniApp')
.controller('TestController', TestController);
}());
如果 csrf 的值设置为 false,它会起作用,例如:
app.use(lusca({
csrf: false,
xframe: 'SAMEORIGIN',
xssProtection: true }));
当 csrf 的值设置为 true 时,会出现错误:
错误:缺少 CSRF 令牌
解决这个问题的一个选项是在 lusca 配置之前放置对“/order/create”路径的请求,例如:
app.post('/order/create', passportConf.isAuthenticated, orderController.postCreateOrder);
app.use(lusca({
csrf: true,
...
但是这个解决方案不是很优雅。
另一种选择是 whitelist dynamic URLs using regular expression 在 CSRF 中间件中。我尝试过这种方法,但我缺乏正确操作的经验。 如何用白名单解决这个问题(具体例子)?
我可能是错的,但应该可以在 test.controller.js 内传递 csrf。我不知道该怎么做。所以,如果有人能提供具体的例子就好了。
带有白名单的解决方案将被排除在外,因为我不知道如何让它工作。
据我所知,lusca
没有内置任何易于配置的 CSRF 白名单,hackathon-starter
也没有。从您 linked article 的措辞来看,听起来他们希望您在自己的自定义中间件中自己进行白名单。为此,我认为您可能需要放弃 app.use(lusca({}))
调用,而是单独 app.use()
每个 lusca 中间件,如下所示:
var csrfMiddleware = lusca.csrf();
app.use(function(req, res, next) {
// Paths that start with /foo don't need CSRF
if (/^\/foo/.test(req.originalUrl)) {
next();
} else {
csrfMiddleware(req, res, next);
}
});
app.use(lusca.csp({ /* ... */}));
app.use(lusca.xframe('SAMEORIGIN'));
app.use(lusca.p3p('ABCDEF'));
app.use(lusca.hsts({ maxAge: 31536000 }));
app.use(lusca.xssProtection(true));
我正在将 AngularJS 整合到 hackathon-starter 中。它是按照我提到的 here 和以下 test.html 和 test.controller.js
完成的<div>
The record: {{record}}
</div>
<div align="right">
<button class="btn btn-lg btn-primary" ng-click="createRecord()" onclick="window.location.href='/order/shipping'">
<i class=""> Create record</i>
</button>
</div>
test.controller.js
(function () {
'use strict';
var injectParams = ['$scope', '$location', '$http'];
function TestController($scope, $location, $http) {
$scope.record = {
interId: 1,
sku: '107k',
category: 'Useful'
};
function createRecord(record) {
return $http.post('/order/create', record).then(function (response) {
return response.data;
})
}
$scope.createRecord = function () {
var record = $scope.record;
createRecord(record)
.then(function (data) {
if (data.success) {
return $location.url('/shipping');
}
alert('Something wrong...');
});
}
};
TestController.$inject = injectParams;
angular.module('miniApp')
.controller('TestController', TestController);
}());
如果 csrf 的值设置为 false,它会起作用,例如:
app.use(lusca({
csrf: false,
xframe: 'SAMEORIGIN',
xssProtection: true }));
当 csrf 的值设置为 true 时,会出现错误: 错误:缺少 CSRF 令牌
解决这个问题的一个选项是在 lusca 配置之前放置对“/order/create”路径的请求,例如:
app.post('/order/create', passportConf.isAuthenticated, orderController.postCreateOrder);
app.use(lusca({
csrf: true,
...
但是这个解决方案不是很优雅。
另一种选择是 whitelist dynamic URLs using regular expression 在 CSRF 中间件中。我尝试过这种方法,但我缺乏正确操作的经验。 如何用白名单解决这个问题(具体例子)?
我可能是错的,但应该可以在 test.controller.js 内传递 csrf。我不知道该怎么做。所以,如果有人能提供具体的例子就好了。
带有白名单的解决方案将被排除在外,因为我不知道如何让它工作。
据我所知,lusca
没有内置任何易于配置的 CSRF 白名单,hackathon-starter
也没有。从您 linked article 的措辞来看,听起来他们希望您在自己的自定义中间件中自己进行白名单。为此,我认为您可能需要放弃 app.use(lusca({}))
调用,而是单独 app.use()
每个 lusca 中间件,如下所示:
var csrfMiddleware = lusca.csrf();
app.use(function(req, res, next) {
// Paths that start with /foo don't need CSRF
if (/^\/foo/.test(req.originalUrl)) {
next();
} else {
csrfMiddleware(req, res, next);
}
});
app.use(lusca.csp({ /* ... */}));
app.use(lusca.xframe('SAMEORIGIN'));
app.use(lusca.p3p('ABCDEF'));
app.use(lusca.hsts({ maxAge: 31536000 }));
app.use(lusca.xssProtection(true));