CSRF 令牌丢失，Ionic - AngularJS FullStack

Question

我有一个项目，其后端位于 MEAN 堆栈上，以 AngularJS Full-Stack generator 和 Ionic 下的应用程序开始，当我尝试执行 POST 请求以从 Ionic 应用程序登录时，服务器显示“CSRF 令牌丢失”

{"error":{"message":"CSRF token missing","stack":"Error: CSRF token missing\n    at checkCsrf (/Volumes/Data/Dev/carry/back/node_modules/lusca/lib/csrf.js:89:18)\n    at /Volumes/Data/Dev/carry/back/node_modules/lusca/index.js:48:21\n    at hsts (/Volumes/Data/Dev/carry/back/node_modules/lusca/lib/hsts.js:25:9)\n    at /Volumes/Data/Dev/carry/back/node_modules/lusca/index.js:48:21\n    at xframe (/Volumes/Data/Dev/carry/back/node_modules/lusca/lib/xframes.js:12:9)\n    at /Volumes/Data/Dev/carry/back/node_modules/lusca/index.js:48:21\n    at xssProtection (/Volumes/Data/Dev/carry/back/node_modules/lusca/lib/xssprotection.js:16:9)\n    at /Volumes/Data/Dev/carry/back/node_modules/lusca/index.js:48:21\n    at lusca (/Volumes/Data/Dev/carry/back/node_modules/lusca/index.js:53:9)\n    at Layer.handle [as handle_request] (/Volumes/Data/Dev/carry/back/node_modules/express/lib/router/layer.js:95:5)\n    at trim_prefix (/Volumes/Data/Dev/carry/back/node_modules/express/lib/router/index.js:312:13)\n    at /Volumes/Data/Dev/carry/back/node_modules/express/lib/router/index.js:280:7\n    at Function.process_params (/Volumes/Data/Dev/carry/back/node_modules/express/lib/router/index.js:330:12)\n    at next (/Volumes/Data/Dev/carry/back/node_modules/express/lib/router/index.js:271:10)\n    at /Volumes/Data/Dev/carry/back/node_modules/express-session/index.js:432:7\n    at /Volumes/Data/Dev/carry/back/node_modules/connect-mongo/lib/connect-mongo.js:305:11\n    at handleCallback (/Volumes/Data/Dev/carry/back/node_modules/mongoose/node_modules/mongodb/lib/utils.js:96:12)\n    at /Volumes/Data/Dev/carry/back/node_modules/mongoose/node_modules/mongodb/lib/collection.js:1341:5\n    at handleCallback (/Volumes/Data/Dev/carry/back/node_modules/mongoose/node_modules/mongodb/lib/utils.js:96:12)\n    at /Volumes/Data/Dev/carry/back/node_modules/mongoose/node_modules/mongodb/lib/cursor.js:670:5\n    at handleCallback (/Volumes/Data/Dev/carry/back/node_modules/mongoose/node_modules/mongodb-core/lib/cursor.js:154:5)\n    at nextFunction (/Volumes/Data/Dev/carry/back/node_modules/mongoose/node_modules/mongodb-core/lib/cursor.js:675:5)"}}

即使在请求中看到它发送令牌和其他数据

POST /auth/local HTTP/1.1
Host: 192.168.1.13:9000
Connection: keep-alive
Content-Length: 47
Accept: application/json, text/plain, */*
X-DevTools-Emulate-Network-Conditions-Client-Id: 552547EB-CA80-4AF8-8392-DDE2A9D833A4
Origin: file://
User-Agent: Mozilla/5.0 (Linux; Android 5.1.1; E5803 Build/32.0.A.4.11; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/48.0.2564.106 Mobile Safari/537.36
Content-Type: application/json;charset=UTF-8
Accept-Encoding: gzip, deflate
Accept-Language: en-US
Cookie: connect.sid=s%3AKpTipuTW9UAqmbx_X__fuDrfGxXiGRpF.%2FKf2gm3y%2F0VwBzUygchh7%2BVfi6PLoQZhOfI5T22XlxY; XSRF-TOKEN=iZvZ2wKb3VafJb9ZGqily3pBY3nGI9gVBQaww%3D
X-Requested-With: com.todomicilio.app

我没有修改快递服务器的默认配置

Answer 1

您似乎忘记在 <form></form> 中添加用于在 html 中进行 POST 的 csrf 令牌。

在您的数据中，只有 cookie 中有 CSRF 令牌，您还需要在表单中有 CSRF 令牌（或在特殊的 http 请求标头中，这取决于保护实现）。

关于跨站请求伪造 (CSRF) 的两句话：

1. 如何进行CSRF攻击：

假设我们有一个网站“hacker.example”，而且我们知道另一个网站“bank.example”使用金钱运作。想象一下，bank.example 有一个 POST 方法 /send-money 将钱从当前用户帐户发送到另一个帐户，并带有 receiver-account 参数和银行使用 cookie 进行用户授权。

想象一下，来自银行的用户进入黑客的网站并单击将表单提交给bank.example/send-money 的按钮，其中receiver-account 参数的值是黑客的值。因此，浏览器将向 bank.example 网站发出此 POST 请求，其中包含 bank.example(!) 的 cookie，因此，如果银行没有对 CSRF 的保护，则此请求将被授权，黑客将从该用户那里获得资金。

1. 如何保护 CSRF 攻击（可能的解决方案之一）：

您可以放置​​两个秘密令牌：一个在 cookie 中，一个用于网站的每个发布请求。每次用户发出 post 请求时，服务器都应该比较这两个令牌。

1. 为什么有效？

现在，hacker.example 应该知道 csrf 令牌以发出适当的 POST 请求。黑客只有两种可能的选择：从bank.example 的cookies 或从bank.example 的html 代码中提取csrf 令牌。

但hacker.example 由于安全策略的原因，无法访问来自bank.example 的cookie，并且hacker.example 无法从bank.example 的bank.example 获取用于从<form> 提取csrf 令牌的html 页面，因为CORS。

Answer 2

如果您不想使用 CSRF 令牌，请禁用 Lusca。

请参考以下链接

https://github.com/angular-fullstack/generator-angular-fullstack/issues/1582

Answer 3

虽然有点晚了，但我想回答，因为我遇到了同样的问题。 以下是问题的解决方案：

https://github.com/angular-fullstack/generator-angular-fullstack/pull/2613

“当 express.static() 为 index.html 提供服务时，它会破坏中间件链并避免在/请求时设置 CRSF，从而导致第一次登录失败，只要用户没有设置 cookie。

我认为这涉及并可能修复 #2224、#2511、#2611 和 krakenjs/lusca#95

这个提交基本上将 _index.html 重命名为 app.template.html 更具表现力，生成的文件将是 app.html 避免 express.static() 阻塞中间件链，因为不再有 index.html .因此，有效地调用了 routes.js:sendFile。

请注意，我尝试过很多次使用 webpack 尝试寻找另一种解决方案，这是我能找到的最优雅的解决方案。”