React前端和REST API，CSRF [英] React frontend and REST API, CSRF

问题描述

在前端使用带有RESTful API的React作为JWT的后端和授权，我们如何处理会话?例如，登录后，我从REST获得了JWT令牌.如果我将其保存到localStorage中，我很容易受到XSS的攻击，如果我将其保存到cookie中，除了将cookie设置为HttpOnly之外，其他问题相同，但是React无法读取HttpOnly Cookies(我需要读取cookie才能从其中获取JWT并使用这个带有REST请求的JWT)，我也没有提到CSRF问题.如果您使用REST作为后端，则不能使用CSRF令牌.

Using React on the frontend with a RESTful API as backend and authorisation by JWT, how do we handle sessions? For example after login, I get a JWT token from REST. If I save it to localStorage I am vulnerable to XSS, if I save it to cookies, same problems except I set cookies to HttpOnly, but React can't read HttpOnly Cookies (I need to read cookie to take JWT from it, and use this JWT with REST requests), also I didn't mention CSRF problem. If you're using REST as backend, you can't use CSRF Tokens.

因此，使用REST的React似乎是一个糟糕的解决方案，我需要重新考虑我的体系结构.是否可以为您的用户提供一个安全的React应用程序，该应用程序可以处理REST API方面的所有业务逻辑，而不必担心丢失其数据?

As a result, React with REST seems like a bad solution and I need to rethink my architecture. Is it possible to offer your users a secure React application that handles all business logic on the REST API side without fear of losing their data?

更新:

据我了解，可以这样做:

As far as I understood, it is possible to do this:

1. React对REST API进行AJAX调用
2. React从REST获取JWT令牌
3. React写入HttpOnly cookie
4. 由于React无法读取HttpOnly cookie，因此我们在需要身份验证的所有REST调用中都按原样使用它
5. REST调用检查XMLHttpRequest标头，这是CSRF的一种保护方式
6. REST端检查cookie，从中读取JWT并进行处理

我在这里缺乏理论知识，但是逻辑看起来很安全，但是我仍然需要回答我的问题并批准该工作流程".

I lack theoretical knowledge here, but the logic looks pretty secure, but I still need an answer to my questions and approve of this "workflow".

推荐答案

1. React对REST API进行AJAX调用

确保，有很多可利用的宁静资源客户端库

assured, lots of restful resource client lib available

1. React从REST获取JWT令牌

确定，这是JWT应该做的

assured, this is what JWT should do

1. React写入httponly cookie

我不这样认为，它不应该工作，但是会话并不是那么重要，它很快就会过时，并重新检查关键操作的密码，即使黑客在很短的时间内就得到了它. ，您可以在用户登录时将会话令牌与IP绑定在一起，并在后端api中进行检查.如果您希望最安全，只需将令牌保存在内存中，然后在打开新页面或刷新页面时重做登录即可

I don't think so, It should not work, but session is not such a important thing, it'll soon get out of date, and recheck password on key operations, even the hackers got it in a very short time, you can bind session token together with IP when user login and check it in your backend apis. If you want it most secured, just keep token in memory, and redo login when open new page or page refreshes

1. 由于react无法读取httponly cookie，因此我们在需要身份验证的所有REST调用中按原样使用它

请放心，通过登录令牌(例如csrf)检查用户和权限，您可以将登录令牌放入请求标头中，并在后端api中进行检查. 将登录令牌绑定到您自己的宁静库中将为您节省很多代码

assured, check user and permissions through login token, like csrf you can put your login token into your request header, and check it in your backend apis. Bind login token to your own restful lib will save you a lot codes

1. 调用时的REST检查XMLHttpRequest标头，这是CSRF保护的一种形式 REST端检查cookie，从中读取JWT并进行处理

1. REST on calls checks XMLHttpRequest header, what is some kind of CSRF protection REST side check for cookie, read JWT from it and do stuff

像大多数人一样放心. 另外，将csrf令牌绑定到您自己的Rest库将为您节省很多代码

assured, as most people do. Also, bind csrf token to your own restful lib will save you a lot codes

在标题 https://www.npmjs.com/package/express中使用用户令牌-jwt-token Authorization JWT < jwt token >

在标题 https://github.com/expressjs/csurf 中使用csrf令牌 req.headers['csrf-token'] - the CSRF-Token HTTP request header.

use csrf token in header https://github.com/expressjs/csurf req.headers['csrf-token'] - the CSRF-Token HTTP request header.

宁静的客户端 https://github.com/cujojs/rest

与jwt反应 https://github.com/joshgeller/react-redux -jwt-auth-example

这篇关于React前端和REST API，CSRF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！