MERN 堆栈中的 CSRF 实现

Question

下面是我的 MERN 项目的文件结构。

|-Project
  |- client
  |- server

客户端文件夹包含一个反应服务器。客户端运行于 localhost.client.com 服务器文件夹包含 node.js 服务器的代码。服务器在 localhost.server.com

运行

每当我从客户端向服务器发出请求时。如何减轻 csrf 攻击？确保向服务器发出的请求来自客户端，而不是来自任何其他来源。

Answer 1

您的问题可能包含在 React frontend and REST API, CSRF 中。

有一篇关于 CSRF and counter measures 的优秀文章（考虑到 Angular，但它仍然是同样的问题）。 TL/DR:

使用same-origin-policy或在需要时设置Access-Control-Allow-Origin-header
将 XSRF-Token 保存为安全 cookie（不幸的是，这需要 exta 请求 - 大多数时候）。只有来自您域的代码才能访问此值。
将该令牌作为 X-XSRF-TOKEN header 值与您的请求一起发送以授权请求

要确保只有您的应用程序可以使用服务器 api，您可以在 CORS / OPTIONS 响应中设置 Access-Control-Allow-Origin 值 header。

在开发过程中通常设置为
Access-Control-Allow-Origin: *

对于生产，您指定域名/服务器名称
Access-Control-Allow-Origin: localhost.client.com

为了防止欺骗来源，可以使用（反）CSRF-Tokens。这是附加到您的请求的额外值，用于验证您的请求。此值 can/should 保存在安全 cookie 中。 csurf or JSON Web Tokens 可能与您相关。在您的情况下，CSRF-Tokens 可能需要向您的 api 发出额外请求以查询令牌。

MERN 堆栈中的 CSRF 实现

CSRF implementation in a MERN stack

csrf

node.js

reactjs