CSURF 角度实现答案

【问题标题】：CSURF Angular ImplementationCSURF 角度实现
【发布时间】：2023-03-16 15:31:01
【问题描述】：

我一直在尝试对我一直从事的个人项目进行 csurf 实现。当我不使用 Jade 或 EJS 等模板引擎时，我一直在到处搜索谷歌，试图弄清楚如何在表单上实现 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="">

【问题讨论】：

这看起来是正确的。您看到的具体问题/错误是什么？
当您检查 dom 时，您是否真的看到了 value 属性的哈希集？粘贴结果会有很大帮助。

标签： javascript angularjs node.js express csrf

【解决方案1】：

根据$httpdocumentation 的“跨站请求伪造 (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 内容并创建隐藏输入。

【讨论】：

【解决方案2】：

在你的控制器中，你需要设置一个局部变量等于 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”添加到您的模块中。

【讨论】：