angularjs - 带有 AngularJS 和 Express 的错误 CSRF token-6ren

angularjs - 带有 AngularJS 和 Express 的错误 CSRF token

转载作者：行者123 更新时间：2023-12-04 22:11:59

26

4

我想在使用 MEAN 堆栈的应用程序中添加 CSRF 保护。

我尝试了某人已经给出的答案:CSRF Protection in ExpressJS

但它是针对较旧的 express 版本，所以我做了一些更改:

app.use(cookieParser(config.cookieSecret, { httpOnly: true }));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(session({ secret: config.sessionSecret, resave: false, saveUninitialized: true }));
app.use(passport.initialize());
app.use(passport.session());
app.use(flash());
app.use(csrf({value: function(req) {
        var token = (req.body && req.body._csrf)
            || (req.query && req.query._csrf)
            || (req.headers['x-csrf-token'])
            || (req.headers['x-xsrf-token']);
        return token;
    }
}));
app.use(function(req, res, next) {
  res.cookie('XSRF-TOKEN', req.csrfToken());
  next();
});

我可以看到名为 XSRF-TOKEN 的 token 在我的应用程序中生成良好(使用 Chrome 检查)。

但是当我发布一个表单(Angular 前端)时，我有一个关于 token 的错误:
{"message":"invalid csrf token","error":{"expose":true,"code":"EBADCSRFTOKEN","statusCode":403,"status":403}}
我错过了什么？我想知道 req.csrfToken() 是否生成了 Angular 给出的好标记...

编辑:

我只是看到 XSRF-TOKEN 被 AngularJS 用于 $http 请求仅。所以我想我必须在我的表单中添加一个隐藏的输入以使用 csrf 值发布，由 Express 检查，但是如何？

最佳答案

最后，我能够发送良好的代币值(value)。这是完整的答案。

AngularJS 在使用 $http 服务发出的请求期间使用 CSRF 保护(Angular 称为 XSRF)。

When performing XHR requests, the $http service reads a token from a cookie (by default, XSRF-TOKEN) and sets it as an HTTP header (X-XSRF-TOKEN). Since only JavaScript that runs on your domain could read the cookie, your server can be assured that the XHR came from JavaScript running on your domain. The header will not be set for cross-domain requests.

有很多帖子解释了如何使用 ExpressJS 3.xx 发送 XSRF-TOKEN，但有些事情随着 4.xx 版本 发生变化。 Connect 中间件不再包含在内。 Express 使用自己的中间件: cookie-parser 、 body-parser 、 express-session 和 csurf 。

1 - 发送 XSRF-TOKEN cookie

第一步是发送cookie，从后端到前端(Express to Angular):

var express         = require('express');
var app             = express();
var cookieParser    = require('cookie-parser');
var bodyParser      = require('body-parser');
var session         = require('express-session');
var config          = require('./lib/config'); //config.js file with hard-coded options.
var csrf            = require('csurf');

app.use(cookieParser(config.cookieSecret, { httpOnly: true }));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(session({ 
    name: 'sessionID', 
    secret: config.sessionSecret, 
    cookie: {
        path: '/',
        httpOnly: true,
        secure: false,
        maxAge: 3600000
    },
    rolling: true, 
    resave: false, 
    saveUninitialized: true 
}));
app.use(csrf());
app.use(function(req, res, next) {
    res.cookie('XSRF-TOKEN', req.csrfToken());
    next();
});

现在，Angular 能够在 $http 请求期间设置其 HTTP header (X-XSRF-TOKEN)。例子 :

<body ng-app="testApp">
    <div ng-controller="LoginCtrl">
        <form role="form" ng-submit="login()" >
           <input type="email" ng-model="user.email" />
           <input type="password" ng-model="user.password" />
           <input type="submit" value="Log In" />
        </form>
        <p style="color:red">{{loginMsg}}</p>
    </div>
</body>

<script>
    var app = angular.module('testApp', ['ngResource']);
    app.controller('LoginCtrl', function ($scope, $http) {
        $scope.user = {};
        $scope.loginMsg = '';
        $scope.login = function () {
             $http.post('/login', $scope.user).success(function () {
                  $window.location.href='/profile';
             }).error(function () {
                  $scope.loginMsg = 'Wrong credentials, try again.';
             });
        };
    });
</script>

2 - 以非 Angular 形式添加 _csrf 输入

那是我的问题，我不知道如何添加此输入。最后，我创建了一个名为 $csrf 的新 Angular 服务:

    app.factory('$csrf', function () {
        var cookies = document.cookie.split('; ');
        for (var i=0; i<cookies.length; i++) {
          var cookie = cookies[i].split('=');
          if(cookie[0].indexOf('XSRF-TOKEN') > -1) {
            return cookie[1];
          }
        }
        return 'none';
    });

我在 Plunker 上做了一个例子: http://plnkr.co/edit/G8oD0dDJQmjWaa6D0x3u

希望我的回答会有所帮助。

关于angularjs - 带有 AngularJS 和 Express 的错误 CSRF token ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27390547/

26

4

0

