Question

我一直在尝试对我一直在做的个人项目进行csurf实施。当我没有使用像Jade或EJS这样的模板引擎时，我一直在搜索google以试图找出如何在表单上实现csurf。我的快递服务器也没有直接渲染页面，但主要是返回JSON。我的所有前端都被引用如此

app.use(express.static(__dirname + '/www'));

我使用csurf的服务器代码如下所示

app.use(csurf());

app.use(function (req, res, next) {
    res.cookie('XSRF-TOKEN', req.csrfToken());
  next();
});

在表单的前端，html输入字段如下所示。我也在使用AngularJS，根据我看到的所有例子，我应该做的就是这个。

<input type="hidden" name="_csrf" value="{{csrftoken}}">

我在终端

中收到以下错误

Error: invalid csrf token

如果我检查隐藏的输入，这就是显示的内容。

<input type="hidden" name="_csrf" value="">

Answer 1

在控制器中，您需要将局部变量设置为等于csrf cookie的值

e.g。

.controller('YourCtrl', function($cookies, $scope) {
    $scope.csrftoken = $cookies._csrf
  }
);

要使该示例正常工作，您需要包含ngCookies模块，因此在index.html中包含类似的内容

<script src="bower_components/angular-cookies/angular-cookies.js"></script>

然后将依赖项'ngCookies'添加到您的模块中。

Answer 2

根据$http documentation的跨站请求伪造（XSRF）保护一节：

执行XHR请求时，$ http服务从cookie中读取令牌（默认情况下为XSRF-TOKEN）并将其设置为HTTP头（X-XSRF-TOKEN）。

因此，您只需配置csurf模块即可使用该cookie。像那样：

var csrf = require('csurf');
...
// Cookie / Session initialization etc
app.use(cookieParser());
...
// Important : csrf should be added after cookie and session initialization.
// Otherwise you will get 'Error: misconfigured csrf'
app.use(csrf());
app.use(function(req, res, next) {
  res.cookie('XSRF-TOKEN', req.csrfToken());
  next();
});
...

这样做，您无需配置AngularJS内容并创建隐藏输入。

CSURF角度实施

2 个答案: