Angularjs 如何保护我的api调用免受CSRF攻击

我正在开发angular js应用程序，尝试创建一个简单的登录页面，并尝试请求我的服务器API来验证我的登录调用。下面是我计划做的事情和方法

注意：我假设服务器负责验证我的令牌和请求。

通过

API

调用向服务器提供

用户名

密码

。 获得身份验证后，服务器将为我的应用程序生成一个

令牌

（我通过该令牌拨打了电话）。 我将其存储在浏览器的

COOKIE

中。 应用程序将进一步使用此Cookie（身份验证令牌）对API进行每次HTTP调用

现在这种方法对我来说很好，但我相信它可以公开用于

CSRF攻击

为了避免来自我的浏览器的

CSRF攻击

，我为我的代码提供了应用程序id或（版本id），这些代码也随cookie一起传输到

http调用

的API

使用此版本id或应用程序id的想法是，这可以被视为我代码的签名，即请求来自已分配

令牌的已签名（已验证）应用程序

我只想知道我的方法有多好，对于我的基本应用程序视点和我的主要（广泛项目）应用程序来说，它有多安全

这里我试图通过一个粗略的图表来展示

为这张图的小视图和糟糕的笔迹道歉。
像Laravel这样的后端框架有一个非常好的内置功能：

您可以使用Angular的常量函数将令牌传递给Angular:

因此，在初始化应用程序后，您可以说：
angular.module（'myApp'）.constant（''
和Laravel将完成其余的工作。如果你想自己实现这样的技术，你应该研究一下Laravel的源代码：。
在每个请求中添加App ID+Version ID不会保护你的系统免受CSRF攻击，除非它们在自定义头中-如果是，你也可以使用，因为任何非标准头都是跨域保护的，前提是您没有使用开放策略启用CORS

检查查询字符串或POST数据中设置的应用程序ID+版本的原因是，攻击者可以轻易获得此信息，将应用程序ID+版本ID添加到跨站点请求中。另一种适合你的方法是技术。使用CSPRNG生成一个随机的128位字符串，然后将其设置为cookie值（例如，
CSRFCookie
）。在每个对API的请求中，也传递此值。e、 g.在查询字符串中：
CSRFCookie=
。在服务器端，只需检查值是否匹配。攻击者不知道cookie值，因此无法向查询字符串添加相同的值

此方法确实存在一些较小的漏洞，只有在MITM场景中或在您不控制所有子域的情况下才可真正利用这些漏洞。简短回答：。
“我将此存储在浏览器的COOKIE中”停止。通过cookie提供此信息，第三方扩展（或用户控制台）发送的任何请求也将自动包含该cookie，甚至无需读取。不要将令牌保存为cookie，而是通过TLS连接将其与每个请求一起传递。我有一个单页应用，当页面被重新加载时，我的应用程序如何理解用户是否已经登录。@阿米巴一旦你不使用cookie存储令牌，你将受到CSRF的保护。对于重新加载的情况，请使用本地存储来持久化令牌。对于example@PedroFernandesSteimbruch我想这个依赖项会对我有所帮助，让met试试看，如果我发现它没有像我现在看到的那样工作，我会重新打开这个问题。谢谢你的回复，我正在开发一个客户端应用程序，php是如何进入场景常量（“”），我的应用程序只是持有一个令牌，它从API服务器收到一次认证，可以通过$http请求获得该令牌。同样，您只需要存储它以备将来使用，例如，在变量或常量中。您可以使您的令牌短期存在，只需将其存储在Javascript中，并每次刷新令牌。@KevinB:我同意我可以存储它，但当我重新加载页面时会发生什么呢？我的所有存储值都被清除，以前登录的用户现在将显示为已注销。我想这是只构建客户端应用程序的缺点。您必须找到一种方法将其存储在某个地方，有许多选项，如
localStorage
。