文章推荐： r - 更改 R 中日期时间对象中的年份？

文章推荐： django - 如何在表单中使用 GeoDjango Pointfield？

文章推荐： sql - 获取列的最大值和id

文章推荐： haskell - 未curried函数的正确类型签名

express - Express 中的内容安全策略报告空对象
我的 Web 应用程序在后端使用 Node.js 和 Express。当违反内容安全策略 (CSP) 时，报告 URI 报告空对象。我的后台代码如下: app.use(bodyParser.urlen
express - Express 中虚拟路径前缀的用途
在服务器端提供静态服务的方式在 Express 中似乎非常简单: To serve static files such as images, CSS files, and JavaScript fil
javascript - var express = 需要 ('express' ); var app = express(), 什么是 express()??它是方法还是构造函数？它从何而来
var express = require('express'); var app = express(); 这就是我们创建快速应用程序的方式。但是这个'express()'是什么？它是方法还是构造函
express - 无法安装 express 因为 npm install express 错误
我在尝试安装时收到以下错误 express : npm ERR! code ERR_OSSL_PEM_NO_START_LINE npm ERR! errno ERR_OSSL_PEM_NO_STAR
node.js - express.Router() 与 express() 中的 express
如 express 所述routing guide和 this answer ，我们可以创建“迷你应用程序”并从主应用程序使用它。但是我看到一段代码，它在模块中使用 app 而不是 router ap
express - 如何在 NestJS 中安装 Express 中间件(express-openapi-validator)？
我正在写一个 NestJS应用。现在我想安装 Express中间件 express-openapi-validator . 但是，我无法让它工作。有一个 description for how to
c# - Expression.Assign 将 Expression.Call 分配给 Expression.Variable
我看过很多类似的帖子，似乎我声明的 var1 似乎需要在其他地方传递，但我似乎无法弄清楚。 public Expression> CreateEqualNameExpression(string ma
Node.js Express express.json 和 express.urlencoded 与表单提交
Express(或 Connect 的)bodyParser 中间件被标记为已弃用，建议用户改用: app.use(connect.urlencoded()) app.use(connect.json
express - 为什么 Apollo Server 不是 Express 的中间件，而是接受 Express 作为中间件的服务器？
我只是想知道这种看似尴尬的配置的原因是什么(来自 Getting Started w/ Apollo Server )， const server = new ApolloServer({ //
angular - ngIf 导致错误 : Conditional Expression requires all 3 expressions at the end of expression
我正在尝试在表单组中写入表单控件特定的验证错误消息。我在网上找到了几个教程和示例 ( such as this one )，概述了一个看似简单的 *ngIf div，如果在控件上检测到错误，则显示错误
express - 无服务器 Express 应用程序在路由内的逻辑完成之前终止
我有一个简单的 Express 应用程序，托管在 AWS 上，使用无服务器框架。我正在使用 serverless-http 包装 express 应用程序以部署到 AWS lambda 函数，并使用
express - 安装 express 应用程序生成器时出错
我最近在 mozilla 教程的帮助下安装了 node 和 express。我正在安装应用程序生成器的下一步，但是当我运行时 npm install express-generator -g 在我的终
express - 这两种使用 express 中间件的方法有区别吗？
我遇到过两种不同的方式来定义 express、use() 中间件，我想知道它们之间是否有任何区别，或者它是否只是语法糖？一个 const app = express(); app.use(cors(
express - Express/Jade 中的相对链接
我试图让我的 Jade 模板编写一个相对于当前 URL 的超链接 ( )。例如，我的 View 是从 http://localhost/cats 调用的它看起来像这样: extends layou
express - 如何在 Express 中将所有请求作为过滤上下文处理？
检查 Express 文档我在下面看到了这种解决方案: app.all('/*', function(req, res) { console.log('Intercepting request
express - Sequelize Express 多个模型
我似乎无法弄清楚如何包含多个模型。我有三个模型。Tabs, Servers, and PointsTabs hasMany ServerServers belongsTo Tabs and hasM
iis-express - 如何启动IIS Express？
我已使用Web PI安装IIS Express。在托盘中，没有IIS Express图标。如何在不使用命令行的情况下启动IIS Express？我希望IIS永久运行，因此没有命令行。最佳答案参见R
express - 如何在没有模板引擎的情况下制作 Express 网站？
我不想在我的网站上使用 Jade 或 EJS。如何在不默认使用 Jade 模板的情况下创建快速站点？谢谢最佳答案如果您想要的是直接为静态 html 文件提供缓存资源的可能性，同时仍然能够点击“/”
express - express.js + PATCH动词
Express是否支持HTTP动词“PATCH”，例如: app.patch("/api/resource", function(req, res){ ... }); 我检查了文档，对我来说似乎还不清
express - Vue历史模式和 express 服务器出现404错误
我正在快速服务器中运行 vue SPA。问题是当使用历史模式并刷新页面时，我得到一个 404 not found 异常。我尝试使用 connect-history-api-fallback 但不起作用

首页

博学

6Ren·AI

商城

angularjs - 带有 AngularJS 和 Express 的错误 CSRF token