如何确保客户端应用程序(反应)和API通信的安全 [英] How to secure client app (react) and API communication

问题描述

我有一个客户端React应用程序和一个Rails API，React应用程序从中获取数据.

I have a client side React application and a Rails API from which the React app is fetching data.

正如您所期望的，我只希望我的React应用程序能够从API提取数据，而世界其他地区则不能从该API接收数据.

As you would expect I only want my React application to be able to fetch data from the API and the rest of the world shouldn't be able to receive data from it.

尽管进行了很多搜索，但我仍未找到确保两个应用程序之间通信安全的最佳方法.

Despite much searching I am yet to find the best way to secure the communication between the two applications.

我已经阅读了有关JWT令牌和基于cookie的会话身份验证的信息，但是大多数文章似乎都侧重于用户身份验证(即登录/注销)，而不仅仅是两个应用程序之间的通信.

I have read about JWT tokens and cookie based session authentication but the majority of articles seem to be focused on authentication of users (ie sign in/sign out) rather than communication between just the two applications.

这两个应用程序将共享同一个域，因此依靠Cross Origin来保护通信就足够了吗?

The two apps will share the same domain so is it enough to rely on Cross Origin to secure communication?

任何建议都将不胜感激.

Any advice really would be much appreciated.

推荐答案

如果我的问题正确，那么您希望您的客户端(React App)成为唯一可以访问您服务器的客户端.

If I got your question right you want your client(React App) to be the only client who can access your server.

作为解决方案，您将必须结合使用CORS和JWT授权，因此，我建议使用严格的CORS，以仅允许您的React应用程序域调用服务器.为此，我通常使用 CORS npm模块和

As a solution to that you will have to have a combination of CORS and a JWT authorization, Thus I would suggest having a strict CORS to enable only your react app's domain to make a call to the server. To achieve this, I generally use a CORS npm module and configure the origin on my server or you can do it yourself as well.

var express = require('express')
var cors = require('cors')
var app = express()

var corsOptions = {
  origin: 'http://example.com',
  optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204 
}

以上代码仅允许来自example.com的请求被服务器接受或查看

The above code allows only requests from example.com to be accepted by the server or have a look at this code for more dynamic whitelist & blacklist approach.

现在回到JWT，它只是一个json加密和解密令牌，可以在API请求之间共享以进行身份​​验证并授权用户.

Now coming back to JWT, It is just a json encryption and decryption token which can share across API request to Authenticate as well as authorize the user.

例如，您可以在JWT中存储用户的电子邮件，角色和昵称之类的信息，并在每个API请求中发送此加密的JWT，服务器会授权此请求，如果为true，则转发给所请求的API.授权和转发过程通常使用拦截器"模式实施，其中中间件(护照oAuth )在每个API调用之前进行检查和身份验证.

For instance, you can store information like email, role, and nickname of the user in JWT and sent this encrypted JWT in each API request, the server authorizes this request and if true forwards to the requested API. This process of authorization and forwarding is generally implemented using an 'Interceptor' pattern wherein a middleware(Passport oAuth) does the check and auth before each API call.

做上述两件事将确保只有具有有效JWT令牌和允许与服务器进行通信的域地址的客户端.该客户端将是您的react应用，因为它是唯一具有正确的JWT和原始地址的客户端.

Doing the above 2 things will ensure that only a client which has valid JWT token and domain address which you allowed to talk with the server. And this client will be your react app, as it is the only one with proper JWT and origin address.

因此，现在您的react应用程序应该确保在API调用(发布/获取/放置)中传递了适当的JWT令牌(很可能是在API请求的标头中)，您可以使用API​​帮助程序服务来执行此操作并在您进行API调用的任何位置将其导入到组件中.然后，您的节点服务器将实现通行证中间件模式来授权此JWT并过滤未授权的请求.

So now your react app should just make sure that appropriate JWT token is passed in the API calls (post/get/put), most probably in the header of the API request, you can have an API helper service which does this for you and import that in component where-ever you make an API call. And your node server will implement the passport middleware pattern to authorize this JWT and filter non-authorized requests.

如果您的应用没有登录，则JWT也可以是客户端ID，该ID可以将您的客户端识别为合法客户端.就像用户登录一样，您可以让应用程序使用诸如秘密客户端ID之类的数据来响应服务器调用服务器.这将返回一个JWT令牌.或者，您可以预先生成一个JWT令牌，并在应用程序首次存储时对其进行反应，并通过设置TTL和其他配置来检查对服务器进行呼叫的客户端是旧的还是新的或其他假客户.

If you react app doesn't have a login, The JWT can be a client ID as well which recognizes your client as being legit. And just like user login, you can have you react app make a call to the server with data like a secret client id. This will return a JWT token. OR you can pre-generate a JWT token and you react app store it when it loads the first time, and by setting TTL and another config you can check if the Client which is making a call to your server is Old or New or some other fake client.

HTH

这篇关于如何确保客户端应用程序(反应)和API通信的安全的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！