使用React和NextJS保护API身份验证请求

Posted 2021-03-27

我正在构建一个React / NextJS Web应用程序，它使用一个无头Drupal API和另一个NodeJS API。

要向NodeJS API发出请求，它需要一个身份验证令牌，该令牌是通过向相关端点传递两个唯一的用户值和一个常量值（每个使用者的更改，但我只构建一个对我不变的消费者）生成的，并返回一个访问权限并刷新令牌。

什么是安全处理这个问题的最佳方法？只是从客户端发出请求将使它在开发工具中全部可见，并且NextJS在页面加载时将无法做出一些请求。

答案

如果您有权访问后端：

根本不要处理前端的身份验证令牌。使用后端设置一个带有选项httpOnly的cookie（这会禁用javascript端的访问）并使用较新的someOrigin（只有最新的浏览器支持它）来阻止CSRF。

有关本主题的详细介绍，请阅读以下文章：https://medium.com/@jcbaey/authentication-in-spa-reactjs-and-vuejs-the-right-way-e4a9ac5cd9a3