CSURF Angular 实现

Question

我一直在尝试在一个个人项目上实现csurf。我已经通过搜索谷歌了解到如何在没有像Jade或EJS这样的模板引擎时，在表单上实现csurf。我的express服务器也不是直接渲染页面，而是主要返回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="">

- Chad Watkins

---

这看起来是正确的。你究竟看到了什么问题/错误？ - Ashwin Balamohan

当您检查DOM时，实际上是否看到散列设置为value属性？黏贴其结果将非常有帮助。 - Seth

Answer 1

在您的控制器中，您需要设置一个本地变量等于csrf cookie的值。

例如：

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

为使该示例起作用，您需要包含ngCookies模块，因此请在index.html中添加类似以下内容：

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

然后在你的模块中添加依赖 'ngCookies'。

- Yuri Zarubin

Answer 2

根据 $http 文档 中的 "Cross Site Request Forgery (XSRF) Protection" 章节，当执行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内容或创建隐藏的输入。

- 18augst